How do I delete the awkward empty space under icon in TabBar in .NET MAUI?

I'm using TabBar in AppShell to create a tab. Like the code below, it is very simple but the problem is that I just want to put the icon and the icon should automatically be vertically centered but instead, there is an awkward space under the icons.

<TabBar>
	<Tab Icon="home.svg">
		<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
	</Tab>
	<Tab Icon="plus.svg">
		<ShellContent ContentTemplate="{DataTemplate local:AddDareTextPage}" Route="AddDareTextPage"/>
	</Tab>
	<Tab Icon="profile.svg">
		<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
	</Tab>
</TabBar>

As you can see with the above picture the icons are not vertically centered and it upwards a little bit. I didn't know what caused this because in the code, there is nothing that sets the location of the icon but then I realized it was the space for the Title.

This is when I added <Tab Icon="home.svg" Title="MAIN"> in the code so there is a title under one icon. And as you can see in the image below, the unnecessary space is gone.

Is there a way to just put the icons and center them vertically? I don't want to put any Title in TabBar but I couldn't find a way to do this.

We can use the Using Custom Renderers in .NET MAUI to remove the extra space and get the icon vertically centered.

At the moment the title has a fix height so there is an empty space under the icon. We need use the Using Custom Renderers to set the bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled; to remove the extra space occupied by title and get the icon vertically centered.

Here are the detailed steps listed below:

1.Create a custom ShellRenderer class in the Platforms/Android/ directory of your application:

using Microsoft.Maui.Controls.Handlers.Compatibility; 
using Microsoft.Maui.Controls.Platform.Compatibility;

namespace MauiApp2;

class CustomShellHandler : ShellRenderer
{
    protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
    {
        return new Platforms.Android.CustomShellBottomNavViewAppearanceTracker(this, shellItem.CurrentItem);
    }

}

2. To customize BottomNavView create a new class CustomBottomNavViewAppearanceTracker in the same directory：

using Android.Graphics.Drawables; 
using Android.Views;
using Google.Android.Material.BottomNavigation;
using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Controls.Platform.Compatibility;
using Microsoft.Maui.Platform;

namespace MauiApp2.Platforms.Android
{

    class CustomShellBottomNavViewAppearanceTracker : ShellBottomNavViewAppearanceTracker
    {
        private readonly IShellContext shellContext;

        public CustomShellBottomNavViewAppearanceTracker(IShellContext shellContext, ShellItem shellItem) : base(shellContext, shellItem)
        {
            this.shellContext = shellContext;
        }

        public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            base.SetAppearance(bottomView, appearance);
         

            // the key is to set like below
            bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;


        }

    }

}

3. The final step is registering our handlers in MauiProgram.cs like below:

var builder = MauiApp.CreateBuilder(); 
builder
    .UseMauiApp<App>()
    .ConfigureMauiHandlers(handlers =>
{
#if ANDROID
            handlers.AddHandler(typeof(Shell), typeof(CustomShellHandler));
#endif
 })

Running output: