How to change Tabbar text size when using TabbedPage.ToolbarPlacement="Bottom" in Xamarin Android?

Question

I have the following code in Xamarin Forms:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
            xmlns:local="clr-namespace:XXX;assembly=XXX"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            BackgroundColor="{DynamicResource BarBackgroundColor}"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.BarItemColor="Gray"
            android:TabbedPage.BarSelectedItemColor="{DynamicResource BarSelectedItemColor}"
            android:TabbedPage.IsSwipePagingEnabled="False"
            x:Class="XXX.MainPage">
</TabbedPage>

I want to change the size of the Tabbar text in the Android side. I have tried creating my own style like below:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTabLayoutStyle" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">5sp</item>
    </style>
</resources>

And in my Tabbar.axml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    app:tabGravity="fill" 
    app:tabMode="fixed"
    app:tabTextAppearance="@style/MyTabLayoutStyle"/>

I have a feeling this is not working because I'm using TabbedPage.ToolbarPlacement="Bottom" and instead of using TabLayout, I am now utilizing the BottomNavigationView. Hence, the question above, how can I change the tabbar's text size when using TabbedPage.ToolbarPlacement="Bottom".

See answer here https://stackoverflow.com/questions/57194140/is-there-a-way-to-stop-longer-xamarin-shell-tab-titles-being-truncated/62656858#62656858 — Philip, Jun 30 '20 at 12:20

score 6 · Answer 1 · answered Nov 20 '19 at 21:02

I've spent the night trying to solve the same problem, and none of the solutions I've found worked (adding my own style and I really didn't want to create a custom renderer). Finally I came over this article from James Montemagno: https://montemagno.com/control-text-size-on-android-bottom-navigation/ which saved my night! I know this is an old post, but if someone else pops by it might come in handy.

Create a file dimens.xml (if it doesn't already exists in your project) in Resource/values in your Android project. Then add this to your file:

<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_bottom_navigation_text_size" tools:override="true">12sp</dimen>
    <dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>
</resources>

score 2 · Answer 2 · answered Oct 25 '18 at 09:55

In the past, if you don’t use ,

 xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.BarItemColor="#999999"
android:TabbedPage.BarSelectedItemColor="Black"
android:TabbedPage.ToolbarPlacement="Bottom"

you can take a look the following thread to change Text Size of TabbedPage bar. But if you use TabbedPage.ToolbarPlacement=”Bottom”, it doesn’t work. So you will need to take a look the TabbedPage source code. Xamarin.Forms: Change Icon & Text size in TabbedPage tabs

From TabbedPage source code in GitHub, we can see there are position to put Tab, one is Bottom, another is not, you want to put tab on bottom placement, so you can take a look this part of code. https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.Android/AppCompat/TabbedPageRenderer.cs

Adding two view on Relativelayout, the BottomNavigationview is the second.

Create CustomTabbedPageRenderers class:

 class CustomTabbedPageRenderers: TabbedPageRenderer
{

    public CustomTabbedPageRenderers(Context context) : base(context)
    {
    }
    private AWidget.RelativeLayout _relativeLayout = null;       
    protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
    {
        base.OnElementChanged(e);

        _relativeLayout = (AWidget.RelativeLayout)this.GetChildAt(0);           
        changeTabsFont();

    }
    private void changeTabsFont()
    {
        //Typeface font = Typeface.CreateFromAsset(Android.App.Application.Context.Assets, "fonts/" + Constants.FontStyle);
        BottomNavigationView bottomnavigationview = (BottomNavigationView)_relativeLayout.GetChildAt(1);
        int menucount = bottomnavigationview.Menu.Size();

        for(int j=0;j<menucount;j++)
        {
            IMenuItem tab = bottomnavigationview.Menu.GetItem(j);
            SpannableString spanString = new SpannableString(tab.TitleFormatted.ToString());
            int end = spanString.Length();
            spanString.SetSpan(new RelativeSizeSpan(1.5f), 0, end, SpanTypes.ExclusiveExclusive);
            tab.SetTitle(spanString);

        }

    }

}

You can use SpannableString.SetSpan (Object what, int start, int end, int flags) to change Text size, What indicates the format of the setting, which can be the foreground color, the background color, or the clickable text.

How to change Tabbar text size when using TabbedPage.ToolbarPlacement="Bottom" in Xamarin Android?

2 Answers2

Linked