Shell tab's title is too high

Question

I have a .Net MAUI app that uses shell 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.

Accepted Answer

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.

Share via

Shell tab's title is too high

0 additional answers

Your answer