CODEWITHSUNDEEP
androidandroid-layoutandroid-fragmentsnavigation-drawermaterial-design
fiipi
fiipi

Reputation: 663

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

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?

Upvotes: 1

Views: 3100

Answers (1)

michal.luszczuk
michal.luszczuk

Reputation: 2903

<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.

Upvotes: 1

Related Questions