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

Xamarin forms Lottie Animation [Tutorial 55]

Please watch the tutorial for full implementation.
Step1: Your MainPage.xaml will look Like this

	<?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:MyNewApp"
	xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
	x:Class="MyNewApp.MainPage">
	<ContentPage.Content>
	<StackLayout Padding="30">
	<Label Text="Name or Phone Number" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
	<Entry Keyboard="Numeric" Placeholder="Enter Authinticated Phone Number Or Name" PlaceholderColor="#CCC" FontSize="20" TextColor="#555" />
	<Label Text="Password" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
	<Entry Placeholder="Enter correct password" Keyboard="Default" IsPassword="True" FontSize="20" PlaceholderColor="#CCC" TextColor="#555" />
	<Button x:Name="BtnLogin" Text="Login" BorderColor="#CB9600" BackgroundColor="#F4B400" />
	<forms:AnimationView
	x:Name="AnimationView"
	Animation="loading.json"
	Loop="True"
	AutoPlay="True"
	VerticalOptions="FillAndExpand"
	HorizontalOptions="FillAndExpand"
	Scale="0.2"/>
	</StackLayout>
	</ContentPage.Content></ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

Step2: Your  MainPage.Xaml.cs will LookLike this

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	using Xamarin.Forms;
	namespace MyNewApp
	{
	public partial class MainPage : ContentPage
	{
	public MainPage()
	{
	InitializeComponent();
	this.AnimationView.IsVisible = false;
	this.BtnLogin.Clicked += BtnLogin_Clicked;
	}
	private void BtnLogin_Clicked(object sender, EventArgs e)
	{
	this.AnimationView.IsVisible = true;
	}
	}
	}

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

Step3: Android Implementation
AnimationViewRenderer.Init();
Step4: Ios Implementation
AnimationViewRenderer.Init();
Step5:HelpfulLinks
https://www.lottiefiles.com/