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;
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.
Firstly, did you set ConfigureMauiHandlers for shell custom render in the MauiProgram.cs like following code
builder
.UseMauiApp<App>()
.ConfigureMauiHandlers(handlers => {
#if ANDROID
handlers.AddHandler(typeof(Shell), typeof(CustomShellRenderer));
#endif
If you change the color to red tabView.SetBackgroundColor(Android.Graphics.Color.Red);, will you get the correct background color?
Hi Leon
Thanks for your reply. Yes I have the handler code that you have specified in mauiprogram.cs file.
As I have mentioned, everything works, including the background colour, I am even adding a border around the textview which works perfectly as expected, even the font size specification works correctly. However applying the different font doesn't want to play nicely :(
I initially had issues with the font size so instead of using the existing textview of the tabview, I am creating a new one and adding it to the tabview.
Please advise if you have anything I can try.
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.
Thank you very much Leon. I have got this working.
I presume I have to apply something totally different for iOS.
Have a great day!.