Material design drawer under the status bar: how to achieve it using a DrawerLayout with two FrameLayouts as children?

Question

I'm currently setting up the navigation drawer to follow the material design specs. I've already checked Chris Banes post (available in Material design checklist) and made all of the implementations listed there such as custom themes and so on, and this question as well, but none of them seem to meet the requirements of my app structure.

As you guessed from the title, my DrawerLayout has got two FrameLayouts as children: one for the content and another for the drawer (it is important to point out that I can't change this structure since I need to keep the ability to update the content in the NavigationDrawer dinamically and obviously to keep the ability to swap fragments as the main content).

The problem is now that I don't know where to put the toolbar declaration in xml in order to achieve the expected design and without messing all up, since the DrawerLayout requires two children.

activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.myapp.MainActivity" 
android:fitsSystemWindows="false"> <!-- Setting this one to true makes the status bar to have a non-transparent shitty background -->

<!--
     As the main content view, the view below consumes the entire
     space available using match_parent in both dimensions.
-->

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary" 
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

    </FrameLayout>

<com.myapp.widget.ScrimInsetsFrameLayout
    android:id="@+id/navigation_drawer"
    android:layout_width="@dimen/navdrawer_width"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"/>
</android.support.v4.widget.DrawerLayout>

Gives this result: As you can see, the status bar seems to be completely absent (maybe it's correct?) since the content is drawn full screen. When the app starts I can see the toolbar is drawn (rendered without the staus bar padding, thus messing up with the system icons) and then suddenly gets overlayed by the map content. I'm currently running Android 4.4.4 but it's the same on the emulator with Android 5.0.

App running on Android 4.4.4. CM11

In another stackoverflow question it was suggested to put a root LinearLayout with the Toolbar and the DrawerLayout, but would result in strange results, such as correctly rendering the toolbar but with the status bar (with solid non-transparent background) under it. I've tried also to use a FrameLayout as root, with poor results.

Any advice on how to handle this problem?

It's Theme.AppCompat.Light.NoActionBar with false, true, and also true for values-v19. — fiipi, Dec 14 '14 at 16:55
You are using "NoActionBar" theme but you want to have ActionBar/ToolBar? So use "Theme.AppCompat.Light.DarkActionBar" i.e. — michal.luszczuk, Dec 14 '14 at 16:57
Check this out http://android-developers.blogspot.it/2014/10/appcompat-v21-material-design-for-pre.html which states: "To use Toolbar as an Action Bar, first disable the decor-provided Action Bar. The easiest way is to have your theme extend from Theme.AppCompat.NoActionBar (or its light variant)." — fiipi, Dec 14 '14 at 17:01
So what you need that Toolbar has and default used ActionBar does not have — michal.luszczuk, Dec 14 '14 at 17:03
Not sure I understood your question, basically I just want to replace the ActionBar with the Toolbar. In particular I want the NavigationDrawer to slide onto the Toolbar but under the System Status Bar, as the Material Design Spec states. — fiipi, Dec 14 '14 at 17:18
Ahh now i got your point. So your navigation drawer should have 2 children. One children i.e. LinearLayout with Toolbar, and FrameLayout (which will be the content/container of your fragments). and second children like you got now fragment with this listview — michal.luszczuk, Dec 14 '14 at 17:21

score 1 · Accepted Answer · answered Dec 14 '14 at 17:24

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"> 

<LinearLayout
    android:id="@+id/someLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary" 
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />
     <FrameLayout android:id="@+id/container"></FrameLayout>

</LinearLayout>

<com.myapp.widget.ScrimInsetsFrameLayout
    android:id="@+id/navigation_drawer"
    android:layout_width="@dimen/navdrawer_width"/>
</android.support.v4.widget.DrawerLayout>

Now you just have to change your fragments in R.id.container, because container is under ToolBar in someLayout LinearLayout

I ommited some args of layouts but that is not the point.

Thanks, this solution correctly displays the Toolbar and also the NavigationDrawer correctly overlaps the Toolbar. But there's a problem: it renders everything way too up in the screen because as it was before it renders everything without taking into consideration the System status bar padding! Any advice about that? — fiipi, Dec 14 '14 at 18:55
I finally got somewhere close to the fix: I've checked here on SO this question http://stackoverflow.com/questions/20557869/translucent-navigation-without-layout-displaying-beneath-status-bar, i found out that wrapping everything with a FrameLayout and setting it to fitsSystemWindows="true" (as well as the ScrimInsetsFrameLayout) makes everything render correctly. Now i'm facing some problems with the color of the status bar, but that's another story...Thank you anyway! — fiipi, Dec 14 '14 at 19:17

Material design drawer under the status bar: how to achieve it using a DrawerLayout with two FrameLayouts as children?

1 Answers1