[Android] EdgeToEdge does not work for Modal page

[tranb3r]

Description

When EdgeToEdge is enabled on Android, a Modal page is not filling the whole screen, it is starting below the system status bar. The system status bar is visible and the bottom of the Modal page is invisible.

On my example:

• the mainpage (pink background) is displayed edge-to-edge, while the modal page (blue background) is displayed below the system status bar.
• the text in the modal page does not seem to be vertically centered, because the modal page is not occupying the whole screen

This happens both with the EdgeToEdge extension and when manually setting edge-to-edge (see code in MainActivity).

Steps to Reproduce

1. Open the repro project and run on android
2. Click the button to open a modal page
3. Click on back button to close the modal page

Link to public reproduction project repository

https://github.com/tranb3r/Issues/tree/main/MauiAppEdgeToEdge

Version with bug

8.0.90 SR9

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 34

Did you find any workaround?

No

Relevant log output

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• Status bar transparency doesn't work for Modal Pages (#18033), similarity score: 0.77
• [Android] Modal shown TabbedPage has problems with SetSoftInputMode AdjustResize (#20358), similarity score: 0.75

Closed similar issues:

• [Android] Modal Pages do not fill screen when in Fullscreen (#10364), similarity score: 0.78
• Modal pages in Android overlaps Android status bar (#6214), similarity score: 0.77
• [Bug] [Android] Modal page shows behind android navigation bar after navigating to another modal page and rotating screen on tablet only (#20798), similarity score: 0.74

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[drasticactions]

I don't think EdgeToEdge is relevant for what you're trying to do here. That's not what the bug is. I think it's #18033

The top bar insets are still there, and the model view is going up to those insets. If you step through the ModelNavigationManager code here, you would hit those margins

https://github.com/dotnet/maui/blob/main/src/Controls/src/Core/Platform/ModalNavigationManager/ModalNavigationManager.Android.cs#L330-L343

There was a change for allowing it to go "Edge to Edge" with (#19903) but you need to enable "Immersive Mode" within your application (Like this code does), it will go "Edge to Edge"

But that's not solving the core issue of the top margin bar on the system bar. "EdgeToEdge" doesn't change that. So I think this a duplicate of #18033 and that needs to be fixed to figure out how to really handle the status bar margin.

@PureWeen What do you think?

[jaosnz-rep]

I can repro this issue at Android platform on the latest 17.12.0 Preview 2.0(8.0.82 & 8.0.90).

[Redth]

This is slightly different on .NET 9 RC1 given @pictos changes to the android modal page using dialogs:

Screen.Recording.2024-09-25.at.2.51.33.PM.mov

I see we now do not set inset padding, but we are using a style: https://github.com/dotnet/maui/blob/net9.0/src/Controls/src/Core/Platform/ModalNavigationManager/ModalNavigationManager.Android.cs#L326

Perhaps we need another style for dialogs that defines some more things to avoid the opaque status bar.

[Redth]

Ok, so for .NET 9 you can hook into the Fragment lifecycles to detect when a fragment is a DialogFragment in the OnFragmentStart and then apply some edge to edge treatment to the fragment.

I made some changes to show this: tranb3r/Issues#2

I didn't attempt to do the same to .NET 8 as there's some differences in the fragment usage and it might be a bit more complicated to find the right views to manipulate, but likely can still be done.

The key changes for a .NET 9 MAUI app to do this are:

.UseMauiApp<App>()
.ConfigureLifecycleEvents(lifecycleBuilder =>
{
#if ANDROID
	lifecycleBuilder.AddAndroid(androidLifecycleBuilder =>
	{
		androidLifecycleBuilder.OnCreate((activity, savedInstance) =>
		{
			if (activity is ComponentActivity componentActivity)
			{
				// Enable Edge to Edge for the activity
				EdgeToEdge.Enable(componentActivity);

				// Also wire up a fragment lifecycle callback so we can enable edge to edge on fragments
				componentActivity.GetFragmentManager()?.RegisterFragmentLifecycleCallbacks(new MyFragmentLifecycleCallbacks((fragmentManager, fragment) =>
				{
					// Modals in MAUI in NET9 use DialogFragment
					if (fragment is AndroidX.Fragment.App.DialogFragment dialogFragment)
					{
						// Edge to Edge on the fragment's window
						dialogFragment.Dialog!.Window!.EnableEdgeToEdge(dialogFragment.Dialog!.Window!.DecorView!.Resources!);
					}
				}), false);
			}
		});
	});
#endif
});

#if ANDROID
public class MyFragmentLifecycleCallbacks(Action<FragmentManager, Fragment> onFragmentStarted) : FragmentManager.FragmentLifecycleCallbacks
{
	public override void OnFragmentStarted(FragmentManager fm, Fragment f)
	{
		onFragmentStarted?.Invoke(fm, f);
		base.OnFragmentStarted(fm, f);
	}
}
#endif

Finally there's some "edge to edge" code which I had originally ported from the androidx Kotlin source since referencing the newer androidx packages was still difficult. I am still using this in the sample PR I made linked above to @tranb3r repro. There is likely a better way to do this, but I couldn't immediately find anything in the androidx api's that allowed me to apply this treatment to an arbitrary Window, so here it is if you're interested:

using Android.Content.Res;
using Android.Views;
using AndroidX.Core.View;
using System;

namespace MauiAppEdgeToEdge;

internal static class ActivityExtensions
{
	static global::Android.Graphics.Color DefaultLightScrim = global::Android.Graphics.Color.Argb(0xe6, 0xFF, 0xFF, 0xFF);
	static global::Android.Graphics.Color DefaultDarkScrim = global::Android.Graphics.Color.Argb(0x80, 0x1b, 0x1b, 0x1b);


	public static void EnableEdgeToEdge(this global::Android.App.Activity activity)
		=> activity.EnableEdgeToEdge(
			SystemBarStyle.Auto(global::Android.Graphics.Color.Transparent, global::Android.Graphics.Color.Transparent),
			SystemBarStyle.Auto(DefaultLightScrim, DefaultDarkScrim));

	public static void EnableEdgeToEdge(this global::Android.App.Activity activity, SystemBarStyle statusBarStyle, SystemBarStyle navigationBarStyle)
		=> activity.Window?.EnableEdgeToEdge(activity.Resources!, statusBarStyle, navigationBarStyle);

	public static void EnableEdgeToEdge(this global::Android.Views.Window window, global::Android.Content.Res.Resources resources)
		=> window.EnableEdgeToEdge(resources,
			SystemBarStyle.Auto(global::Android.Graphics.Color.Transparent, global::Android.Graphics.Color.Transparent),
			SystemBarStyle.Auto(DefaultLightScrim, DefaultDarkScrim));


	public static void EnableEdgeToEdge(this global::Android.Views.Window window, global::Android.Content.Res.Resources resources, SystemBarStyle statusBarStyle, SystemBarStyle navigationBarStyle)
	{
		var res = resources;
		var view = window!.DecorView;
		var statusBarIsDark = statusBarStyle.DetectDarkMode(res!);
		var navigationBarIsDark = navigationBarStyle.DetectDarkMode(res!);

		IEdgeToEdge impl;

		if (OperatingSystem.IsAndroidVersionAtLeast(30))
			impl = new EdgeToEdge30();
		else if (OperatingSystem.IsAndroidVersionAtLeast(29))
			impl = new EdgeToEdgeApi29();
		else if (OperatingSystem.IsAndroidVersionAtLeast(28))
			impl = new EdgeToEdgeApi28();
		else if (OperatingSystem.IsAndroidVersionAtLeast(26))
			impl = new EdgeToEdgeApi26();
		else if (OperatingSystem.IsAndroidVersionAtLeast(23))
			impl = new EdgeToEdgeApi23();
		else if (OperatingSystem.IsAndroidVersionAtLeast(21))
			impl = new EdgeToEdgeApi21();
		else
			impl = new EdgeToEdgeBase();

		impl.Setup(statusBarStyle, navigationBarStyle, window, view, statusBarIsDark, navigationBarIsDark);

		impl.AdjustLayoutInDisplayCutoutMode(window!);
	}
}


internal class SystemBarStyle
{
	public SystemBarStyle(global::Android.Graphics.Color lightScrim, global::Android.Graphics.Color darkScrim, UiMode nightMode, Func<global::Android.Content.Res.Resources, bool> detectDarkMode)
	{
		LightScrim = lightScrim;
		DarkScrim = darkScrim;
		NightMode = nightMode;
		DetectDarkMode = detectDarkMode;
	}

	public static SystemBarStyle Auto(global::Android.Graphics.Color lightScrim, global::Android.Graphics.Color darkScrim)
		=> new SystemBarStyle(lightScrim, darkScrim, UiMode.NightUndefined, res =>
			(res.Configuration!.UiMode & UiMode.NightMask) == UiMode.NightYes);

	public static SystemBarStyle Dark(global::Android.Graphics.Color scrim)
		=> new SystemBarStyle(scrim, scrim, UiMode.NightYes, res => true);

	public static SystemBarStyle Light(global::Android.Graphics.Color scrim, global::Android.Graphics.Color darkScrim)
		=> new SystemBarStyle(scrim, darkScrim, UiMode.NightNo, res => false);

	public global::Android.Graphics.Color LightScrim { get; private set; }
	public global::Android.Graphics.Color DarkScrim { get; private set; }

	public UiMode NightMode { get; private set; }

	public Func<Resources, bool> DetectDarkMode { get; private set; }

	public global::Android.Graphics.Color GetScrim(bool isDark)
	{
		return isDark ? DarkScrim : LightScrim;
	}

	public global::Android.Graphics.Color GetScrimWithEnforcedContrast(bool isDark)
	{
		if (NightMode == UiMode.NightUndefined)
			return global::Android.Graphics.Color.Transparent;

		if (isDark)
			return DarkScrim;

		return LightScrim;
	}
}

internal interface IEdgeToEdge
{
	void Setup(
		SystemBarStyle statusBarStyle,
		SystemBarStyle navigationBarStyle,
		global::Android.Views.Window window,
		global::Android.Views.View view,
		bool statusBarIsDark,
		bool navigationBarIsDark)
	{
		// No edge to edge, pre SDK 21
	}

	void AdjustLayoutInDisplayCutoutMode(global::Android.Views.Window window)
	{
		// No display cutout before SDK 28
	}
}

internal class EdgeToEdgeBase : IEdgeToEdge
{
	public virtual void Setup(
		SystemBarStyle statusBarStyle,
		SystemBarStyle navigationBarStyle,
		global::Android.Views.Window window,
		global::Android.Views.View view,
		bool statusBarIsDark,
		bool navigationBarIsDark)
	{
		// No edge to edge, pre SDK 21
	}

	public virtual void AdjustLayoutInDisplayCutoutMode(global::Android.Views.Window window)
	{
		// No display cutout before SDK 28
	}
}

internal class EdgeToEdgeApi21 : EdgeToEdgeBase
{
	public override void Setup(
		SystemBarStyle statusBarStyle,
		SystemBarStyle navigationBarStyle,
		global::Android.Views.Window window,
		global::Android.Views.View view,
		bool statusBarIsDark,
		bool navigationBarIsDark)
	{
		WindowCompat.SetDecorFitsSystemWindows(window, false);
		window.AddFlags(WindowManagerFlags.TranslucentStatus);
		window.AddFlags(WindowManagerFlags.TranslucentNavigation);
	}
}

internal class EdgeToEdgeApi23 : EdgeToEdgeBase
{
	[System.Diagnostics.CodeAnalysis.SuppressMessage("Interoperability", "CA1422:Validate platform compatibility", Justification = "<Pending>")]
	public override void Setup(
		SystemBarStyle statusBarStyle,
		SystemBarStyle navigationBarStyle,
		global::Android.Views.Window window,
		global::Android.Views.View view,
		bool statusBarIsDark,
		bool navigationBarIsDark)
	{
		WindowCompat.SetDecorFitsSystemWindows(window, false);
		window.SetStatusBarColor(statusBarStyle.GetScrim(statusBarIsDark));
		window.SetNavigationBarColor(navigationBarStyle.DarkScrim);
		new WindowInsetsControllerCompat(window, view).AppearanceLightStatusBars = !statusBarIsDark;
	}
}

internal class EdgeToEdgeApi26 : EdgeToEdgeBase
{
	[System.Diagnostics.CodeAnalysis.SuppressMessage("Interoperability", "CA1422:Validate platform compatibility", Justification = "<Pending>")]
	public override void Setup(
		SystemBarStyle statusBarStyle,
		SystemBarStyle navigationBarStyle,
		global::Android.Views.Window window,
		global::Android.Views.View view,
		bool statusBarIsDark,
		bool navigationBarIsDark)
	{
		WindowCompat.SetDecorFitsSystemWindows(window, false);
		window.SetStatusBarColor(statusBarStyle.GetScrim(statusBarIsDark));
		window.SetNavigationBarColor(navigationBarStyle.GetScrim(navigationBarIsDark));
		var c = new WindowInsetsControllerCompat(window, view);
		c.AppearanceLightStatusBars = !statusBarIsDark;
		c.AppearanceLightNavigationBars = !navigationBarIsDark;
	}
}

internal class EdgeToEdgeApi28 : EdgeToEdgeApi26
{
	public override void AdjustLayoutInDisplayCutoutMode(global::Android.Views.Window window)
	{
		if (OperatingSystem.IsAndroidVersionAtLeast(28))
			window.Attributes!.LayoutInDisplayCutoutMode = LayoutInDisplayCutoutMode.ShortEdges;
	}
}

internal class EdgeToEdgeApi29 : EdgeToEdgeApi28
{
	[System.Diagnostics.CodeAnalysis.SuppressMessage("Interoperability", "CA1422:Validate platform compatibility", Justification = "<Pending>")]
	public override void Setup(
		SystemBarStyle statusBarStyle,
		SystemBarStyle navigationBarStyle,
		global::Android.Views.Window window,
		global::Android.Views.View view,
		bool statusBarIsDark,
		bool navigationBarIsDark)
	{
		if (OperatingSystem.IsAndroidVersionAtLeast(29))
		{
			WindowCompat.SetDecorFitsSystemWindows(window, false);
			window.SetStatusBarColor(statusBarStyle.GetScrimWithEnforcedContrast(navigationBarIsDark));
			window.SetNavigationBarColor(navigationBarStyle.GetScrimWithEnforcedContrast(navigationBarIsDark));
			window.StatusBarContrastEnforced = false;
			window.NavigationBarContrastEnforced = navigationBarStyle.NightMode == UiMode.NightUndefined;

			var c = new WindowInsetsControllerCompat(window, view);
			c.AppearanceLightStatusBars = !statusBarIsDark;
			c.AppearanceLightNavigationBars = !navigationBarIsDark;
		}
	}
}

internal class EdgeToEdge30 : EdgeToEdgeApi29
{
	public override void AdjustLayoutInDisplayCutoutMode(global::Android.Views.Window window)
	{
		if (OperatingSystem.IsAndroidVersionAtLeast(30))
			window.Attributes!.LayoutInDisplayCutoutMode = LayoutInDisplayCutoutMode.Always;
	}
}

[tranb3r]

@Redth
I've tested the solution you've proposed.
I can confirm it fixes the modal issue at the top of the screen.

However, using net9-rc2, there is now an issue at the bottom of the screen: the system navigation bar is appearing solid-white, both for the main page and for the modal page, instead of having the same color as the page (when using edge-to-edge). Is this expected? Can this be fixed?
I've tried to set navigationbar color using maui community toolkit, it does work for the main page, but not for the modal page.

This behavior is actually different depending on the device.
On Pixel 5, the navigation bar is white. On Pixel 8, it has the same color as the page (as expected).
Why is it behaving differently on different devices ?

[borrmann]

Since .NET 9 modal pages also break other dialogs on android. Popups from the MAUI Community Toolkit or Bottom Sheets from The49 are now displayed behind modal pages.