lunes, diciembre 5, 2022

Configurar Tabbed Page en el Bottom con Xamarin Forms en Android

Cuando utilizo Tabbed Page en aplicaciones Android uno de los aspectos que me molestaba era la ubicación de los controles. Tenerlos en la parte superior me incomodaba y me parece que consumen mucho espacio.

Xamarin Forms - Tabbed Page
Izquierda: iOS con el control en la parte inferior. Derecha: Android con el control en la parte superior.

Afortunadamente después de la versión 3.1 de Xamarin Forms esto cambió y ahora nos permiten asignar la ubicación que queramos.

Xamarin XAMARIN, configuración del Emulador de Android en Visual Studio - El Emulador de Android es una de las configuraciones que debemos realizar después de la…

Solución

Debemos agregar el siguiente código en el encabezado del TabbedPage

xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom"

El resultado sería

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
            xmlns:views="clr-namespace:Xamarin.BottomTabsOnAndroid" 
            x:Class="Xamarin.BottomTabsOnAndroid.MainPage"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom">

Resultado

Este simple código nos ubica los controles en la parte inferior de la pantalla. Con lo que el resultado sería similar a la siguiente imagen.

Xamarin Forms - Tabbed Page Bottom
Después del cambio en App en Android con el control en la parte inferior.

Descargar ejemplo: https://github.com/royrojas/Xamarin.BottomTabsOnAndroid

Ejemplo

En el ejemplo que estamos desarrollando agregamos 3 páginas a la aplicación para ser llamadas en cada Tab.

<?xml version="1.0" encoding="utf-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
            xmlns:views="clr-namespace:Xamarin.BottomTabsOnAndroid" 
            x:Class="Xamarin.BottomTabsOnAndroid.MainPage"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom">
    <TabbedPage.Children>
        <NavigationPage Title="Tab Page 01" Icon="icono01.png">
            <x:Arguments>
                <views:MyPage01 />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage Title="Tab Page 02">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="icono02.png" />
                    <On Platform="Android" Value="icono02.png" />
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:MyPage02 />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage Title="Tab Page 03">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="icono03.png" />
                    <On Platform="Android" Value="icono03.png" />
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:MyPage03 />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>

Descargar ejemplo: https://github.com/royrojas/Xamarin.BottomTabsOnAndroid

Documentos:
Tabbed Page manual oficial Microsoft
Insertar íconos en Tabbed Page

  • Bottom Navigation/Bottom Tabs on Android
  • Cómo agregar íconos a TabbedPage
  • Tabs en Android

Roy Rojashttp://www.dotnetcr.com
Con más de 20 años de experiencia en programación, experto en lenguajes .NET, VB, C#, ASP.NET, Xamarin, XCode, DBA en SQL Server. Creador de dotnetcr.com, sitio web para programadores en español. royrojas.com | dotnetcr.com | GitHub

Redes Sociales

2,736FansMe gusta
326SeguidoresSeguir

Popular esta semana

Flutter – Error: ADB exited with exit code 1

En este artículo vamos a explorar algunas posibles causas y solución al error en Flutter Error: ADB exited with exit code 1....
SQL Server - Merge

MERGE en SQL Server para Insert, Delete y Update con dos tablas

Ejemplo práctico usando MERGE para sincronizar dos tablas, Insert, Update y Delete en un solo query. Válido para SQL SERVER 2008 o superior.
SQL Server

DELETE con subconsulta o INNER JOIN

En el siguiente ejemplo se explica la forma en que se pueden eliminar registros en nuestras tablas en SQL Server con instrucciones...

Últimos artículos

Índices repetidos en SQL Server ¿Cómo encontrarlos?

Los índices en la base de datos SQL Server es una herramienta que nos ayuda a mejorar la respuesta de nuestras consultas,...
Flutter - Instagram Clone App

Instagram Clone App con Flutter

Marvin Stanley Valenzuela nos comparte un reto y genialidad a la vez, excelente práctica de la que podemos aprender mucho, diseñó en...

¿Cómo agregar una IP adicional en una VM Ubuntu en Azure?

Lo más común al momento de crear y configurar un nuevo servidor es que a este le asigne un solo IP, pero...
flutter one year

Después de un año con Flutter, esto es lo que aprendí

La historia comenzó cuando un día desperté pensando en tener un nuevo proyecto personal. Me dije a mí misma que hay muchas...