How to make bottom Tab in Android?(Xamarin.Forms)

I am developing on a project using Xamarin.Forms.

In TabbedPage, I would like to display the tab bar at the bottom of the screen in Android.

So we created a CustomRenderer as shown in the sample code on the following page.

Bottom Tabs for Xamarin.Android (in Xamarin.forms app)

In addition, View was created as follows.

<BottonTabbedPage xmlns= ...>
<BottonTabbedPage.Children>
<NavigationPage Title="tab1">
<x:Arguments>
<local:Tab1Page />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="tab2">
<x:Arguments>
<local:Tab2Page />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="tab3">
<x:Arguments>
<local:Tab3Page />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="tab4">
<x:Arguments>
<local:Tab4Page />
</x:Arguments>
</NavigationPage>
</BottonTabbedPage.Children>
</BottonTabbedPage>


I set hide the toolbar on the TabbedPage.
And the toolbar of TabPage1 to TabPage4 was set to display.

As a result, it looks like the image below.

image1

The tool bar got out of the screen, and the tab bar is floated.
I thought that designation of padding written in the sample code was incorrect and fixed it.

Bottom Tabs for Xamarin.Android (in Xamarin.forms app)

// viewPager.SetPadding(0, -tabLayout.MeasuredHeight, 0, 0);
viewPager.SetPadding(0, 0, 0, 0);


As a result, the toolbar was displayed, but the tab bar was not corrected while floating.

image2

How can I move the tab bar to the bottom of the screen?

I do not want to use the library for move down the tab bar.
Just want to move the tab bar down by just modifying the CustomRenderer.

2 Answers
2

In your xaml.CS(code behind) file you can call on the following line to put your tabs at the bottom of the page.

On<Android>().SetToolbarPlacement(value: ToolbarPlacement.Bottom);


Below is my implementation

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;

namespace Social.Mobile.Views

public partial class MainPage : TabbedPage

public MainPage()

InitializeComponent();
On<Android>().SetToolbarPlacement(value: ToolbarPlacement.Bottom);





XAML
<TabbedPage android:TabbedPage.ToolbarPlacement="Bottom" ...

<TabbedPage android:TabbedPage.ToolbarPlacement="Bottom" ...

C#
On<Android>().SetToolbarPlacement(value: ToolbarPlacement.Bottom);
in the constructor.

On<Android>().SetToolbarPlacement(value: ToolbarPlacement.Bottom);

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.