[BUG] Popups don't extend to the Android Status Bar

[JosHuybrighs]

Is there an existing issue for this?

• [x] I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• [x] I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

I configure my app to use the same background color as the color of my MainPage as follows:

<ContentPage.Behaviors>
  <tk:StatusBarBehavior StatusBarColor="#101010"/>
</ContentPage.Behaviors>

Unfortunately when a Popup is displayed on the page the overlay color that is applied on the page doesn't extend to the Status Bar. It is even worse because the color becomes some kind of dark blue. I tested with android set in night mode.

I also did some tests with SyncFusion's BottomSheet and there is also the same issue.

Expected Behavior

I wouldn't expect that this happens. Almost all apps today extend the page background to both the Android Status Bar and the top NavigationBar. It is strange that such a basic thing is simply not supported on MAUI. Looks very outdated.

Any suggestions?

Steps To Reproduce

Configure MainPage to use a StatusBarBehaviour. Add a Popup and open it.

Link to public reproduction project repository

https://github.com/JosHuybrighs/MauiApp5/tree/master

Environment

- .NET MAUI CommunityToolkit: 13.0.0
- OS: Android 34
- .NET MAUI:10.0.10

Anything else?

No response

[TheCodeTraveler]

Thank you @JosHuybrighs.

Please edit push your reproduction sample to an open-source repository then edit the Description to update the provided reproduction sample link.

We can't accept zip files from One Drive links due to op-sec concerns.

[JosHuybrighs]

@TheCodeTraveler

Reproduction solution is now available on GitHub. See Repo.

[quocanhh86]

@TheCodeTraveler I’m facing a similar issue: when opening a popup, the navigation bar color changes and no longer matches the page’s navigation bar color.

[LeoJHarris]

I'm having whats seems like a similar issue with a page where we have white space between the page and and the statusbar, the white space is taking on the the pages own background color but its leaving an obvious gap which we have only noticed recently on updating to .net10.0 and updating a few packages including this one. Like the page is not extending to touch the statusbar and coincided with the statusbar issue as reported https://github.com/CommunityToolkit/Maui/issues/2533. Not sure if the two are related but we have not changes anything out end besides NuGet updates and moving to .net 10

[mina5500]

Same issue and also affecting bottom navbar color Always black color with light icons This is same behavior as built in pushmodal

[pictos]

@TheCodeTraveler here is the repository repo

@quocanhh86 I tried your sample and couldn't reproduce the issue

[pictos]

@mina5500 could you share a reproduction sample?

[quocanhh86]

@pictos, the navigation bar color changes and no longer matches the page’s navigation bar color.

[mina5500]

@mina5500 could you share a reproduction sample?

I will try to make a sample ... this also happens on v 12 on .net 9

[pictos]

@pictos, the navigation bar color changes and no longer matches the page’s navigation bar color.

I ran couldn't reproduce the behavior you're describing

[JosHuybrighs]

@pictos

Did you try the repo I provided here? I tried it again and there is clearly an issue with the status bar. I have added 2 screenshots in the readme.md file of the repo.

[quocanhh86]

@pictos could you please resolve this bug

[JosHuybrighs]

@pictos, @quocanhh86, @mina5500

I have investigated this issue in the mean time a bit deeper for Android and are afraid that this will not be easy to solve. Modal pages like toolkit Popups on Android have a Window in a DialogFragment and don't use the normal Activity.Window where StatusBarBehavior acts upon. A possible solution will have to address this.

I solved it in an ugly way by creating a BarColorService (with an Android version of it) and calling SetBarColors in it when creating my initial NavigationPage (the Home page) and creating Modal pages. I don't use toolkit Popups anymore. I also don't use Shell (hate it) and have my own PageNavigationService that has OpenMainPage, OpenContentPage (page on the stack), CloseContentPage, OpenModalPage and CloseModalPage methods. I can then invoke BarColorService.SetBarColor in the navigation service.

It is troublesome that such a basic thing, which I assume everyone needs, doesn't come out of the box from the MAUI framework. Makes you wonder whether chosing MAUI is a good idea. There is off course the power of .NET and C# that stops me from looking somewhere else.

[pictos]

Hey folks, sorry for disappearing. I'll see if can find time this or next week to look into it.

@JosHuybrighs, thanks for the investigation. I know that limitation, there's a possible fix to this using the provided DialogFragmentCallback that you can find here.

For status bar color it should make it work for popups (since they are modal pages under the hood). If anyone wants to try it (it just a one line change) and give a feedback here would be awesome