.Net Maui Align Shell Tabs

Question

I have a.Net Maui project that is using Shell Tabs. The tabs at the bottom of the app align perfectly filling in all the space evenly. The tabs that are inserted on a content page are aligning to the left and not filling in all the space.

As you can see the tabs at the bottom are aligned the way I want filling in all available space. The tabs labeled 11/7, 11/8, 11/9 & 11/10 are aligning to the left. What I want is for them to align the same as the tabs at the bottom filling in all available space and being even width.

Here is the code block for the TabBar in the Shell.

 <TabBar>
    <Tab Title="Dashboard">
        <Tab.Icon>
            <FontImageSource FontFamily="FAS"
                                 Glyph="{x:Static fontAwesome:FontAwesomeIcons.House}"
                                 Color="Black"/>
        </Tab.Icon>
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
    </Tab>
    <Tab Title="Sessions" >
        <Tab.Icon>
            <FontImageSource FontFamily="FAS" 
                                 Glyph="{x:Static fontAwesome:FontAwesomeIcons.ChalkboardUser}"
                                 Color="Black"/>
        </Tab.Icon>
        <ShellContent Title="11/7" ContentTemplate="{DataTemplate local:SessionsDay1}" Route="SessionsDay1"/>
        <ShellContent Title="11/8" ContentTemplate="{DataTemplate local:SessionsDay2}" Route="SessionsDay2"/>
        <ShellContent Title="11/9" ContentTemplate="{DataTemplate local:SessionsDay3}" Route="SessionsDay3"/>
        <ShellContent Title="11/10" ContentTemplate="{DataTemplate local:SessionsDay4}" Route="SessionsDay4"/>
    </Tab>
    <Tab Title="Schedule">
        <Tab.Icon>
            <FontImageSource FontFamily="FAS" 
                                 Glyph="{x:Static fontAwesome:FontAwesomeIcons.CalendarDays}"
                                 Color="Black"/>
        </Tab.Icon>
        <ShellContent ContentTemplate="{DataTemplate local:Schedule}" Route="Schedule"/>
    </Tab>
    <Tab Title="Speakers" FlyoutItemIsVisible="False">
        <Tab.Icon>
            <FontImageSource FontFamily="FAS" 
                                 Glyph="{x:Static fontAwesome:FontAwesomeIcons.Users}"
                                 Color="Black"/>
        </Tab.Icon>
        <ShellContent ContentTemplate="{DataTemplate local:Speakers}" Route="Speakers"/>
    </Tab>
    <Tab Title="Menu">
        <Tab.Icon>
            <FontImageSource FontFamily="FAS" 
                                 Glyph="{x:Static fontAwesome:FontAwesomeIcons.Bars}"
                                 Color="Black"/>
        </Tab.Icon>
        <ShellContent ContentTemplate="{DataTemplate local:Menu}" Route="Menu"/>
    </Tab>
</TabBar>

Answer 1

To align the width of Maui Shell Tabs evenly, you can use the Using Custom Renderers in .NET MAUI to achieve it.

Below are the detailed steps:

1. Create the platform-specific implementation file CustomShellRenderer.cs under Platform/Android :

using AndroidApp = Android.App.Application;

namespace MauiAppShell.Platforms.Android
{
    public class CustomShellRenderer : ShellRenderer
    {
        /// <summary>
        /// CustomShellRenderer
        /// </summary>
        /// <param name="context"></param>
        public CustomShellRenderer(Context context) : base(context)
        {
            
        }

        protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
        {
            return new MyTabLayoutAppearanceTracker(this);
        }
    }
    /// <summary>  
    /// CustomShellItemRenderer  
    /// </summary>  
    public class MyTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
    {
        public MyTabLayoutAppearanceTracker(IShellContext shellContext) : base(shellContext)
        {
        }
        public override void SetAppearance(TabLayout tabLayout, ShellAppearance appearance)
        {
            base.SetAppearance(tabLayout, appearance);
            var displayWidth = (int)DeviceDisplay.MainDisplayInfo.Width;
            for (int i = 0; i < tabLayout.TabCount; i++)
            {
                TabLayout.Tab tab = tabLayout.GetTabAt(i);
                if (tab.CustomView == null)
                {
                    TextView textview = new TextView(AndroidApp.Context)
                    {
                        Text = tabLayout.GetTabAt(i).Text,
                        TextSize = 20,
                        Typeface = Typeface.DefaultBold,
                        Gravity = GravityFlags.Center
                    };
                    textview.SetWidth(displayWidth / 5);
                    tab.SetCustomView(textview);
                }
            }
        }
    }
}

3. Finally, register our handlers like below in the MauiProgram.cs :

    .ConfigureMauiHandlers(handlers => { 
#if ANDROID
         
    handlers.AddHandler(typeof(Shell),typeof(CustomShellRenderer));
#endif
})

Output: