Change font size of tabs in a TabbedPage

Question

Is there anyway to changed the font size of the ContentPage? enter image description here

Example is that, the last Tab. SUMMARY is cut and I want to set the font size to small.

 <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
            xmlns:local="clr-namespace:Test.ViewModels" 
            xmlns:model="clr-namespace:Test.Models"
            
            Shell.TabBarBackgroundColor="Transparent"
            x:Class="Test.Views.MainPage">
    
    <ContentPage Title="Delivery">
        
    </ContentPage>
    <ContentPage Title="Pending">

    </ContentPage>
    <ContentPage Title="Success">

    </ContentPage>
    <ContentPage Title="Failed">

    </ContentPage>
    <ContentPage Title="Summary">

    </ContentPage>
</TabbedPage>

I tried adding this:

<NavigationPage.TitleView>
        <Label Text="This is my Title" FontSize="12" TextColor="White" />
    </NavigationPage.TitleView>

But doesn't do anything.

if you are asking about the size of the Font is the Tabs, then that has nothing to do with the ContentPage — Jason, Nov 22 '21 at 17:01
Oh I see, yes. I was asking about the size of the Font. Is there any alternative to that? Thanks! — ZachZoe, Nov 22 '21 at 17:20
AFAIK, There isn't a "cross platform" way to change the tab's font size. But you can do it by making changes on each platform. For example, [On Android change tab font size](https://stackoverflow.com/a/49716473/199364), which refers to [change tab style](https://stackoverflow.com/a/35555554/199364). — ToolmakerSteve, Nov 22 '21 at 20:39

score 0 · Answer 1 · answered Nov 23 '21 at 06:28

I was able to reproduce the tab title as the screenshot you privided. You could try the code below to set the TabMode, TabGravity in custom renderer.

 [assembly: ExportRenderer(typeof(TabbedPage), 
typeof(CustomTabbedPageRenderer))]
namespace App15.Droid
{
class CustomTabbedPageRenderer : TabbedPageRenderer
{
    private TabLayout tabLayout = null;
    public CustomTabbedPageRenderer(Context context) : base(context)
    {
    }
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.TabbedPage> e)
    {
        base.OnElementChanged(e);
        this.tabLayout = (TabLayout)this.GetChildAt(1);        
        tabLayout.TabMode = TabLayout.ModeScrollable;
        tabLayout.TabGravity = TabLayout.GravityFill;
    }
}
}

Normally, we could set the TextSize in tabbed page custom renderer. But sometimes we would miss the different types if TextView. So i think the way above would be better. You could also check the way to set the TextSize in custom renderer. Tabbed page custom renderer on Xamarin.Forms

When TabbedPage use android:TabbedPage.ToolbarPlacement="Bottom" to set the tabs in the bottom, the renderer above does not work. You could refer to teh solution in the link below. How to change Tabbar text size when using TabbedPage.ToolbarPlacement="Bottom" in Xamarin Android?

Change font size of tabs in a TabbedPage

1 Answers1