Search code examples
c#xamarinxamarin.formsfonts

Change default font of the application Xamarin Forms


I need to change the default font of the application, to change the font for Tabs and NavigationBar.

enter image description here


Solution

  • To change the title font in the NavigationBar, read this doc, custom the Shell.TitleView in each contentPage:

    <Shell.TitleView>
        <Label Text="customTitle" FontSize="30"/>
    </Shell.TitleView>
    

    To change the tabbar title font, you need a custom renderer:

    [assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
    namespace App30.Droid
    {
        public class MyShellRenderer : ShellRenderer
        {
            public MyShellRenderer(Context context) : base(context)
            {
            }
    
            protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
            {
                return new CustomBottomNavAppearance();
            }
        }
    
        public class CustomBottomNavAppearance : IShellBottomNavViewAppearanceTracker
        {
            public void Dispose()
            {
    
            }
    
            public void ResetAppearance(BottomNavigationView bottomView)
            {
    
            }
    
            public void SetAppearance(BottomNavigationView bottomView, ShellAppearance appearance)
            {
    
                IMenu menu = bottomView.Menu;
                for (int i = 0; i < bottomView.Menu.Size(); i++)
                {
                    IMenuItem menuItem = menu.GetItem(i);
                    var title = menuItem.TitleFormatted;
                    SpannableStringBuilder sb = new SpannableStringBuilder(title);
    
                    int a = sb.Length();
                    
                    //here I set fontsize 20
                    sb.SetSpan(new AbsoluteSizeSpan(20,true), 0, a, SpanTypes.ExclusiveExclusive);
    
                    menuItem.SetTitle(sb);
                }
    
            }
        }
    }
    

    Here is the result:

    enter image description here

    A sample project has been uploaded here and you can check it.