How to remove the "more" in .NET MAUI Shell Tabs when you have more than 5 tabs?

Question

I am building my first .NET MAUI app (only for Android) and I am running into some problems customising the TabBar. Below is what I am trying to achieve, with the 6 label-free tabs that navigate to various pages. However, the Shell TabBar only allows you to display 5 tabs before adding the "more" tab, which is what I'm trying to get rid of.

I have tried using a 3rd party TabBar like Syncfusion's Tab View, but found the extra rendering on my page's XAML file slows down the app navigation a lot, so I am really trying to get the MAUI Shell TabBar to work.

I am currently using a custom renderer (see below) for the Android platform to remove the tab labels, is there some way I can also force it to display all 6 tabs in the same custom renderer or perhaps using a handler?

namespace TaskFlow.Platforms.Android {     
	public class CustomShellRenderer : ShellRenderer     
	{         
		public CustomShellRenderer(Context context) : base(context)        
		{        
	 	}         
	
		protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)        
		{             
			return new CustomBottomNavView();        
		 }     
	}     

	public class CustomBottomNavView : IShellBottomNavViewAppearanceTracker     
	{         
		public void Dispose()        
		{        
		}         

		public void ResetAppearance(BottomNavigationView bottomView)         
		{                      
		}         
	
	 	public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)        	
		{             
			bottomView.ItemIconTintList = null;             			
			bottomView.SetBackgroundColor(Color.ParseColor("#341C4F"));             
			bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;              
			
			int[][] states = new int[][]            
	 		{                     
				new int[] {-1},            
			};              
			int[] colors = new int[]             
			{               
				Color.White,             
			};            
			ColorStateList colorStateList = new ColorStateList(states, colors);             
			bottomView.ItemIconTintList = colorStateList;          
		}
	} 
}

Answer 1

Hello,

is there some way I can also force it to display all 6 tabs in the same custom renderer or perhaps using a handler?

No, CreateMoreBottomSheet is an internal method. we cannot get this method and custom it.

By the way, BottomNavigationView does not support more than 5 menu items from google material design for native android.

Best Regards,

Leon Lu

---

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.