0

I'm building a .NET MAUI app and facing an issue on Android — the TabBar (Shell tabs) overlaps with the system navigation bar at the bottom of the screen.

Here’s what happens:

  • The tabs are partially hidden behind the Android navigation buttons.
  • It looks fine on iOS, but only happens on Android devices
    (especially with gesture navigation).

My setup:

  • .NET MAUI 9.0
  • Using Shell with TabBar and Tab pages.
  • No custom renderer — using default Shell behavior

Example:

<TabBar Title="Send">

    <Tab Title="Home">
        <Tab.Icon>
            <FontImageSource
                FontFamily="Ficons"
                Glyph="{DynamicResource IconHome1}"
                Size="20" />
        </Tab.Icon>
        <ShellContent
            Title="Home"
            ContentTemplate="{DataTemplate views:HomePage}"
            Route="HomePage" />
    </Tab>
    <Tab Title="Transactions">

        <Tab.Icon>
            <FontImageSource
                FontFamily="Ficons"
                Glyph="{DynamicResource IconChart1}"
                Size="20" />
        </Tab.Icon>
        <ShellContent
            Title="Transaction"
            ContentTemplate="{DataTemplate views:TransactionPage}"
            Route="TransactionPage" />
    </Tab>
    <Tab Title="Send">
        <Tab.Icon>
            <FontImageSource
                FontFamily="Ficons"
                Glyph="{DynamicResource IconSwap}"
                Size="20" />
        </Tab.Icon>

        <ShellContent
            Title="Send Money"
            ContentTemplate="{DataTemplate views:SendMoneyPage}"
            Route="SendMoneyPage" />
    </Tab>

    <Tab Title="Recipients">
        <Tab.Icon>
            <FontImageSource
                FontFamily="Ficons"
                Glyph="{DynamicResource IconGroups1}"
                Size="20" />
        </Tab.Icon>
        <ShellContent
            Title="Recipients"
            ContentTemplate="{DataTemplate views:RecipientPage}"
            Route="RecipientPage" />
    </Tab>
    <Tab Title="Profile">
        <Tab.Icon>
            <FontImageSource
                FontFamily="Ficons"
                Glyph="{DynamicResource IconUser21}"
                Size="14" />
        </Tab.Icon>
        <ShellContent
            Title="Profile"
            ContentTemplate="{DataTemplate views:ProfilePage}"
            Route="ProfilePage" />
    </Tab>

</TabBar>

What I tried:

  • Setting Shell.TabBarBackgroundColor and Shell.TabBarHeight.

  • Using padding in MainPage.

  • Applying WindowCompat.SetDecorFitsSystemWindows(window, false) in MainActivity.

  • Adjusting safe area manually in XAML:

But that feels like a hack.

Question:

How can I correctly handle TabBar overlapping with the Android navigation bar in .NET MAUI so it respects system insets automatically?

5
  • Could you update with an Image of the issue please? Also what Android API are you targeting Commented Oct 16 at 14:25
  • Is this what you are referring too, I had seen this post this morning and Gerald had commented on it- linkedin - GitHub Issue. I havent used TabBar so not had this issue Commented Oct 16 at 14:33
  • Target Android API: 35 (Android 14) Commented Oct 16 at 14:34
  • I have updated the above comment with the a Open GitHub issue which may be your issue too, if you can check it out- .NET 10 seems to fix this issue from my scan of it Commented Oct 16 at 14:36
  • @Lewie Your Github Solution is not Working. Commented Oct 23 at 8:16

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.