Post
Ask Question

Xamarin.Forms - Bottom NavigationBar

Introduction - Managing the page navigation experience

Xamarin.Forms provides a number of different page navigation experiences depending upon the Page type being used. Read More here.

Navigating between pages using tabs

The Xamarin.Forms TabbedPage consists of a list of tabs and a larger detail area with each tab loading content into the detail area. This article demonstrates how to use a TabbedPage to navigate through a collection of pages.

 
 
Prerequisites
  • Visual Studio 2017(Windows or Mac)
The steps given below are required to be followed in order to create a Bottom NavigationBar in Xamarin.Forms, using Visual Studio.

Setting up a Xamarin.Forms Project

Start by creating a new Xamarin.Forms project. You’ll learn more by going through the steps yourself. Choose the Xamarin.Forms App project type under Cross-platform/App in the "New Project" dialog.

 
 
Name your app, select “Use Portable Class Library” for shared code, and target both - Android and iOS.

 

You probably want your project and solution to use the same name as your app. Put it in your preferred folder for projects and click "Create".

 

You now have a basic Xamarin.Forms app. Click the Play button to try it out.

 

Add Icons

Go to Solution—>PCL—>Right click—>Add Files. After adding the images, set BuildAction EmbddedResource.

 

Setting up the User Interface.

Go to MainPage.Xaml and write the following code.

MainPage.Xaml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:XamarinForms_BottomNBar" x:Class="XamarinForms_BottomNBar.XamarinForms_BottomNBarPage">  
  3.     <AbsoluteLayout>  
  4.         <StackLayout BackgroundColor="Teal" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">  
  5.             <StackLayout Margin="0,200,0,0" HorizontalOptions="Center">  
  6.                 <Label Text="Xamarin.Forms" HorizontalTextAlignment="Center" TextColor="White"></Label>  
  7.                 <Label Text="Bottom NavigationBar" HorizontalTextAlignment="Center" TextColor="White"></Label> </StackLayout>  
  8.         </StackLayout>  
  9.         <StackLayout AbsoluteLayout.LayoutBounds=".20,1,1,.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White" HorizontalOptions="FillAndExpand" Orientation="Horizontal">  
  10.             <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckHome">  
  11.                 <Image Margin="0,10,0,10" x:Name="imgHome" Style="{StaticResource ButtonNavigationBarImageStyle}" />  
  12.                 <Label Text="Home" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>  
  13.             <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckAlarm">  
  14.                 <Image Margin="0,10,0,10" x:Name="imgAlarm" Style="{StaticResource ButtonNavigationBarImageStyle}" />  
  15.                 <Label Text="Alarm" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>  
  16.             <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckCamera">  
  17.                 <Image Margin="0,10,0,10" x:Name="imgCamera" Style="{StaticResource ButtonNavigationBarImageStyle}" />  
  18.                 <Label Text="Camera" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>  
  19.             <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckSettings">  
  20.                 <Image Margin="0,10,0,10" x:Name="imgSettings" Style="{StaticResource ButtonNavigationBarImageStyle}" />  
  21.                 <Label Text="Settings" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>  
  22.             <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckLogout">  
  23.                 <Image Margin="0,10,0,10" x:Name="imgLogout" Style="{StaticResource ButtonNavigationBarImageStyle}" />  
  24.                 <Label Text="Logout" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>  
  25.         </StackLayout>  
  26.     </AbsoluteLayout>  
  27. </ContentPage>  
 
 
In this step, write common design for Bottom NavigationBar.

App.Xaml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinForms_BottomNBar.App">  
  3.     <Application.Resources>  
  4.         <!-- Application resource dictionary -->  
  5.         <ResourceDictionary>  
  6.             <!--Button NavigationBar StackLayout Style-->  
  7.             <Style x:Key="ButtonNavigationBarStackLayoutStyle" TargetType="StackLayout">  
  8.                 <Setter Property="VerticalOptions" Value="FillAndExpand" /><Setter Property="HorizontalOptions" Value="FillAndExpand" />  
  9.             </Style>  
  10.             <!--Button NavigationBar Label Style-->  
  11.             <Style x:Key="ButtonNavigationBarLabelStyle" TargetType="Label">  
  12.                 <Setter Property="Margin" Value="0,-10,0,0" /><Setter Property="HorizontalTextAlignment" Value="Center" /><Setter Property="TextColor" Value="Black" />  
  13.             </Style>  
  14.             <!-- Bottom NavigationBar Image Style-->  
  15.             <Style x:Key="ButtonNavigationBarImageStyle" TargetType="Image">  
  16.                 <Setter Property="WidthRequest" Value="30" /><Setter Property="HeightRequest" Value="30" />  
  17.             </Style>  
  18.         </ResourceDictionary>  
  19.     </Application.Resources>  
  20. </Application>  
 
Now, set the icons for Bottom NavigationBar control.

MainPage.Xaml.cs.
  1. public XamarinForms_BottomNBarPage()   
  2. {  
  3.     InitializeComponent();  
  4.     imgHome.Source = ImageSource.FromResource("XamarinForms_BottomNBar.home.png");  
  5.     imgAlarm.Source = ImageSource.FromResource("XamarinForms_BottomNBar.alarm.png");  
  6.     imgCamera.Source = ImageSource.FromResource("XamarinForms_BottomNBar.camera.png");  
  7.     imgSettings.Source = ImageSource.FromResource("XamarinForms_BottomNBar.settings.png");  
  8.     imgLogout.Source = ImageSource.FromResource("XamarinForms_BottomNBar.logout.png");  
  9. }  
 
Adding a Tap Gesture Recognizer

The tap gesture is used for tap detection and is implemented with the TapGestureRecognizer class. In this step, write an action for NavigationBar Control using Tap Gesture Recognizer.

MainPage.Xaml.cs.
  1. using Xamarin.Forms;  
  2. namespace XamarinForms_BottomNBar {  
  3.     public partial class XamarinForms_BottomNBarPage: ContentPage {  
  4.         public XamarinForms_BottomNBarPage() {  
  5.             InitializeComponent();  
  6.             imgHome.Source = ImageSource.FromResource("XamarinForms_BottomNBar.home.png");  
  7.             imgAlarm.Source = ImageSource.FromResource("XamarinForms_BottomNBar.alarm.png");  
  8.             imgCamera.Source = ImageSource.FromResource("XamarinForms_BottomNBar.camera.png");  
  9.             imgSettings.Source = ImageSource.FromResource("XamarinForms_BottomNBar.settings.png");  
  10.             imgLogout.Source = ImageSource.FromResource("XamarinForms_BottomNBar.logout.png");  
  11.             //Tap Gesture Recognizer  
  12.             var homeTap = new TapGestureRecognizer();  
  13.             homeTap.Tapped += (sender, e) => {  
  14.                 DefaultBackground();  
  15.                 stckHome.BackgroundColor = Color.Fuchsia;  
  16.             };  
  17.             stckHome.GestureRecognizers.Add(homeTap);  
  18.             var alarmTap = new TapGestureRecognizer();  
  19.             alarmTap.Tapped += (sender, e) => {  
  20.                 DefaultBackground();  
  21.                 stckAlarm.BackgroundColor = Color.Fuchsia;  
  22.             };  
  23.             stckAlarm.GestureRecognizers.Add(alarmTap);  
  24.             var cameraTap = new TapGestureRecognizer();  
  25.             cameraTap.Tapped += (sender, e) => {  
  26.                 DefaultBackground();  
  27.                 stckCamera.BackgroundColor = Color.Fuchsia;  
  28.             };  
  29.             stckCamera.GestureRecognizers.Add(cameraTap);  
  30.             var settingsTap = new TapGestureRecognizer();  
  31.             settingsTap.Tapped += (sender, e) => {  
  32.                 DefaultBackground();  
  33.                 stckSettings.BackgroundColor = Color.Fuchsia;  
  34.             };  
  35.             stckSettings.GestureRecognizers.Add(settingsTap);  
  36.             var logoutTap = new TapGestureRecognizer();  
  37.             logoutTap.Tapped += (sender, e) => {  
  38.                 DefaultBackground();  
  39.                 stckLogout.BackgroundColor = Color.Fuchsia;  
  40.             };  
  41.             stckLogout.GestureRecognizers.Add(logoutTap);  
  42.         }  
  43.         public void DefaultBackground() {  
  44.             stckHome.BackgroundColor = Color.White;  
  45.             stckAlarm.BackgroundColor = Color.White;  
  46.             stckCamera.BackgroundColor = Color.White;  
  47.             stckSettings.BackgroundColor = Color.White;  
  48.             stckLogout.BackgroundColor = Color.White;  
  49.         }  
  50.     }  
  51. }   


In this step, set Default Background color to all "Tap Control".

MainPage.Xaml.cs.
  1. public void DefaultBackground()   
  2. {  
  3.     stckHome.BackgroundColor = Color.White;  
  4.     stckAlarm.BackgroundColor = Color.White;  
  5.     stckCamera.BackgroundColor = Color.White;  
  6.     stckSettings.BackgroundColor = Color.White;  
  7.     stckLogout.BackgroundColor = Color.White;  
  8. }  
Click the Play button to try it out.

 

I hope you have understood how to create a Bottom NavigationBar.

 
 


Summary

This was the process of creating a Bottom NavigationBar in Xamarin.Forms.


Similar Articles