How can I use Font Icons in Shell application FlyOut AND bottom tab

Question

HI, I'm trying to get my grips on how to use font icons and get them to display both in the flyout menu and in the bottom tab menu using a shell application.

I've managed to get the Font Awesome fonts into my solution and it works as expected in the flyout menu - but I cant figure out how to use them for the tab items as ShellContent doesn't have any FontFamily property.

How can this be achieved?

the code below gives me three items in the Flyout menu with the second one "Diary two" having a font icon (set using FontImageSource) - and the other two users png icons.

    <FlyoutItem Title="Diary One"
                Icon="icon_feed">

        <ShellContent Title="Diary"
                          Icon="icon_feed"
                          ContentTemplate="{DataTemplate local:Diary}" />
        <ShellContent Title="About"
                          Icon="icon_about"
                           ContentTemplate="{DataTemplate local:About}" />

    </FlyoutItem>
    <FlyoutItem Title="Diary two">
        <FlyoutItem.Icon>
            <FontImageSource FontFamily="FAS"
                             Color="{StaticResource Primary}"
                             Glyph="{x:Static fontAwesome:FontAwesomeIcons.Splotch}"/>

        </FlyoutItem.Icon>

        <ShellContent Title="About"
                          Icon="icon_about"
                           ContentTemplate="{DataTemplate local:About}" />
        <ShellContent Title="Diary"
                          Icon="icon_feed"
                          ContentTemplate="{DataTemplate local:Diary}" />

    </FlyoutItem>
    <ShellContent Title="Splash"
                  Icon="icon_feed"
                  ContentTemplate="{DataTemplate local:Splash}" />

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

but I cant figure out how to use them for the tab items as ShellContent doesn't have any FontFamily property.

For this, you can use Custom Renderers to achieve this function.

In android:

1.First place ttf or otf file in Resources/Assets folder and set BuildAction to AndroidAsset.
2.create a static variable in MainActivity and assign the value in OnCreate method.

    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity  
{  

    public static MainActivity Instance; // add variable Instance  

    protected override void OnCreate(Bundle savedInstanceState)  
    {  
        TabLayoutResource = Resource.Layout.Tabbar;  
        ToolbarResource = Resource.Layout.Toolbar;  

        base.OnCreate(savedInstanceState);  

        // init here  
        MainActivity.Instance = this;  

        global::Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");  
        Xamarin.Essentials.Platform.Init(this, savedInstanceState);  
        global::Xamarin.Forms.Forms.Init(this, savedInstanceState);  
        LoadApplication(new App());  
    }  

}  

3.create custom renderer as follows:

[assembly: ExportRenderer(typeof(ShellTest.AppShell), typeof(AndroidShell))]  
namespace ShellTest.Droid  
{  
  class AndroidShell : ShellRenderer  
   {   
      public AndroidShell(Context context) : base(context)  
       {  
       }  

      protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)  
      {  
        return new MyBottomNavigationView(this);  
      }  
   }  
}  

class MyBottomNavigationView.cs

public class MyBottomNavigationView: IShellBottomNavViewAppearanceTracker  
    {  

        private ShellCustomRenderer androidShell;  

        public MyBottomNavigationView(ShellCustomRenderer androidShell)  
        {  
            this.androidShell = androidShell;  
        }  

        public void Dispose()  
        {  
        }  

        public void ResetAppearance(BottomNavigationView bottomView)  
        {  
            IMenu menu = bottomView.Menu;  
            for (int i = 0; i < bottomView.Menu.Size(); i++)  
            {  
                IMenuItem menuItem = menu.GetItem(i);  
                var title = menuItem.TitleFormatted;  
                Typeface typeface = Typeface.CreateFromAsset(MainActivity.Instance.Assets, "blackjack.otf");  
                SpannableStringBuilder sb = new SpannableStringBuilder(title);  

                sb.SetSpan(new CustomTypefaceSpan("", typeface), 0, sb.Length(), SpanTypes.InclusiveInclusive);  
                menuItem.SetTitle(sb);  
            }  
        }  

        public void SetAppearance(BottomNavigationView bottomView, ShellAppearance appearance)  
        {  

        }  
    }  

class CustomTypefaceSpan.cs

 public class CustomTypefaceSpan:TypefaceSpan  
{  
    private Typeface newType;  

    public CustomTypefaceSpan(String family, Typeface type) : base(family)  
    {  
        newType = type;  
    }  
    public override void UpdateDrawState(TextPaint ds)  
    {  
        applyCustomTypeFace(ds, newType);  

    }  
    public override void UpdateMeasureState(TextPaint paint)  
    {  
        applyCustomTypeFace(paint, newType);  
    }  
    private static void applyCustomTypeFace(Paint paint, Typeface tf)  
    {  
        TypefaceStyle oldStyle;  
        Typeface old = paint.Typeface;  
        if (old == null)  
        {  
            oldStyle = 0;  
        }  
        else  
        {  
            oldStyle = old.Style;  
        }  

        TypefaceStyle fake = oldStyle & ~tf.Style;  
        if ((fake & TypefaceStyle.Bold) != 0)  
        {  
            paint.FakeBoldText = true;  
        }  

        if ((fake & TypefaceStyle.Italic) != 0)  
        {  
            paint.TextSkewX = -0.25f;  
        }  

        paint.SetTypeface(tf);  
    }  
}  

In IOS:

Place ttf inside Resources folder ,and add key-value in info.plist .

<key>UIAppFonts</key>  
<array>  
  <string>Pacifico.ttf</string>  
</array>  

add the following code in AppDelegate.cs, and ensure that you're using the real font name , it maybe different from the file name , get real name with this way

UITabBarItem.Appearance.SetTitleTextAttributes(new UITextAttributes() { Font = UIFont.FromName("Pacifico", 14), }, UIControlState.Normal);  
UITabBarItem.Appearance.SetTitleTextAttributes(new UITextAttributes() { Font = UIFont.FromName("Pacifico", 14), }, UIControlState.Selected);  

The result is:

Best Regards,

Jessie Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.

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.