Xamarin Forms 5.0 TabbedPage Tab Title Text Customization in AndroidX

Question

I am working on a Xamarin Forms App. Requirement is to make Title of the Tab Pages to Letter-Case + use custom font.

As you can see here tabbedpage-text-issue-in-android, I found some solutions in which styling changes are required in the file Resources/layout/Tabbar.xml to achieve the desired result.

But, Unfortunately Xamarin Forms 5.0 uses AndroidX and REMOVED Resources/layout directory from default creation. And also removed these 2 lines of code from Android Project's MainActivity.cs:

        TabLayoutResource = Resource.Layout.Tabbar; // Removed in AndroidX and Xamarin Forms Ver 5.0  
        ToolbarResource = Resource.Layout.Toolbar;  // Removed in AndroidX and Xamarin Forms Ver 5.0  

As you can see in Xamarin official documentation here forms5-migration

Now I am curious how to do custom styling on TabbedPage Title Text in updated XAMARIN FORMS version 5.0 with AndroidX? Any Idea?

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

You can use custom renderer to achieve it.

Firstly, create a new font folder and add the .tff file and a new xml file named myfont into it.

in myfont.xml :

<?xml version="1.0" encoding="utf-8" ?>  
<font-family xmlns:android="http://schemas.android.com/apk/res/android"  
          xmlns:app="http://schemas.android.com/apk/res-auto">  
   <font android:font="@font/a"  
      android:fontStyle="normal"  
      android:fontWeight="400"  
   />  
</font-family>  

then in your Resources/values/styles file add the custom style of the bottomnavigationview.

<style name="MyBottomNavigationView"  
        parent="Widget.Design.BottomNavigationView">  
   <item name="fontFamily">@font/myfont</item>  
</style>  

finally in your custom tabbedpage renderer:

   using Android.App;  
   using Android.Content;  
   using Android.Graphics;  
   using Android.OS;  
   using Android.Runtime;  
   using Android.Views;  
   using Android.Widget;  
   using AndroidX.AppCompat.Widget;  
   using Google.Android.Material.BottomNavigation;  
   using Google.Android.Material.Tabs;  
   using System;  
   using System.Collections.Generic;  
   using System.Linq;  
   using System.Text;  
   using TabbedPageForms5.Droid;  
   using Xamarin.Forms;  
   using Xamarin.Forms.Platform.Android;  
   using Xamarin.Forms.Platform.Android.AppCompat;  
     
   [assembly: ExportRenderer(typeof(TabbedPage), typeof(MytabbedPageREnderer))]  
   namespace TabbedPageForms5.Droid  
   {  
       public class MytabbedPageREnderer: TabbedPageRenderer  
       {  
           public MytabbedPageREnderer(Context context) : base(context)  
           {  
           }  
     
           protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)  
           {  
               base.OnElementChanged(e);  
               if (e.OldElement == null && e.NewElement != null)  
               {  
                   for (int i = 0; i <= this.ViewGroup.ChildCount - 1; i++)  
                   {  
                       var childView = this.ViewGroup.GetChildAt(i);  
                       if (childView is ViewGroup viewGroup)  
                       {  
                           for (int j = 0; j <= viewGroup.ChildCount - 1; j++)  
                           {  
                               var childRelativeLayoutView = viewGroup.GetChildAt(j);  
                               if (childRelativeLayoutView is BottomNavigationView)  
                               {  
                                   ((BottomNavigationView)childRelativeLayoutView).ItemTextAppearanceActive = Resource.Style.MyBottomNavigationView;  
                                   ((BottomNavigationView)childRelativeLayoutView).ItemTextAppearanceInactive = Resource.Style.MyBottomNavigationView;  
                               }  
                           }  
                       }  
                   }  
               }  
           }  
     
           
     
       }  
   }  

Here is running screenshot.

========================
Update============================

You posted a solution for BottomNavigationView. I am using default one i.e. on top. Kindly help out for that?

If so, you can use following custom renderer. And put your ttf font to the assets folder.

   [assembly: ExportRenderer(typeof(TabbedPage), typeof(MytabbedPageREnderer))]  
   namespace TabbedPageForms5.Droid  
   {  
       public class MytabbedPageREnderer: TabbedPageRenderer  
       {  
           public MytabbedPageREnderer(Context context) : base(context)  
           {  
           }  
     
           protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)  
           {  
               base.OnElementChanged(e);  
     
               if (e.NewElement == null || e.OldElement != null)  
                   return;  
     
               TabLayout tablayout = (TabLayout)ViewGroup.GetChildAt(1);  
               Android.Views.ViewGroup vgroup = (Android.Views.ViewGroup)tablayout.GetChildAt(0);  
               for (int i = 0; i < vgroup.ChildCount; i++)  
               {  
                   Android.Views.ViewGroup vvgroup = (Android.Views.ViewGroup)vgroup.GetChildAt(i);  
                   Typeface fontFace = Typeface.CreateFromAsset(this.Context.Assets, "b.ttf");  
                   for (int j = 0; j < vvgroup.ChildCount; j++)  
                   {  
                       Android.Views.View vView = (Android.Views.View)vvgroup.GetChildAt(j);  
                       if (vView.GetType() == typeof(AppCompatTextView) || vView.GetType() == typeof(TextView))  
                       {  
                             
                           TextView txtView = (TextView)vView;  
     
                           //disable the upper case  
                           txtView.SetAllCaps(false);  
     
                           //set font for textview  
                           txtView.SetTypeface(fontFace, TypefaceStyle.Normal);  
                       }  
                   }  
               }  
           }  
   }  
   }  

Best Regards,

Leon Lu

---

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.