How to make status bar transparent for Modal Pages

[ShariatPanah]

Description

So i want to show a modal page using Navigation.PushModalAsync(new MyPage()); and i need this to be overlayed on Status Bar for android (i didn't test it on iOS), meaning the status bar should be transparent, i use this code:

events.AddAndroid(android => android.OnCreate((activity, bundle) => MakeStatusBarTranslucent(activity)));
static void MakeStatusBarTranslucent(Android.App.Activity activity)
{
    activity.Window.SetFlags(Android.Views.WindowManagerFlags.LayoutNoLimits, Android.Views.WindowManagerFlags.LayoutNoLimits);
    activity.Window.ClearFlags(Android.Views.WindowManagerFlags.TranslucentStatus);
    activity.Window.SetStatusBarColor(Android.Graphics.Color.Transparent);
}

this works perfectly fine for MainPage, but for modal pages it wont make any difference and the modal pages start right below of status bar which is not desired behaviour.
So how can i get this working for modal pages?

this is Main Page which is behaving as my desire:

but this is modal page, which is not working as exprected and its below of status bar:

Steps to Reproduce

No response

Link to public reproduction project repository

No response

Version with bug

7.0.92

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 8.0 and 12.0

Did you find any workaround?

No response

Relevant log output

No response

[ShariatPanah]

any ideas here?

[johannes-keinestam]

I'm having the exact same problem. It's kind of an issue that the contents of the modal page can't extend under the status bar. We push both NavigationPages (with toolbars) as well as plain ContentPages when we want to give an "edge-to-edge" feel to the app, but now when migrating from Xamarin.Forms this hasn't been possible and quite severely affects the look of our app to the degree that we feel we cannot ship it until this has been resolved.

From what I can tell, the offending code is here:

maui/src/Controls/src/Core/Platform/ModalNavigationManager/ModalNavigationManager.Android.cs

Line 333 in d7a37e3

mlp.TopMargin = barInsets.Top;

Here it uses the top inset of the status bar ("IgnoringVisibility", which I take to mean it will completely disregard that we've set SetDecorFitsSystemWindows to false and added the WindowManagerFlags.TranslucentNavigation flag on the Window). Unfortunately, since everything is marked internal and non-virtual in that file, there seems to be no hacking around this.

I've tried a few hacky solutions, to see if I could change the behavior here:

maui/src/Controls/src/Core/Platform/ModalNavigationManager/ModalNavigationManager.Android.cs

Line 325 in d7a37e3

if (decorView is not null && this.LayoutParameters is ViewGroup.MarginLayoutParams mlp)

I could get the ModalContainer instance by just looping until I found the right parent view (matching on GetType().Name.Contains("ModalContainer") since, again, everything is internal...), and with this I tried setting its LayoutParameters property to a non-ViewGroup.MarginLayoutParams instance so that the margin is never set. This causes a crash, since some Java code somewhere expects that the LayoutParameters is a subtype of FrameLayout.LayoutParams. Creating my own subclass of FrameLayout.LayoutParams and assigning an instance of that to the property doesn't help because the TopMargin property isn't virtual either, so there's no way of modifying its behavior (by e.g. always returning 0 in the getter).

Seems like we might be out of luck here for now...

[ShariatPanah]

i created an issue but they moved my issue to discussions, could you please post a comment on my issue or create just a new one to let them know this is a framework-level bug and its not gonna be fixed by some hacky-shit?

[slouge]

Same issue on my side, very frustrating.
Any new workaround to override the undesired top margin ?

[SKeehnen]

The only workaround I have for now is in the OnDisappearing of the mainview (because of a modal page) i'm showing a stacklayout at the top of the mainview with the backgroundcolor of the modal page and the height of the android status bar. In the OnAppearing i'm hiding that stacklayout.
The height you can get with the following code:

int resourceId = Resources.GetIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0)
{
    StatusBarHeight = (int) (Resources.GetDimensionPixelSize(resourceId) / Resources.DisplayMetrics.Density);
}

[maonaoda]

you can get AndroidX.Fragment.App.DialogFragment from activity and clear the dialog window`s bar color like this.

...
            if (activity is AppCompatActivity appCompatActivity)
            {
                var dialogFragment = appCompatActivity.SupportFragmentManager?.Fragments?.OfType<AndroidX.Fragment.App.DialogFragment>().FirstOrDefault();
                if (dialogFragment?.Dialog?.Window != null)
                {
                    SetBarColor(dialogFragment.Dialog.Window);
                }
            }
...
            
        private static void ClearBarColor(Android.Views.Window window)
        {
            window.ClearFlags(WindowManagerFlags.TranslucentStatus);
            window.AddFlags(WindowManagerFlags.DrawsSystemBarBackgrounds);
            window.SetStatusBarColor(Android.Graphics.Color.Transparent);
            window.SetNavigationBarColor(Android.Graphics.Color.Transparent);
        }