androidmaui.net-maui.shellmaui-android

TabBar in .NET MAUI shell app is behind on-screen bottom toolbar


I have a MAUI app targeting Android. Im using shell navigation together w/ a TabBar like this:

<Shell
    x:Class="MyApp.Mobile.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MyApp.Mobile"
    xmlns:views="clr-namespace:MyApp.Mobile.Views"
    Shell.FlyoutBehavior="Disabled"
    Shell.NavBarIsVisible="False" Shell.TabBarBackgroundColor="{StaticResource Secondary}" 
    Shell.TabBarUnselectedColor="{StaticResource Primary}" 
    Shell.TabBarTitleColor="Black" Shell.PresentationMode="Animated"
    Title="MyApp.Mobile">

    <TabBar Route="Landing">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
    </TabBar>
    <TabBar Route="Home">
        <Tab Title="Hem" Icon="house_solid.png">
            <ShellContent ContentTemplate="{DataTemplate views:DashboardPage}" />
        </Tab>
        <Tab Title="Undersökningar" Icon="heart_pulse_solid.png">
            <ShellContent ContentTemplate="{DataTemplate views:AssessmentStartPage}" />
        </Tab>
        <Tab Title="Verktyg" Icon="ruler_solid.png">
            <ShellContent ContentTemplate="{DataTemplate views:ToolsIndexPage}" />
        </Tab>
    </TabBar>

</Shell>

When I run the app in the emulator the TabBar is placed behind the bottom toolbar. Like this:

Screen dump

I have tried updating the MainActivity.cs file setting the layout as this:

public class MainActivity : MauiAppCompatActivity
{
    protected override void OnStart()
    {
        base.OnStart();

        Window.Attributes.LayoutInDisplayCutoutMode = LayoutInDisplayCutoutMode.Never;
        
    }

}

How can I update my app code so that the TabBar doesn't invade the toolbar area?

Cheers, Peter


Solution

  • My bad! I had erroneously set two WindowManagerFlags: LayoutInScreen + LayoutInsetDecor, which was wrong.