How do I get a transparent Shell navigation bar on Android using MAUI 10?

I am trying to make my app fully edge to edge, while using MAUI 10 and a having a visible Shell.NavBar. On IOS, the application renders like this:

enter image description here

Note that the Shell navigation bar is displayed, but it transparent as intended, and content fills the screen to the top.

The same code, on Android, renders like this:

enter image description here

If I set Shell.NavBarIsVisible="False" then the page will render like this in Android:

enter image description here

This is closer, but the NavBar isn't visible.

I have the following set in my ContentPage. I have also set SafeAreaEdges="None" in the views on the page as instructed on the Microsoft documentation.

Shell.BackgroundColor="Transparent"
SafeAreaEdges="None"
Shell.NavBarIsVisible="False"

and in my styles.xml page, I also had to change the background to transparent here:

<Style TargetType="Shell" ApplyToDerivedTypes="True">
        <Setter Property="Shell.BackgroundColor" Value="Transparent" />

I have the same problem with a new MAUI demo project.

I am using Microsoft.Maui.Controls 10.0.51 and Microsoft.Maui.Controls.Compatibility 10.0.51, .NET10, and running on an Android emulator (Pixel 9a API36), and am targeting API version 36 in AndroidManifest.xml.

I have tried various AI-generated suggestions, none of which have worked. Have I missed anything?

0
Mar 28 at 10:24 PM
User AvatarChris K
#android#maui
No answer found for this question yet.