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:

current situation

eventually desired situation:

desired situation

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

the Navigation drawer should not be below the actionbar/toolbar, it is against the design guide lines — tyczj, Dec 03 '14 at 21:49
is it realy? https://developer.android.com/design/patterns/navigation-drawer.html — Bart Burg, Dec 03 '14 at 21:51
those are the old design guide lines, this is the updated one http://www.google.com/design/spec/patterns/navigation-drawer.html — tyczj, Dec 03 '14 at 21:52
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` or change the theme to another one i guess — Ultimo_m, Dec 03 '14 at 22:02
You're right and so does their hangout app. Ok, so the question still lives ;) — Bart Burg, Dec 03 '14 at 22:06
Your solution didn't work though, I'll have a look in the themes — Bart Burg, Dec 03 '14 at 22:08
@BartBurg did you find any solution. I am also struggling with this. — rupesh, Jul 16 '15 at 06:59
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!! — SilSur, Mar 07 '18 at 09:16

score 24 · Accepted Answer · answered Dec 03 '14 at 22:12

24

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

answered Dec 03 '14 at 22:12

Biu

1,066
10
18

Are you sure? Please see my answer one more time. – Biu Dec 03 '14 at 22:17
Almost now! it doesn't seem to take the notificationbar in this margin top. – Bart Burg Dec 03 '14 at 22:21
Apparently, the shame is on me: in my style I had these 2 attributes: true true – Bart Burg Dec 03 '14 at 22:22
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 – Biu Dec 03 '14 at 22:23
1

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 ? – ralphgabb May 19 '15 at 01:36
@ralphspoon I have the same problem as you mentioned. I found the solution in http://stackoverflow.com/a/26555224/1241783 – Bruce May 01 '16 at 15:06
@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 ? – Pragya Mendiratta Mar 15 '18 at 04:40

score 7 · Answer 2 · answered Nov 19 '15 at 03:45

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>

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 : http://stackoverflow.com/questions/39957481/android-navigation-drawer-ui-different-displayed-in-below-sdk-22?noredirect=1#comment67194862_39957481 — Sathish Gadde, Oct 10 '16 at 13:19
Why don't you just use layout_below? Perhaps I missed a point? — stdout, Nov 07 '16 at 21:29

score 0 · Answer 3 · answered Jun 29 '22 at 10:07

0

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

answered Jun 29 '22 at 10:07

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/32133029) – Abhishek Dutt Jul 05 '22 at 04:01

Navigation drawer below Actionbar

3 Answers3

Linked