MAUI: Handler and commands to change font family of Shell Bottom Tabbar?

Question

Hi,

which handler (and commands) do I have to use to change the font family of the Shell Bottom Tabbar?

Thank you!

David

Answer 1

Hello,

You could try ShellRender and reuse custom renderers in .NET MAUI.

For Android, adding MyCustomShellRender class in Platforms/Android folder.

public class MyCustomShellRender : ShellRenderer
    {
        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new MyBottomNavigationView();
        }
    }
   public class MyBottomNavigationView : IShellBottomNavViewAppearanceTracker
    {
        public MyBottomNavigationView()
        {
            
        }
        public void Dispose()
        {
            throw new NotImplementedException();
        }
       public void ResetAppearance(BottomNavigationView bottomView)
        {
          
        }
       public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement 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);
                sb.SetSpan(new TypefaceSpan("serif"), 0, sb.Length(), SpanTypes.InclusiveInclusive);//serif, you can set other fonts.
                menuItem.SetTitle(sb);
            }
        }
    }

For iOS, adding MyShellRenderer class in Platforms/iOS folder.

public class MyShellRenderer : ShellRenderer
    {
       protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
        {
            var renderer = new MyCustomShellTabBarAppearanceTracker();
            return renderer;
        }
    }
public class MyCustomShellTabBarAppearanceTracker: IShellTabBarAppearanceTracker
    {
        public MyCustomShellTabBarAppearanceTracker()
        {

       }

       public void Dispose()
        {
           
        }

       public void ResetAppearance(UITabBarController controller)
        {
        }

       public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
        {
            if (UIDevice.CurrentDevice.CheckSystemVersion(13,0))
            {
                UITabBarAppearance tabBarAppearance = (UITabBarAppearance)controller.TabBar.StandardAppearance.Copy();
                UITabBarItemAppearance itemAppearance = new UITabBarItemAppearance();
              var  Font = UIFont.FromName("Test", 20);
                itemAppearance.Normal.TitleTextAttributes = new UIStringAttributes {// Font = UIFont.SystemFontOfSize(20)
                 Font = UIFont.FromName("Arial Bold Italic", 16)//you can set other fonts.
                   
                };
                itemAppearance.Selected.TitleTextAttributes = new UIStringAttributes { .... };// selected style, you can set selected title color/font.
                tabBarAppearance.StackedLayoutAppearance = itemAppearance;
                controller.TabBar.StandardAppearance = tabBarAppearance;
            }  
        }

       public void UpdateLayout(UITabBarController controller)
        {
           
        }
    }

Register handler in the CreateMauiApp method in MauiProgram class.

.ConfigureMauiHandlers((handlers) =>
            {
#if IOS
                handlers.AddHandler(typeof(Shell), typeof(MyShellRenderer));
#endif
#if ANDROID
                handlers.AddHandler(typeof(Shell), typeof(MyCustomShellRender));
#endif
            });

Best Regards,

Wenyan Zhang

---

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.