BottomTabbedPage — Bottom Navigation for Xamarin Forms on Android

Problem

By default, Xamarin.Forms on Android only supports TabbedPage where tabs are placed at the top of the page. Naxam is asked to show tabs at the bottom of the page with several customization options which couldn’t be made easily (if not say impossible) to existing BottomBarPage control from BottomNavigationBarXF library.

Solution

After investigation, Naxam decided to create BottomTabbedPage and BottomTabbedRenderer to leverage BottomNavigationView for bottom nativation.

You might already know that Google finally defines a detail guideline how to use bottom navigation appropriate and effectively inside their Material Design. Google also delivered a new widget, BottomNavigationView in its Design Support Library v25+, which you could learn how to you that new widget from this post.

Solution Finding

Inspired by and based on BottomNavigationBarXF and BottomNavigationBar libraries, Naxam managed to create our own BottomTabbedPage and BottomTabbedRenderer with BottomNavigationView widget in place of BottomBar control.

However, BottomNavigationView is very limited from customization, so we had to incorporate another library, BottomNavigationViewEx, which uses reflection to allow a lot of extra customization options to Google original widget. Finally, we created a very new BottomTabbedPage control with the power of customization options.

Solution Usage

Naxam BottomTabbedPage control is delivered as a NUGET package that you could easily install

Install-Page Naxam.BottomTabbedPage

You could use BottomTabbedPage in place of TabbedPage as normally without any additional modifications

BottomTabbedPage supports all features that BottomNavigationViewEx can, below are some highlights:

• Allow maximum of 5 tabs
• Allow to define menu item spacing, menu item postion
• Allow to define how menu item icon is loaded

UPDATE: By the latest version of Xamarin, we have to instantiate an instance of Mac

Wraps up

That’s it. We hope that BottomTabbedPage will help you to build more beautiful Android application following Material Design with control from Google.
The source code and sample demo could be found on Github.

NAXAM is a mobile development agency from Hanoi, Vietnam. Reach us out if you need any consultation or development requests.

NAXAM - A Mobile Development Company