.NET MAUI Customize Tabs in TabBar

Question

I am using a TabBar with sub Tabs. But the problem here is, that the Icons will not be displayed in the Sub Tab Area. My icon for my TabBar item "Start" and "Settings" loads normally. But my icons for "User" and "About" are not.

What I am missing? And is it possible to center the Tab items horizontally?

Here is the example in my AppShell:

    <Shell
        x:Class="MyApp.AppShell"
        x:DataType="viewmodel:AppShellViewModel"
        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        Shell.FlyoutItemIsVisible="False"
        Shell.TabBarIsVisible="True"
        Title="My App">
    
        <TabBar>
            <ShellContent
                    Title="Start"
                    Icon="start.svg"
                    Route="Start">
            </ShellContent>
    
            <Tab Title="Settings" Icon="settings.svg">
                <ShellContent
                    Title="User"
                    Icon="user.svg"
                    Route="User">
                </ShellContent>
    
                <ShellContent
                    Title="About"
                    Icon="about.svg"
                    Route="About">
                </ShellContent>
            </Tab>
        </TabBar>
    </Shell>  

Answer 1

I've tested on both Windows and Android platforms and it seems that the icons for "User" and "About" are showing correctly on Windows but they are not being rendered on Android. This could be the platform difference when rendering Icons in the Sub Tab Area. See Bottom and top tabs.

For the second question:

And is it possible to center the Tab items horizontally?

Yes, it's possible.

You need create a ShellHandler: MyCustomShellHandler.cs and then set the tabLayout appearance like below:

public class MyCustomShellHandler : ShellRenderer
{
      public MyCustomShellHandler(Context context) : base(context)
      {
      }

      protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
      {
           return new MyTabLayoutAppearanceTracker(this);
      }
}

public class MyTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
{
        public MyTabLayoutAppearanceTracker(IShellContext shellContext) : base(shellContext)
        {
        }
        public override void SetAppearance(TabLayout tabLayout, ShellAppearance appearance)
        {
            base.SetAppearance(tabLayout, appearance);
            tabLayout.TabMode = TabLayout.ModeFixed;
            tabLayout.TabGravity = TabLayout.GravityFill;
        }
}