question

ErikWettergren-5196 avatar image
0 Votes"
ErikWettergren-5196 asked JessieZhang-2116 edited

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

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}" />


dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered JessieZhang-2116 edited

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:

99423-image.png

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.



image.png (10.8 KiB)
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you Jessie! Much appreciated!

I'll surely look into this - but I must say I'm rather baffled by the complexity of doing even the simplest things in Xamarin sometimes :-D

0 Votes 0 ·

It's my pleasure to help you.

0 Votes 0 ·

absolutely - I haven't found time to deal with this yet though but your suggestion looks quite solid.

0 Votes 0 ·