Search code examples
androidmaui-blazor

.NET MAUI Blazor: Android Status Bar Covers Top Portion of App

Right out of the box, the example "Hello, World!" code for .NET MAUI Blazor Hybrid (.NET 9.0) has a navigation menu that works when running on Windows. You can clearly see and click menu items and all is well.

It looks like this: Windows 10

enter image description here

However, when I attempt to run it on an Android emulator on Windows 10, this navigation menu at the top of the screen is behind the Android status bar. The Android status bar appears over the top part of my app like a watermark. I can see the app navigation menu at the top with a button that has 3 bars, but the Android Wi-fi, phone network, and battery life icons appear over it rendering the button unclickable.

It looks like this: Pixel 7 - Android API 35

enter image description here

I haven't tried it yet with an Android device connected to my dev computer via USB due to security at my company. I will get authorization soon, but I would like to also debug on an emulator. I haven't changed a single line of code yet.

Any ideas?

Solution

  • Android 35+ enforces apps extending "Edge to Edge" by default. You can disable this by default in MAUI apps.

    If you still want to manually make your app more compatible with edge to edge, you can disable this implicit opt out by overriding the default theme, changing the maui_edgetoedge_optout attribute to false and the theme yourself:

    <style name="MainThemeEdgeToEdge" parent="Maui.MainTheme.NoActionBar">
   <item name="maui_edgetoedge_optout">false</item>
</style>

    And then applying the theme by calling it before the base.OnCreate(..) in your activity subclass (in the OnCreate method override):

    protected override void OnCreate(Bundle? savedInstanceState)
{
    SetTheme(Resource.Style.MainThemeEdgeToEdge);

    base.OnCreate(savedInstanceState);
}