maui
maui copied to clipboard
dotnet
[Android] Modal Pages do not fill screen when in Fullscreen
Description
On Android 12.0, modal pages do not cover the entire screen when going into fullscreen and hiding system and navigation bars. It appears that modal pages are not pushed up all the way, because the content is not centered correctly, either. This occurs with real devices (in my case Samsung S10 + S22), but not in emulators.
Steps to Reproduce
- Create a new MAUI App project
- Add a modal page
- Enable full screen mode in Android
- Debug App on Android
- Open Modal page
Expected behavior: The modal page fills the entire screen when fullscreen is enabled Actual behavior: The modal page is not pushed up all the way and the underlying page is still visible
Link to public reproduction project repository
https://github.com/ewerspej/dotnet-maui-bug-repro-modal-fullscreen
Version with bug
7.0.100-rc.1.22431.12
Last version that worked well
Unknown/Other
Affected platforms
Android
Affected platform versions
Android 12.0
Did you find any workaround?
No
Relevant log output
No response
@ewerspej can you give me some more specifics it seems to work fine for me?
Hi @ewerspej. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.
@ewerspej can you give me some more specifics it seems to work fine for me?
I'm running it on a Samsung S22 with Android 12.0. My dev environment is Windows 10 running Visual Studio 17.4 Preview 2.1 and the latest .NET 7.0 RC1.
What other kind of information are you thinking of? How did you try to reproduce it? Have you tried a real device?
I can reliably reproduce it with the example repo as well as with one of the apps I'm working on (which is why I reported this).
@PureWeen It seems to work fine with Android emulators, but on my Android 12.0 devices (Samsung Galaxy S10 + S22) it's definitely displayed incorrectly as you can see in the screenshots that are attached in the repository.
Maybe this has to do with the insets for the front camera which is integrated in the screen of newer smartphone models?
We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.
I hope it makes it to the next release then, because fullscreen support is important for many apps that want to provide an immersive experience. Thanks for taking it up.
@rachelkang @PureWeen
Update
It appears that this is a general MAUI or Shell issue with Android on Samsung devices. This issue is also reproducible with non-modal pages that are created via Shell navigation. The status bar area, which on many Samsung devices features a cutout for the front camera, turns black when opening any type of Page (modals are just slightly worse because their content isn't placed right) and when going back to the previous page, it stays black despite having it set to a different color.
I am seeing the same behavior on a Google Pixel 6, but only in landscape orientation. Portrait works as expected. I'm running Visual Studio 2022 - 17.5.4 Pixel is running Android 13 - March 5, 2023
I am seeing the same behavior on a Motorola edge 20 pro in landscape orientation
This issue is also impacting me, on a Google Pixel 6 device. It looks fine in landscape mode, but in portrait mode there is a gap, as described above. Phone is running Android 13 (system update 1 Feb 2023, security update 5 Mar 2023). Build environment is VS 17.5.3
This issue is blocking me from releasing the app!
@duandre @jrc14 are you using full screen settings like the issue here dictates or are you doing something else?
@PureWeen Yes, I am. I am trying to reproduce a video in full screen and landscape orientation with MediaElement in a modal page. When the modal page is pushed up the underlying page is still visible
@PureWeen yes, this is the same issue with full screen settings. In my case, I have Shell app that, from one of the shell tabs is using Shell.Current.GoToAsync to display a ContentPage with PresentationMode.Modal, and in that page's code-behind it is switching into full-screen mode by calling insetsController.Hide(WindowInsets.Type....Bars()). The result is that everything in the ContentPage is being pushed down the screen (so, like with duandre's case, the content of the earlier page on the stack is showing through). I note that I can change this behaviour by modifying mainActivity.Window.Attributes.LayoutInDisplayCutoutMode. If I set it to Always then, in Portrait mode, the gap doesn't appear and my modal page ends up in the right place (overlapping the cutout, so the camera lens takes a chunk out of the top-centre of my page content). This is not a complete fix for the problem because my modal ContentPage is now displaced when the phone is in Landscape mode. I didn't find one single setting for LayoutInDisplayCutoutMode that gives me a reliably correct appearance in both Portrait and Landscape, full-screen and non-full-screen. Nor is the behaviour completely repeatable (sometimes the layout I get is different, depending on the series of switches I do between full/non-full-screen and landscape/portrait).
@jrc14 @PureWeen just an update: in my case I realize my problem was occurring when controls of MediaElement was shown. I set ShouldShowPlaybackControls="False" and the problem with modal stopped.
Any news about the modal page not showing in fullscreen ? Any workaround?
Hi @ewerspej. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.
You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.
This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.
Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Not repro on Android platform with sample project.
https://github.com/ewerspej/dotnet-maui-bug-repro-modal-fullscreen
The issue has indeed been improved with VS 17.7.0 Preview 1.0, but the status bar is still visible when using fullscreen and immersive mode on Android (Samsumg Galaxy S22):
The status bar should be hidden by modal pages, at least that's how it used to be in Xamarin.Forms when fullscreen and immersive mode were enabled.
I do not consider this fixed, yet, because if I remove Shell.PresentationMode="ModalAnimated" from the Page's root element, then it shows up as a normal page and that covers the entire screen - including the status bar.
Any update on this issue. It still persists, and in the latest visual studio version, even my work-around (with mainActivity.Window.Attributes.LayoutInDisplayCutoutMode) no longer works.
Same here. Issue is still reproducible even on MAUI 8.0.3. Hope it will get fixed soon.
@PureWeen here is another repro, would be cool to have at least a direction where to search for the fix. It looks like the content is being shifted down for some reason (see the nav buttons below)
Is there any progress on this? I'm getting close to being ready for release and it looks terrible. It has been well over a year since this was reported and there has been nothing but discussion.
@PavloLukianets When is this fix projected for release?
ahaaha, i am not on the MAUI team) ask @davidortinau or @redth :)