Android Bottom Tabs – Xamarin.Forms

Olá, neste post irei demonstrar como criar bottom tabs em suas aplicações Android feitas com Xamarin.Forms.

A partir do Android Support Library 25, os Apps não estão mais limitados que suas Tabs fiquem na parte superior da interface.

Para utilizar este recurso é necessário a versão 3.1.0 do Xamarin.Forms.

Bottom Tabs

Em sua TabbedPage adicione o nomespace para android e defina TabbedPage.ToolbarPlacement como “Bottom”.

	<?xml version="1.0" encoding="utf-8" ?>
	<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	x:Class="BottomTabsDemo.Home"
	Title="Demo"
	BarBackgroundColor="#2196F3"
	BarTextColor="White"
	xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
	android:TabbedPage.ToolbarPlacement="Bottom">

	<ContentPage Title="Home" Icon="home.png"/>
	<ContentPage Title="RSS" Icon="rss.png"/>
	</TabbedPage>

view raw

TabbedPage.xaml

hosted with ❤ by GitHub

Para facilitar na estilização, foram fornecidas duas novas propriedades:

Veja como utiliza-las a seguir.

	<?xml version="1.0" encoding="utf-8" ?>
	<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	x:Class="BottomTabsDemo.Home"
	Title="Demo"
	BarBackgroundColor="#2196F3"
	BarTextColor="White"
	xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
	android:TabbedPage.ToolbarPlacement="Bottom"
	android:TabbedPage.BarItemColor="#66FFFFFF"
	android:TabbedPage.BarSelectedItemColor="White">

	<ContentPage Title="Home" Icon="home.png"/>
	<ContentPage Title="RSS" Icon="rss.png"/>
	</TabbedPage>