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

<?xml version="1.0" encoding="utf-8"?>
<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">
<AbsoluteLayout>
<StackLayout BackgroundColor="Teal" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout Margin="0,200,0,0" HorizontalOptions="Center">
<Label Text="Xamarin.Forms" HorizontalTextAlignment="Center" TextColor="White"></Label>
<Label Text="Bottom NavigationBar" HorizontalTextAlignment="Center" TextColor="White"></Label> </StackLayout>
</StackLayout>
<StackLayout AbsoluteLayout.LayoutBounds=".20,1,1,.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White" HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckHome">
<Image Margin="0,10,0,10" x:Name="imgHome" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Home" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckAlarm">
<Image Margin="0,10,0,10" x:Name="imgAlarm" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Alarm" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckCamera">
<Image Margin="0,10,0,10" x:Name="imgCamera" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Camera" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckSettings">
<Image Margin="0,10,0,10" x:Name="imgSettings" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Settings" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckLogout">
<Image Margin="0,10,0,10" x:Name="imgLogout" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Logout" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>

In this step, write common design for Bottom NavigationBar.

App.Xaml

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinForms_BottomNBar.App">
<Application.Resources>
<ResourceDictionary>
<Style x:Key="ButtonNavigationBarStackLayoutStyle" TargetType="StackLayout">
<Setter Property="VerticalOptions" Value="FillAndExpand" /><Setter Property="HorizontalOptions" Value="FillAndExpand" />
</Style>
<Style x:Key="ButtonNavigationBarLabelStyle" TargetType="Label">
<Setter Property="Margin" Value="0,-10,0,0" /><Setter Property="HorizontalTextAlignment" Value="Center" /><Setter Property="TextColor" Value="Black" />
</Style>
<Style x:Key="ButtonNavigationBarImageStyle" TargetType="Image">
<Setter Property="WidthRequest" Value="30" /><Setter Property="HeightRequest" Value="30" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>

Now, set the icons for Bottom NavigationBar control.

MainPage.Xaml.cs.

public XamarinForms_BottomNBarPage()
{
InitializeComponent();
imgHome.Source = ImageSource.FromResource("XamarinForms_BottomNBar.home.png");
imgAlarm.Source = ImageSource.FromResource("XamarinForms_BottomNBar.alarm.png");
imgCamera.Source = ImageSource.FromResource("XamarinForms_BottomNBar.camera.png");
imgSettings.Source = ImageSource.FromResource("XamarinForms_BottomNBar.settings.png");
imgLogout.Source = ImageSource.FromResource("XamarinForms_BottomNBar.logout.png");
}

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.

using Xamarin.Forms;
namespace XamarinForms_BottomNBar {
public partial class XamarinForms_BottomNBarPage: ContentPage {
public XamarinForms_BottomNBarPage() {
InitializeComponent();
imgHome.Source = ImageSource.FromResource("XamarinForms_BottomNBar.home.png");
imgAlarm.Source = ImageSource.FromResource("XamarinForms_BottomNBar.alarm.png");
imgCamera.Source = ImageSource.FromResource("XamarinForms_BottomNBar.camera.png");
imgSettings.Source = ImageSource.FromResource("XamarinForms_BottomNBar.settings.png");
imgLogout.Source = ImageSource.FromResource("XamarinForms_BottomNBar.logout.png");
//Tap Gesture Recognizer
var homeTap = new TapGestureRecognizer();
homeTap.Tapped += (sender, e) => {
DefaultBackground();
stckHome.BackgroundColor = Color.Fuchsia;
};
stckHome.GestureRecognizers.Add(homeTap);
var alarmTap = new TapGestureRecognizer();
alarmTap.Tapped += (sender, e) => {
DefaultBackground();
stckAlarm.BackgroundColor = Color.Fuchsia;
};
stckAlarm.GestureRecognizers.Add(alarmTap);
var cameraTap = new TapGestureRecognizer();
cameraTap.Tapped += (sender, e) => {
DefaultBackground();
stckCamera.BackgroundColor = Color.Fuchsia;
};
stckCamera.GestureRecognizers.Add(cameraTap);
var settingsTap = new TapGestureRecognizer();
settingsTap.Tapped += (sender, e) => {
DefaultBackground();
stckSettings.BackgroundColor = Color.Fuchsia;
};
stckSettings.GestureRecognizers.Add(settingsTap);
var logoutTap = new TapGestureRecognizer();
logoutTap.Tapped += (sender, e) => {
DefaultBackground();
stckLogout.BackgroundColor = Color.Fuchsia;
};
stckLogout.GestureRecognizers.Add(logoutTap);
}
public void DefaultBackground() {
stckHome.BackgroundColor = Color.White;
stckAlarm.BackgroundColor = Color.White;
stckCamera.BackgroundColor = Color.White;
stckSettings.BackgroundColor = Color.White;
stckLogout.BackgroundColor = Color.White;
}
}
}

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

MainPage.Xaml.cs.

public void DefaultBackground()
{
stckHome.BackgroundColor = Color.White;
stckAlarm.BackgroundColor = Color.White;
stckCamera.BackgroundColor = Color.White;
stckSettings.BackgroundColor = Color.White;
stckLogout.BackgroundColor = Color.White;
}

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.

5 Comments

Join the conversation! Your thoughts help the community grow.

Arvind Chourasiya8y ago
Hi bro, How can i set "new page" on first tab at the time of loading and it should't hide the bottom tabs. When I Push new page inside OnTapped event, It is hiding bottom tabs. Thank you
- Arvind Chourasiya8y ago
  What I understood is, You are saying to make UI on the same page only using ContentView. But I will be having multiple pages at the top of tabs. So surely I need to go with Tabbed Page. :)
- Delpin Susai Raj8y ago
  Sorry bro, this control works single page only. I'm not sure, you should use ContentView instead of New Page.
Delpin Susai Raj8y ago
Arvind Chourasiya it will display at the bottom.
Arvind Chourasiya8y ago
@Susna nice artical. How it look when we execute it on android, tabs will be display at bottom or top side