androidblazormaui

SafeArea not functioning on Android devices with notches (e.g., Pixel 7) in .NET MAUI Blazor app


I'm experiencing an issue in my .NET MAUI Blazor application where the SafeArea does not function as expected on Android devices with notches, such as the Pixel 7. This issue began after updating the project from .NET 8 to .NET 9.

Expected Behavior:

The application's content should automatically adjust to avoid overlapping with the device's notch or display cutout, ensuring all UI elements are fully visible and accessible.

Actual Behavior:

On Android devices with notches, the application's content extends into the notch area, causing UI elements to be obscured or inaccessible.

Is there any workaround for this issue?


Solution

  • This issue began after updating the project from .NET 8 to .NET 9.

    This is because the .NET 9 android target Android 15.0 defaultly.

    SafeArea does not function as expected on Android devices with notches, such as the Pixel 7.

    In my test, the status bar will cover the content of the app on all the Andorid 15.0 device. And this is the default behavior for the App that target Android 15.0 and higher version.

    For more details, please check the official document about User experience and system UI in Android 15.0.

    The easiest way to fix it is setting your app's target sdk version as 34. Just add the following code in the AndroidManifest.xml:

    <uses-sdk android:targetSdkVersion="34" />
    

    If you still want to target api 35, you can also use OnApplyWindowInsetsListener to set padding for app's content.

        public class MyListener : Java.Lang.Object, Android.Views.View.IOnApplyWindowInsetsListener
        {
            public WindowInsets OnApplyWindowInsets(Android.Views.View v, WindowInsets insets)
            {
                if (Build.VERSION.SdkInt >= BuildVersionCodes.VanillaIceCream)
                {
                    // get the height of the status bar
                    var top = insets.GetInsetsIgnoringVisibility(WindowInsets.Type.StatusBars()).Top;
                    v.SetPadding(0, top, 0, 0);
                }
                return insets;
            }
       
        }
    
            protected override void OnCreate(Bundle? savedInstanceState)
            {
                base.OnCreate(savedInstanceState);
                Window.DecorView.SetOnApplyWindowInsetsListener(new MyListener());
            }
    

    I also have checked the source code of the android styles:

            <!-- For .NET 9 we optout of edge to edge enforcement by default -->
            <item name="maui_edgetoedge_optout">true</item>
    

    But this didn't work correctly. You can custom your own style and set the windowOptOutEdgeToEdgeEnforcement to avoid the default android 15 behaviors.

    <style name="your costom style" parent="Theme.MaterialComponents.DayNight">
             <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
    

    And then set the style to the MainActivity.