Simple Bottom Navigation

Please Go through the documentation

Step1: 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:NavigationBarBottom"
	x:Class="NavigationBarBottom.MainPage">
	<Grid >
	<Grid.RowDefinitions>
	<RowDefinition Height="*" />
	<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>
	<!-- PANEL 1 -->
	<ContentView
	Grid.Row="0"
	IsVisible="True" BackgroundColor="White" x:Name="MainView">
	</ContentView>
	<Grid ColumnSpacing="0" RowSpacing="0" Grid.Row="1">
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<StackLayout Orientation="Vertical" HorizontalOptions="Center" Padding="20" Margin="-20,-10,-20,-17" Grid.Column="0">
	<StackLayout.GestureRecognizers>
	<TapGestureRecognizer Tapped="ClickTap1" NumberOfTapsRequired="1" />
	</StackLayout.GestureRecognizers>
	<Image x:Name="tab_home_icon_selected" IsVisible="True" Source="ic_home_selected" HeightRequest="22" WidthRequest="22" Margin="0,0,0,-2" />
	<Label Margin="0" x:Name="tab_home" Text="HOME" FontSize="Micro"/>
	</StackLayout>
	<StackLayout Orientation="Vertical" HorizontalOptions="Center" Padding="20" Margin="-20,-10,-20,-17" Grid.Column="1">
	<StackLayout.GestureRecognizers>
	<TapGestureRecognizer Tapped="ClickTap2" NumberOfTapsRequired="1" />
	</StackLayout.GestureRecognizers>
	<Image x:Name="tab_scan_icon_unselected" Source="ic_scan_unselected" HeightRequest="22" WidthRequest="22" Margin="0,0,0,-2" />
	<Label Text="SCAN" x:Name="tab_scan" FontSize="Micro" />
	</StackLayout>
	<StackLayout Orientation="Vertical" HorizontalOptions="Center" Padding="20" Margin="-20,-10,-20,-17" Grid.Column="2">
	<StackLayout.GestureRecognizers>
	<TapGestureRecognizer Tapped="ClickTap3" NumberOfTapsRequired="1" />
	</StackLayout.GestureRecognizers>
	<Image x:Name="tab_search_icon_unselected" Source="ic_search_unselected" HeightRequest="22" WidthRequest="22" Margin="0,0,0,-2" />
	<Label Text="SEARCH" x:Name="tab_search" FontSize="Micro"/>
	</StackLayout>
	<StackLayout Orientation="Vertical" HorizontalOptions="Center" Padding="20" Margin="-20,-10,-20,-17" Grid.Column="3">
	<StackLayout.GestureRecognizers>
	<TapGestureRecognizer Tapped="ClickTap4" NumberOfTapsRequired="1" />
	</StackLayout.GestureRecognizers>
	<Image x:Name="tab_music_icon_unselected" Source="ic_music_unselected" HeightRequest="22" WidthRequest="22" Margin="0,0,0,-2" />
	<Label Text="MY MUSIC" x:Name="tab_music" FontSize="Micro"/>
	</StackLayout>
	</Grid>
	</Grid>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

Step2: MainPage.xaml.cs

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	using Xamarin.Forms;
	namespace NavigationBarBottom
	{
	public partial class MainPage : ContentPage
	{
	public void ClickTap1(object sender, EventArgs e)
	{
	var page = new Page1();
	MainView.Content = page.Content;
	}
	public void ClickTap2(object sender, EventArgs e)
	{
	var page = new Page2();
	MainView.Content = page.Content;
	}
	public void ClickTap3(object sender, EventArgs e)
	{
	var page = new Page3();
	MainView.Content = page.Content;
	}
	public void ClickTap4(object sender, EventArgs e)
	{
	var page = new Page4();
	MainView.Content = page.Content;
	MainView.ControlTemplate = page.ControlTemplate;
	}
	public MainPage()
	{
	InitializeComponent();
	}
	}
	}

view raw MainPage.xaml.cs hosted with ❤ by GitHub