How to set Fontfamily of Title of each child of .net MAUI tabbedPage

Question

I have created tabbedPage in .Net MAUI and I am unable to update font for Title

of each children of tabbedPage ,event i have used handlers for it ,rest of the content

I am able to set font family.I have registered it also.

fonts.AddFont("Al Qalam Quran Majeed Web Regular.ttf", "AlQalam");

Will some one help in this regard.

<?xml version="1.0" encoding="utf-8" ?>

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"


         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

         x:Class="MauiAppTabs.MainPage">

<TabbedPage.ItemTemplate>

    <DataTemplate >

        <ContentPage Title="{Binding ArabicTile}" >

            <Label x:Name="lblArabic" Grid.Column="0" Padding="5" FontFamily="AlQalam" FontSize="25" LineHeight="1"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center"

    Text="{Binding Ayat_ArabicText}"  LineBreakMode="WordWrap" Margin="10" />

        </ContentPage>            

    </DataTemplate>

</TabbedPage.ItemTemplate>
</TabbedPage>

The undesired output is as below

Answer 1

Hello,

You can do this by creating handler for tabbedpage, then set TypeFace for every tab.

Firstly, open your Platforms/Android/Resources folder, then create a folder called raw, then copy your font in it and make sure the font file's build action is AndroidResource.

By the way, I make the font file's name to lower case and delete other characters like _ or -

.

Then you can create MyTabbedViewHandler.cs in Platforms/Android/ folder. I access the TabLayout and get every tab by var child = view1?.GetChildAt(j);, then set tab text font by tv.Typeface = Microsoft.Maui.ApplicationModel.Platform.CurrentActivity.Resources.GetFont(Resource.Raw.alexbrushregular);

using Android.Widget;
using Google.Android.Material.Tabs;
using Microsoft.Maui.Handlers;
using System.Reflection;
 
namespace YourProject.Platforms.Android
{
    public class MyTabbedViewHandler : TabbedViewHandler
    {
        public override void SetVirtualView(IView view)
        {
            base.SetVirtualView(view);
 
           SetTabFont(view);
        }
 
        private bool SetTabFont(IView view)
        {
            try
            {
                FieldInfo tabbedPageManagerFieldInfo = typeof(TabbedPage).GetField("_tabbedPageManager", BindingFlags.NonPublic | BindingFlags.Instance);
                object tabbedPageManager = tabbedPageManagerFieldInfo?.GetValue(view);
 
                FieldInfo tabLayoutFieldInfo = tabbedPageManager?.GetType().GetField("_tabLayout", BindingFlags.NonPublic | BindingFlags.Instance);
                TabLayout tabLayout = tabLayoutFieldInfo?.GetValue(tabbedPageManager) as TabLayout;
 
                if (tabLayout != null)
                {
                    for (int i = 0; i < tabLayout.TabCount; i++)
                    {
                        TabLayout.Tab? tab = tabLayout.GetTabAt(i);
                        TabLayout.TabView? view1 = tab?.View;
 
                        for (int j = 0; j < (view1?.ChildCount ?? 0); j++)
                        {
                            var child = view1?.GetChildAt(j);
 
                            if (child is TextView tv)
                            {
                                tv.Typeface = Microsoft.Maui.ApplicationModel.Platform.CurrentActivity.Resources.GetFont(Resource.Raw.alexbrushregular);
                            }
                        }
                    }
 
                    return true;
                }
 
                return false;
            }
            catch
            {
                return false;
            }
        }
    }
}

In the end, you need to add this handler by builder in MauiProgram.cs.

         builder
                
                .ConfigureMauiHandlers(handlers => {
#if ANDROID
                    // Add a handler
                    handlers.AddHandler(typeof(TabbedPage), typeof(YourProject.Platforms.Android.MyTabbedViewHandler));
#endif
                });

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.