Xamarin Forms Bottom Navigation Bar

3
votes

In my Xamarin forms application I need to add a bottom navigation bar in every pages. Bottom navigation bar should have 7 buttons and tapping on each buttons should navigate to corresponding pages. Is there any way to implement this in Xamarin forms?

2
xamarinxamarin.iosxamarin.androidxamarin.forms
Tabbed Page sounds similar to your desired functionality. But I think it still puts Android tabs are the top. You might need to implement your own custom page or use a custom renderer on Android to change the placement. Try something and come back with more specific problems. Best of luck. – dylansturg

2 Answers

0
votes

Yes I have implemented this using this plugin Bottom Bar Plugin it is a very useful plugin which renders tab bars at the bottom of the screen for android and IOS. Even though all the documentation you will need is available via the link I mention, the stackoverflow bots will swarm me unless I add that you can navigate to the site in question by searching google for

BottomNavigationBarXF

other than cutting and pasting their documentation for the benefit of this site (so that anyone referrring to this answer in the event of a thermo nuclear war, after which stackoverflow is the only surviving site, can still contextualise this answer), I would urge you to consult their documentation which is well put together.

0
votes

You can use Tab page itself. For iOS, by default tab pages button are at bottom. For Android, there is a way to move the tabs to bottom. You need to update Xamarin or Visual Studio. After updating, add the below page directives to the Tab page Xaml code.

xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:TabbedPage.ToolbarPlacement="Bottom"

For example:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"
        xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
        android:TabbedPage.ToolbarPlacement="Bottom"
        android:TabbedPage.BarItemColor="#a39d9f"
        android:TabbedPage.BarSelectedItemColor="#007aff"
        android:TabbedPage.IsSwipePagingEnabled="false"
        x:Class="TabbedPageWithNavigationPage.MainPage">
<local:TodayPage />
<NavigationPage Title="Schedule" Icon="schedule.png">
    <x:Arguments>
        <local:SchedulePage />
    </x:Arguments>
</NavigationPage>