How to customize the size of the bar in a TabbedPage? [XAMARIN.FORMS]

Question

I have a Tabbed Page, I have it already accommodated, but I feel that it is very small and I need the lower bar to be higher

<?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="Mobile.View.Principal"
            xmlns:local="clr-namespace:Mobile.View"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            BackgroundColor="White"
            BarTextColor="{StaticResource Gris}"
            BarBackgroundColor="white">
    
    
    <local:Inicio Title="Inicio" Icon="home_icon.png" HeightRequest="30" WidthRequest="30"/>
    <local:Consultas Title="Consultas" Icon="search_icon.png"/>
    <local:Utilidades Title="Utilidades" Icon="settings_icon.png"/>
    <local:Perfil Title="Perfil" Icon="favorites_icon.png"/>
    
</TabbedPage>

and this is the code behind:

public partial class Principal : Xamarin.Forms.TabbedPage
{
    public Principal()
    {
        InitializeComponent();
        On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
        On<Xamarin.Forms.PlatformConfiguration.Android>().SetBarSelectedItemColor(Color.Black);
        On<Xamarin.Forms.PlatformConfiguration.Android>().SetBarItemColor(Color.LightGray);
        //On<Xamarin.Forms.PlatformConfiguration.Android>().DisableSwipePaging(); //Disable sliding the pages with your finger.
        NavigationPage.SetHasNavigationBar(this, false);  // Hide nav bar
    }

    async void OnPerfilAsync(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new Perfil());
    }
}

and that's how the app looks:

HOW IS THE NAME OF THE BAR HEIGHT PROPERTY?

I need some help!!!

Answer 1

On which platform do you want to change it? You will likely need to implement a custom renderer for each platform that you want to make this change.

For iOS, you can add a new general class file to the iOS project named MyTabbedPageRenderer . Then in the file, add this line above the namespace declaration:

[assembly: Xamarin.Forms.ExportRenderer(typeof(Xamarin.Forms.TabbedPage), typeof(YourNamespace.MyTabbedPageRenderer))]

where YourNamespace is the namespace that MyTabbedPageRenderer is in, ie the namespace just below where you have this attribute

Now make the class inherit from Xamarin.Forms.Platform.iOS.TabbedRenderer , eg:

public class MyTabbedPageRenderer : Xamarin.Forms.Platform.iOS.TabbedRenderer

Then add the following override method to the class:

public override void ViewWillLayoutSubviews()
    {
        base.ViewWillLayoutSubviews();
        var newHeight = TabBar.Frame.Height + 50;
        CoreGraphics.CGRect tabFrame = TabBar.Frame; //self.TabBar is IBOutlet of your TabBar
        tabFrame.Height = newHeight;
        tabFrame.Y = View.Frame.Size.Height - newHeight;
        TabBar.Frame = tabFrame;
    }

The above will increase the Tabbar height on iOS by 50 pixels from the default. Change the 50 to whatever value you like.

And for Android, you actually do not need to make a custom renderer since there is an Android layout that you can set a minHeight for the TabLayout. To do this, open the Tabbar.axml file in the resources/layout folder in your Android project. Then add an android:minHeight attribute to the android.support.design.widget.TabLayout element:

<android.support.design.widget.TabLayout 
    ...
    android:minHeight="300dp"
    />

This sets the height to a fixed 300 pixels. Set it to whatever you want.

Alternately you can set the height in the MainActivity.OnCreate method. The below is starting from a template Xam.Forms TabbedPage project. Put the following after the LoadApplication(new App()) call:

Android.Support.Design.Widget.TabLayout tabBar = FindViewById<Android.Support.Design.Widget.TabLayout>(Resource.Id.sliding_tabs);
tabBar.SetMinimumHeight(300);

Change the Resource.Id to whatever the android:id is for the TabLayout in the Tabbar.axml file