Bottom Android TabBar - Xamarin Forms
Something that I haven't always liked about Android is the top-side tab bars. You know, those that can take you from one page to another very easily without reaching your finger too far onto the screen or opening a side menu. I love bottom tab bars, iOS has always had them, and I use them a lot.
New in Xamarin Forms 3.1 was a straightforward way of moving the Android tab bar from its default top position to a bottom area, and in this post, I will demonstrate just that.
Defining the TabbedPage
Let's start by defining a TabbedPage. Hopefully, there is nothing new to how to do that, since we only have to create a Page (or use an existing one) and change de definition from both the C# and XAML files from a regular Page to a TabbedPage. Once that change is in place, we can define whatever amount of views we need inside the page.
The default result when running this on an Android device is this, an ugly top tab bar.
However, as I mentioned it is now quite straightforward to change this and make it a bottom tab bar. All we need is to set a specific ToolbarPlacement variable to "Bottom." The ToolbarPlacement variable may sound familiar to those of you who have worked with Android native development, and that is because that is precisely what this is, a variable of the native TabbedPage. So how do we access that variable? A Custom Renderer? Dependency Injection?
Setting the Toolbar Placement
Not necessary anymore, now we can expose that variable directly from XAML code so we can define it as we set the TabbedPage itself. Just add this couple of lines inside the definition of the TabbedPage, and that will be it.
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core" android:TabbedPage.ToolbarPlacement="Bottom"
So what is going on? We are just accessing a property that is accessible through the AndroidSpecific type available from the PlatformConfiguration namespace. As it happens, we can set a ton of platform-specific values through this namespace, including, as you can now attest, the ToolbarPlacement for the TabbedPage. And so, now the result is this:
Note that I also included in this example a couple of icons acquired from flaticon.com
More personalization
BTW, did you know that we can now, from this same XAML file, change the bar's background and text colors? Before we needed to go into each of the projects and add some platform-specific code. Here's how:
BarBackgroundColor="#D17B88" BarTextColor="White"
Now, in the case of Android, you may also need to consider changing the icon's color, since in this platform that works independently of the text color (unlike on iOS). Here the previous code comes in handy; now we need to use the same xmlns to access a couple of other properties:
android:TabbedPage.BarItemColor="#44FFFFFF" android:TabbedPage.BarSelectedItemColor="White"
The below image shows what would be the final result:
