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

Estilizando

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

  • BarItemColor
  • BarSelectedItemColor

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>

view raw
TabbedPage.xaml
hosted with ❤ by GitHub

Resultado

ezgif.com-video-to-gif

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s