Change TabbedPage Item FontSize on Android

Question

I use a TabbedPage with position bottom in my xamarin forms project.

On Android, the font size is too big.

I'm looking for a way to reduce the font size.

I'm also trying to remove the effect that makes the selected menu item bigger.

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            xmlns:views="clr-namespace:namespace.Views"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            xmlns:i18n="clr-namespace:namespace.Utils;assembly=namespace"
            Title="{Binding Title}"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.BarItemColor="#002244"
            android:TabbedPage.BarBackgroundColor="White"
            android:TabbedPage.BarSelectedItemColor="#096cd0"
            x:Class="namespace.Views.MainPage">
    <TabbedPage.Children>
        <NavigationPage x:Name="Home" Title="{i18n:Translate Menu_Home}" IconImageSource="accueil.png">
            <x:Arguments>
                <views:Home />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage x:Name="Services" Title="{i18n:Translate Menu_MyServices}" IconImageSource="services.png">
            <x:Arguments>
                <views:MyServices />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage x:Name="Documentation" Title="{i18n:Translate Menu_Documentation}" IconImageSource="documentation.png">
            <x:Arguments>
                <views:Documentation />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage x:Name="VideoCall" Title="{i18n:Translate Menu_Video}" IconImageSource="videoconferenc.png">
            <x:Arguments>
                <views:VideoCall />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>

Here is the result

• We're finding that the "videoconsultation" doesn't have enough room.

  

• It's even worse here

  

• The word "services" disappears when selected.

  

I've done a lot of research, but I've found a way to make it work.

When the menu is positioned at the top, I can change some settings in style.xml, but it doesn't seem to work when it's positioned at the bottom.

Do you have a solution?

Thank you very much,

Chris

Answer 1

You can follow this blog to change the FontSize of tabbedPage item on Android, write a custom renderer of TabbedPage and change the textSize there:

[assembly: ExportRenderer(typeof(ExtendedTabbedPage), typeof(ExtendedTabbedPageRenderer))]
namespace CustomTabbedPage.Droid
{
    public class ExtendedTabbedPageRenderer : TabbedPageRenderer
    {
        Xamarin.Forms.TabbedPage tabbedPage;
        BottomNavigationView bottomNavigationView;
        Android.Views.IMenuItem lastItemSelected;
        private bool firstTime = true;
        int lastItemId=-1;
        public ExtendedTabbedPageRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.TabbedPage> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                tabbedPage = e.NewElement as ExtendedTabbedPage;
                bottomNavigationView = (GetChildAt(0) as Android.Widget.RelativeLayout).GetChildAt(1) as BottomNavigationView;


                //Call to change the font
                ChangeFont();
            }
        }

        //Change Tab font
        void ChangeFont()
        {
            var fontFace = Typeface.CreateFromAsset(Context.Assets, "gilsansultrabold.ttf");
            var bottomNavMenuView = bottomNavigationView.GetChildAt(0) as BottomNavigationMenuView;

            for (int i = 0; i < bottomNavMenuView.ChildCount; i++)
            {
                var item = bottomNavMenuView.GetChildAt(i) as BottomNavigationItemView;
                var itemTitle = item.GetChildAt(1);

                var smallTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(0));
                var largeTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(1));

                lastItemId = bottomNavMenuView.SelectedItemId;

                //smallTextView.SetTypeface(fontFace, TypefaceStyle.Bold);
                //largeTextView.SetTypeface(fontFace, TypefaceStyle.Bold);

                smallTextView.TextSize = 18;
                largeTextView.TextSize = 18;

                //Set text color
                var textColor = (item.Id == bottomNavMenuView.SelectedItemId) ? tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarSelectedItemColor().ToAndroid() : tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarItemColor().ToAndroid();
                smallTextView.SetTextColor(textColor);
                largeTextView.SetTextColor(textColor);
            }
        }      
    }
}

Change the textSize of smallTextView and largeTextView will work. You can also download the sample project here.

Answer 2

To change the font size for bottom tabbed page see the below link ...it works for me .Instead of creating custom renderer just follow these steps.

1)Create new file "dimens.xml" in Android -> Resources/Values(only if it doesn't exits) 2)and then copy the code which is in the following link

link :

https://montemagno.com/control-text-size-on-android-bottom-navigation/