Shell tab's title is too high

Question

I have a .Net MAUI app that uses shell TabBar:

<TabBar>  
        <Tab Title="Home" Icon="{StaticResource IconHome}">  
            <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />  
        </Tab>  
        <Tab Title="Coverage&#10;Calculator" Icon="{StaticResource IconCalculator}" >  
            <ShellContent ContentTemplate="{DataTemplate calculator:CoverageCalculatorPage}" />  
        </Tab>  
        <Tab Title="Distributor&#10;Locator" Icon="{StaticResource IconLocator}">  
            <ShellContent ContentTemplate="{DataTemplate locator:DistributorsLocatorPage}" />  
        </Tab>  
        <Tab Title="Scan&#10;QR Code" Icon="{StaticResource IconQrScanner}">  
            <ShellContent ContentTemplate="{DataTemplate qrScanner:QrScannerPage}" />  
        </Tab>          
    </TabBar>  

When the title has two lines, the second line doesn't fit the size of the TabBar, and thus is hidden. Only a part of the first line can be seen. I wonder if font can be changed, or the tab bar height increased? I have tested only on an Android phone and on an emulator so far.

Answer 1

Hello,

You need to use Custom Renderer to show the two-lines Label in the Tab.

Please refer to this documentation: Using Custom Renderers in .NET MAUI.

You could refer to the following code to get the details about how to implement it on Android and iOS:

On Android:

   public class MyShellRenderer : ShellRenderer  
   {  
       public MyShellRenderer(Context context) : base(context) { }  
       protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)  
       {  
     
           return new MyTabLayout();  
       }  
     
       public class MyTabLayout : Java.Lang.Object, IShellBottomNavViewAppearanceTracker  
       {  
           public void ResetAppearance(BottomNavigationView bottomView)  
           {  
               throw new NotImplementedException();  
           }  
     
           public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)  
           {  
               var bottomNavView = bottomView.GetChildAt(0) as BottomNavigationMenuView;  
               for (int i = 0; i < bottomNavView.ChildCount; i++)  
               {  
                   var item = bottomNavView.GetChildAt(i) as BottomNavigationItemView;  
                   var itemTitle = item.GetChildAt(1);  
                   var smallTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(0));  
                   var largeTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(1));  
                   smallTextView.SetLines(2);  
                   largeTextView.SetLines(2);  
               }  
           }  
     
       }  
   }  

On iOS:

   public class MyShellRenderer : ShellRenderer  
   {  
       protected override IShellItemRenderer CreateShellItemRenderer(ShellItem item)  
       {  
           var renderer = base.CreateShellItemRenderer(item);  
           if (renderer != null)  
           {  
               if (renderer is ShellItemRenderer shellItem)  
               {  
                   var items = shellItem.TabBar.Items;  
                   for (int i = 0; i < items.Length; i++)  
                   {  
                       if (items[i] == null) continue;  
                       else  
                       {  
                           UITabBarItem item_temp = items[i] as UITabBarItem;  
                           UIView view = item_temp.ValueForKey(new Foundation.NSString("view")) as UIView;  
                           UILabel label = view.Subviews[0] as UILabel;  
                           label.Lines = 2;  
                           label.LineBreakMode = UILineBreakMode.WordWrap;  
                       }  
                   }  
               }  
           }  
           return renderer;  
       }  
   }  

Then, you need to add the following code to builder in MauiProgram.cs:

   builder  
       .UseMauiCompatibility()  
       .ConfigureMauiHandlers((handlers) => {  
   #if ANDROID  
       handlers.AddHandler(typeof(Shell), typeof(ShellTitle.Platforms.Android.MyShellRenderer));  
   #endif  
   #if IOS  
       handlers.AddHandler(typeof(Shell), typeof(ShellTitle.Platforms.iOS.MyShellRenderer));  
   #endif  
   })  

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.