Maui - changing the subtabbar item(textview) font doesn't work

Question

Hi,

I have implemented everything I wanted including putting borders around the text, changing the size of the font and changing color of the text but for some reason applying a different font doesn't seem to be working.

I am loading the following in MauiProgram.cs

.ConfigureFonts(fonts =>

{

fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");

fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

fonts.AddFont("GothicA1-Medium.ttf", "GothicA1Medium");

fonts.AddFont("GothicA1-SemiBold.ttf", "GothicA1Semibold");

fonts.AddFont("GothicA1-Regular.ttf", "GothicA1Regular");

fonts.AddFont("GothicA1-Thin.ttf", "GothicA1Thin");

fonts.AddFont("DancingScript-Regular.ttf", "DancingScriptRegular");

fonts.AddFont("fa-solid-900.ttf", "FAS");

})

And I am extending ShellTabLayoutAppearanceTracker,

public class CustomTabLayoutAppearance(IShellContext shellContext) : ShellTabLayoutAppearanceTracker(shellContext)

public override void SetAppearance(TabLayout tabLayout, ShellAppearance appearance) { base.SetAppearance(tabLayout, appearance);

// Accessing and customizing tab items
var fontFamily = Typeface.Create("GothicA1Regular", TypefaceStyle.Normal);
fontFamily = Typeface.Create("DancingScript", TypefaceStyle.Normal);



for (int i = 0; i < tabLayout.TabCount; i++)
{
    var tab = tabLayout.GetTabAt(i);
    var tabView = tab.View as LinearLayout;

    if (tabView is null)
        return;

    var textView = tabView?.GetChildAt(1) as TextView;
    tabView.SetBackgroundColor(Android.Graphics.Color.White);

    var customTextView = new TextView(tabLayout.Context);
    customTextView.Text = tab.Text;            
    customTextView.TransformationMethod = null;
    


    // Set your desired font size here
    if (tab.IsSelected)
    {
        customTextView.SetTextColor(Android.Graphics.Color.White); // Example: Change text color

        customTextView.SetBackgroundColor(Android.Graphics.Color.White);
        ApplyBackgroundAndBorderToTextView(customTextView, true);

        //customTextView.Visibility = Android.Views.ViewStates.Gone;

    }
    else
    {
        customTextView.SetTextColor(Android.Graphics.Color.Black);

        ApplyBackgroundAndBorderToTextView(customTextView, false);
    }
    customTextView.SetTypeface(fontFamily, TypefaceStyle.Normal);




    
    // Set font size
    customTextView.SetTextSize(Android.Util.ComplexUnitType.Sp, 15);
    customTextView.LetterSpacing = (float)0.01;

    tabView.RemoveAllViews();
    tabView.AddView(customTextView);

    customTextView.Invalidate();
}

}

all the custom methods within this override method works. I have tried both GoathicA1Regular and DancingScript that's why I have two lines at the start of the method.

Could you advise me how I can fix this?

Thank you very much in advance.

Answer 1

Hello,

Please create a font folder in the Platforms/Android/Resources folder.

Then copy your font files in font folder. Please change your font file's name with Lowercase characters and _ like alexbrush_regular.ttf, make sure this font's build action is AndroidResource

Then, you can set the font with textView.SetTypeface(Platform.CurrentActivity.Resources.GetFont(Resource.Font.alexbrush_regular),TypefaceStyle.Normal); in the custom renderer like following code.

public void SetAppearance(TabLayout tabLayout, ShellAppearance appearance)
  {
     
 
      for (int i = 0; i < tabLayout.TabCount; i++)
      {
          var tab = tabLayout.GetTabAt(i);
          var tabView = tab.View as LinearLayout;
 
          if (tabView is null)
              return;
 
          var textView = tabView?.GetChildAt(1) as TextView;
 
          textView.SetTypeface(Platform.CurrentActivity.Resources.GetFont(Resource.Font.alexbrush_regular),TypefaceStyle.Normal);
 
...
      }
  }

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.