How to make the nav-drawer appear below the action bar

Question

i've been struggling to make my navigation drawer appear below the action bar. I know it may not be according to design guidelines. I have visited several other threads about the subject (example: Navigation drawer below Actionbar), which didn't solve my problem.

After lots and lots of tinkering, i didn't get further. Please help with this problem.

Current situation: https://i.stack.imgur.com/HK1qW.png

layout/activity_spellbook.xml

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:openDrawer="start">

        <include
            layout="@layout/app_bar_spellbook"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="left|start"
            android:fitsSystemWindows="false"
            app:headerLayout="@layout/nav_header_spellbook"
            app:menu="@menu/activity_spellbook_drawer" />

    </android.support.v4.widget.DrawerLayout>
</FrameLayout>

FlyingNades · Accepted Answer · 2018-03-31T12:40:06.307

0

Just put the app bar outside the DrawerLayout.

Code:

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:fitsSystemWindows="false"
        app:headerLayout="@layout/nav_header_spellbook"
        app:menu="@menu/activity_spellbook_drawer" />

</android.support.v4.widget.DrawerLayout>
    <include
        layout="@layout/app_bar_spellbook"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

edited Mar 31 '18 at 12:40

answered Mar 31 '18 at 11:36

FlyingNades

432
3
16

Unfortunately this causes the navbar to not appear at all, strangely. – Roeland Mar 31 '18 at 12:35
@Roeland My bad, put the app bar under the 'DrawerLayout'. I edited my answer. – FlyingNades Mar 31 '18 at 12:39
I am already grateful for you help and i don't mean to ask too much but i got a new problem: https://imgur.com/a/lAh3c The menu is transparant, despite me trying to fix it again. Im a beginner, which doesn't help :| – Roeland Mar 31 '18 at 13:04
@Roeland If I answered your question please mark my answer as the answer so people can see and learn too. about your next question, try giving your NavigationView a background 'android:background="#ffffff" '. And no worries, im happy to help. – FlyingNades Mar 31 '18 at 13:09
I will hopefully get to mark it soon. The background color isn't the issue, apparently. I will keep trying though. This is at least a step in the right direction, i think. – Roeland Mar 31 '18 at 13:33

score 0 · Answer 2 · answered Mar 31 '18 at 13:05

you have to do some changes in all files given below :

Drawer layout :

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:openDrawer="start">

   <include
    layout="@layout/app_bar_main2"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:layout_marginTop="?attr/actionBarSize"
    app:headerLayout="@layout/nav_header_main2"
    app:menu="@menu/activity_main2_drawer" />

  </android.support.v4.widget.DrawerLayout>

Now, In AppBarLayout which is present into main class(or where you write)

 <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.PopupOverlay">

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

Now, at last in Manifest File add theme into your activity:

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

How to make the nav-drawer appear below the action bar

2 Answers2