FontFamily on Shell -> TabBar -> Tab -> Title - xamarin.forms

Question

Is there a way to set this a font family? I'm unable to find how to do it. In what way I can implement this?

Answer 1

as i didn't find the direct property to set,here i use Custom Renderen to achive it (for Android):
create a AndroidShell.cs in Droid project:
[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);
}
}
}
create MyBottomNavigationView.cs :
internal class MyBottomNavigationView: IShellBottomNavViewAppearanceTracker
{
private AndroidShell androidShell;
public MyBottomNavigationView(AndroidShell 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, "HYXuJingXingKaiW.ttf");
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)
{
}
}
create CustomTypefaceSpan.cs:
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);
}
}
and HYXuJingXingKaiW.ttf is put inside Resources/Assets with BuildAction：AndroidAsset
in ios,you could try add this in AppDelegate.cs :
UITabBarItem.Appearance.SetTitleTextAttributes(new UITextAttributes() {Font=UIFont.FromName("HYXuJingXingKaiW.ttf",14), },UIControlState.Normal);
UITabBarItem.Appearance.SetTitleTextAttributes(new UITextAttributes() { Font = UIFont.FromName("HYXuJingXingKaiW.ttf", 14), }, UIControlState.Selected);
HYXuJingXingKaiW.ttf is put inside Resources

Answer 2

Leo Zhu's Answer is correct but didn't work for me until i put the ResetAppearance(bottomView) in SetAppearance Method. And i put this : if (title == null) { continue; } in ResetAppearance method.
At first, in your Android Folder, you need to add internal static MainActivity Instance { get; private set; } to MainActivity Class in MainActivity.cs and Initialize it by Instance = this; in OnCreate method in the same class.
public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
{
ResetAppearance(bottomView);
}
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;
if (title == null) { continue; }
Typeface typeface = Typeface.CreateFromAsset(MainActivity.Instance.Assets, "HYXuJingXingKaiW.ttf");
SpannableStringBuilder sb = new SpannableStringBuilder(title);
sb.SetSpan(new CustomTypefaceSpan("",typeface), 0, sb.Length(), SpanTypes.InclusiveInclusive);
menuItem.SetTitle(sb);
}
}