Bug 41404 - Xamarin Forms Master Page (of Master Detail Page) obscures Android status bar with Material Design
Summary: Xamarin Forms Master Page (of Master Detail Page) obscures Android status bar...
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 2.3.0
Hardware: PC Windows
: --- normal
Target Milestone: ---
Assignee: Rui Marinho
Depends on:
Reported: 2016-05-31 17:31 UTC by Jeff Siemens
Modified: 2017-06-16 18:47 UTC (History)
15 users (show)

Tags: ac
Is this bug a regression?: ---
Last known good build:

Screenshot of issue (34.21 KB, image/png)
2016-05-31 17:31 UTC, Jeff Siemens
Screenshot of problem (15.06 KB, image/png)
2016-07-01 00:46 UTC, Andrew Hall
Sample project (79.60 KB, application/x-zip-compressed)
2016-07-01 00:47 UTC, Andrew Hall

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.

Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:

Description Jeff Siemens 2016-05-31 17:31:26 UTC
Created attachment 16143 [details]
Screenshot of issue

The master page of a MasterDetailPage runs into the status bar on Android. The Detail bar is correctly rendered underneath the status bar. Works fine on iOS.

The issue was found when using the Material Design AppCompat library and theme.

Here's the sample code (goes in the App constructor).

// The root page of your application
var master = new NavigationPage(new ContentPage()
    Title = "Master",
    Content = new Label() { Text = "Master" }
master.Title = "Master";
var detail = new NavigationPage(new ContentPage()
    Title = "Detail",
    Content = new Label() { Text = "Detail" }
var masterDetail = new MasterDetailPage()
    Master = master,
    Detail = detail
masterDetail.MasterBehavior = MasterBehavior.Split;
MainPage = masterDetail;
Comment 1 Rui Marinho 2016-06-13 16:55:44 UTC
In what device?
Comment 2 Jeff Siemens 2016-06-13 17:01:08 UTC
Nexus 9. Android 5.1.1.
Comment 3 Rui Marinho 2016-06-27 13:47:40 UTC
Should be fixed in 2.3.1-pre1
Comment 5 Andrew Hall 2016-07-01 00:46:43 UTC
Created attachment 16539 [details]
Screenshot of problem

Unfortunately this is not fixed for us with the new 2.3.1-pre1.  Samsung Galaxy Grand Prime SM-G530W.  Android 5.1.1.
Comment 6 Andrew Hall 2016-07-01 00:47:29 UTC
Created attachment 16540 [details]
Sample project

Sample project attached.
Comment 7 Parmendra Kumar 2016-07-01 05:25:01 UTC
I have checked this issue with Xamarin.Forms. and using sample attached in comment #6 and still facing same issue.

Hence reopen this issue.
Comment 8 Tobias Schulz 2016-07-02 17:29:31 UTC
Same here, Nexus 5X, Android 6.0
Comment 9 Rui Marinho 2016-07-05 13:16:24 UTC
Hi Andrew, seems it's the padding in your MasterPage that is overriding it ... if you remove it it will work.. but I think i know whats wrong.
Comment 10 Rui Marinho 2016-07-05 13:38:00 UTC
Nop, not that.. i will keep investigating.
Comment 11 RJantz 2016-07-21 14:36:54 UTC
From the testing I've done this bug happens every time on devices and emulators that are running Lollipop and above. KitKat devices and emulators perform as expected.
Comment 12 RJantz 2016-07-21 14:44:35 UTC
Oops. I got so wrapped up in the problem I didn't read the title close enough to realize the Material Design part.
Comment 13 JPetty 2016-09-05 03:04:03 UTC
I'm still running into this issue. Has anyone found a fix/workaround?
Comment 14 Tobias Schulz 2016-09-05 03:06:51 UTC
I've got this issue too. But I dont have a fix...
Comment 15 MSiccDev 2016-09-20 04:33:12 UTC
Same here, please provide at least a workaround...
Comment 16 Jesse Young 2016-10-13 15:46:47 UTC
I believe this is the default behavior for Material design, and you can force the master pane to show behind the status bar by tweaking your style in the values-v21 folder and adding the following:
<item name="android:windowTranslucentStatus">true</item>
Comment 17 adrianknight89 2016-10-23 18:41:56 UTC
XF adds padding (= height of status bar) to detail in order to render it underneath the status bar whereas master does not have this (except when it's in split screen mode). This is unfortunately by design. I think they were trying to imitate Material specs such that master draws behind the status bar, but it's actually drawing on top.

See https://github.com/xamarin/Xamarin.Forms/pull/473 and https://github.com/xamarin/Xamarin.Forms/pull/422

These PRs do not really fix the issue. When I was working on 422, I did not know if the master was supposed to draw underneath the status bar or not so I kept the functionality intact.

We need to look at ways to use ScrimInsetsFrameLayout otherwise MDP is broken. In the meantime, we can remove all this padding non-sense and force master to draw underneath the status bar.
Comment 18 David Ortinau [MSFT] 2017-06-16 18:47:15 UTC
This is working as designed. We will be looking again at Material design support and designing in general when we get into 3.0. If anyone has suggestions for changes and improvements, please propose them on the Evolution Forum.