Change Font in ShellContent TabbedPages

[TrevoIT]

MAUI Android .NET 9

I have this definition of the Flyout in one of my Shells:

<FlyoutItem Title="Admin Panel"
             FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="{Binding Source='Dashboards'}"
                  ContentTemplate="{DataTemplate admin:AdministratorMainPage}"
                  Icon="{FontImageSource FontFamily='MaterialIcons',
                                         Glyph='&#xE871;',
                                         Size=24,
                                         Color={AppThemeBinding Light=Black,
                                                                Dark=White}}"
                  Route="main" />

    <ShellContent Title="{Binding Source='Harvest'}"
                  ContentTemplate="{DataTemplate admin:AdministratorPage}"
                  Icon="{FontImageSource FontFamily='MaterialIcons',
                                         Glyph='&#xE1A1;',
                                         Size=24,
                                         Color={AppThemeBinding Light=Black,
                                                                Dark=White}}"
                  Route="admin_harvests" />

    <ShellContent Title="{Binding Source='Pre-settlement'}"
                  ContentTemplate="{DataTemplate admin:SettlementPage}"
                  Icon="{FontImageSource FontFamily='MaterialIcons',
                                         Glyph='&#xF041;',
                                         Size=24,
                                         Color={AppThemeBinding Light=Black,
                                                                Dark=White}}"
                  Route="admin_settlements" />
 </FlyoutItem>

With this Style, the Font GEIB (is configurated correctly, I'm using it in all the app) is shown correctly in the Flyout menu.

         <Style Class="FlyoutItemLabelStyle"
                TargetType="Label">
            <Setter Property="VisualStateManager.VisualStateGroups">
               <VisualStateGroupList>
                  <VisualStateGroup x:Name="CommonStates">
                     <VisualState x:Name="Normal">
                        <VisualState.Setters>
                           <Setter Property="FontFamily" Value="GEIB" />
                        </VisualState.Setters>
                     </VisualState>
                  </VisualStateGroup>
               </VisualStateGroupList>
            </Setter>
         </Style>

But, as this definition also shows these pages as TabbedPages, I need to change the font of the Tabs, and is not happening.
Tried Handlers, Effects, Styles, and nothing.

This, changes the color perfectly:

         <Style TargetType="Shell" ApplyToDerivedTypes="True">
            <Setter Property="Shell.TitleColor" Value="HotPink" />
         </Style>

But there's no FontFamily attribute.
Is hard not be able to maintain the same aspect for all the App

[TrevoIT]

Solved:

In MauiProgram.cs:
handlers.AddHandler(typeof(Shell), typeof(Platforms.Android.MyShellRenderer));

Then, based on how to hide the text (commented), with a little work and help from Copilot, the Renderer:

using Android.Content;
using Android.Graphics;
using Android.Text;
using Android.Text.Style;
using Google.Android.Material.BottomNavigation;
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;

namespace HarBestApp.Platforms.Android
{
   public class MyShellRenderer(Context pContext) : ShellRenderer(pContext)
   {
      protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem oShellItem)
      {
         return new MyShellBottomNavViewAppearanceTracker();
      }
   }

   public class MyShellBottomNavViewAppearanceTracker : IShellBottomNavViewAppearanceTracker
   {
      public void Dispose()
      {
      }

      public void ResetAppearance(BottomNavigationView pBottomView)
      {
      }

      //public void SetAppearance(BottomNavigationView pBottomView, IShellAppearanceElement pAppearance)
      //{
      //   pBottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
      //}

      public void SetAppearance(BottomNavigationView pBottomNavigationView, IShellAppearanceElement pShellAppearanceElement)
      {
         // Iterate throug the elements of BottomNavigationView menú
         for (int iI = 0; iI < pBottomNavigationView.Menu.Size(); iI++)
         {
            var oMenuItem = pBottomNavigationView.Menu.GetItem(iI);

            // Create a SpannableString with the text of the menu
            string sMenuTitle = oMenuItem.TitleFormatted.ToString();
            SpannableString oSpannable = new SpannableString(sMenuTitle);

            // Apply Typeface personalized with a Span
            Typeface oCustomTypeface = Typeface.CreateFromAsset(pBottomNavigationView.Context.Assets, "CourierNew.ttf");
            oSpannable.SetSpan(new CustomTypefaceSpan(oCustomTypeface), 0, sMenuTitle.Length, SpanTypes.ExclusiveExclusive);

            // Stablish the texto modified as menu title
            oMenuItem.SetTitle(oSpannable);
         }
      }
   }

   public class CustomTypefaceSpan : TypefaceSpan
   {
      private readonly Typeface _Typeface;

      public CustomTypefaceSpan(Typeface pTypeface) : base("")
      {
         _Typeface = pTypeface;
      }

      public override void UpdateDrawState(TextPaint pPaint)
      {
         base.UpdateDrawState(pPaint);
         ApplyCustomTypeface(pPaint);
      }

      public override void UpdateMeasureState(TextPaint pPaint)
      {
         base.UpdateMeasureState(pPaint);
         ApplyCustomTypeface(pPaint);
      }

      private void ApplyCustomTypeface(TextPaint pPaint)
      {
         pPaint.SetTypeface(_Typeface);
      }
   }

}

This works perfectly.

[jfversluis]

Glad you figured it out, thanks for letting us know!