Navigation drawer below Actionbar

Question

Right now I just started a project in Android Studio with the NavigationBar as preconfigured in the template. Apparently it puts the navigation drawer behind the actionbar. Many questions you find want the navigation drawer on top of the actionbar, I would like to have it start below the actionbar. This is what I currently have:

eventually desired situation:

I have found this solution, but I think there should be an easier way.

Dopester

the Navigation drawer should not be below the actionbar/toolbar, it is against the design guide lines – Motherwort

is it realy? developer.android.com/design/patterns/navigation-drawer.html – Dopester

those are the old design guide lines, this is the updated one google.com/design/spec/patterns/navigation-drawer.html – Motherwort

Ok, well then I should talk to my designer about this ;) – Dopester

Well Play Store App is like that :D I think that you can resolve your problem by adding in your activity theme style the line< item name="android:windowActionBarOverlay">false</item> or change the theme to another one i guess – Sapheaded

You're right and so does their hangout app. Ok, so the question still lives ;) – Dopester

Your solution didn't work though, I'll have a look in the themes – Dopester

@BartBurg did you find any solution. I am also struggling with this. – Thormora

I don't give a damn what the Material Guidelines say - it's my app: I want it's GUI to look the best way it can look. Besides - guidelines are exactly that GUIDELINES. ...and what exactly is the point of animating the Hamburger icon (changing it into an arrow on click / activation) if you are anyway going to hide it by overlaying the Nav Drawer on top of it?? The Google Design Devs obviously didn't think this one through carefully. So I am going to put my Nav Drawer BELOW the Actionbar - fullstop!! – Visby

Answer 1

Apply this attribute to your root viewgroup android:layout_marginTop="?android:attr/actionBarSize". Hope this helps.

Outlier

Are you sure? Please see my answer one more time. – Outlier

Almost now! it doesn't seem to take the notificationbar in this margin top. – Dopester

Apparently, the shame is on me: in my style I had these 2 attributes: <item name="android:windowTranslucentStatus">true</item> <item name="android:windowTranslucentNavigation">true</item> – Dopester

What do you mean by that? The status bar isnt taken in account when laying out views, but status bar does account for the total height of the screen – Outlier

while this workaround works, the action bar is dimmed and darkened, where it should not be affected by these effects. Any ideas on how to fix it ? – Younglove

@ralphspoon I have the same problem as you mentioned. I found the solution in https://mcmap.net/q/87656/-how-do-i-make-drawerlayout-to-display-below-the-toolbar – Circum

@BartBurg: I am getting status bar size white space if I am giving android:layout_marginTop="?android:attr/actionBarSize". can you plz help me out with this ? – Counterirritant

Answer 2

Try this MainActivity layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/app_bar"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:fitsSystemWindows="true">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            tools:showIn="@layout/app_bar_main">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Put your content View here!" />
        </RelativeLayout>
        <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer" />
    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>

Filar

Hi am using above code, its working pretty in SDK 23 and when same code execute on SDK 19 ActionbarTitle not showing..... This is link : #39957981 – Ozellaozen

Why don't you just use layout_below? Perhaps I missed a point? – Yawmeter

ActionBarTitle doesnot exist on SDK19. It came after SDK21 – Jentoft

Answer 3

Along with Biu's answer

Add this line to your root view group too to take status bar/navigation bar into consideration

android:fitsSystemWindows="true"

Commenting incase anyone stumbles upon this thread again

Tarah

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Cheddite