17

I'm using the Android design library on API 22. I would like to:

  1. have a Toolbar and a DrawerLayout inside which there is a RecyclerView
  2. have the DrawerLayout be below the Toolbar; for example, when the toolbar is visible, the drawer's main content should be below it, and the (left) drawer should also be below it so that when it is expanded, the toolbar is still visible
  3. have Toolbar be scrolled off the screen when the recycler view is scrolled down

Is this even possible? I have problems to marry #2 and #3. The way it is now is that the toolbar is always above the drawer layout, covering the first entry in the recycler, and the top of the left drawer as well. Here is my layout file (incomplete, but showing my structure):

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"/>

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

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Toolbar
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"/>

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

It looks like though the RecyclerView's app:layout_behavior="@string/appbar_scrolling_view_behavior" setting has no effect, because when deleted, the behavior is the same.

I tried adding a RelativeLayout as a child of the CoordinatorLayout to define that the drawer is below the toolbar etc. but nothing seems to work.

Is what I'm trying to achieve possible with the library?

wujek
  • 10,112
  • 12
  • 52
  • 88

5 Answers5

11

Try the following if you want to see the animation of the hamburger icon and arrow. If you include the top margin (layout_marginTop) for NavigationView it will move it down.

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/navigation_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways" />

        </android.support.design.widget.AppBarLayout>

        <!-- main content view -->
        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/background_light"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </android.support.design.widget.CoordinatorLayout>

    <!-- The navigation drawer -->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/drawer_menu"/>

</android.support.v4.widget.DrawerLayout>
mtazamaji
  • 160
  • 1
  • 6
3

Yes! It is possible.

<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/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".StartupActivity">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/app_bar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:theme="@style/Theme.AppCompat.NoActionBar"/>

        </android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/scrollRecyclerView"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />

    </android.support.design.widget.CoordinatorLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/drawer_recycler_view"
        android:layout_width="320dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:background="@color/WhiteColor"
        android:fitsSystemWindows="true"
        android:scrollbars="vertical"/>

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

As you can see, what matters is basically that you set app:layout_scrollFlags="scroll|enterAlways" for your toolbar to hide when you scroll. The RecyclerView at the bottom of the code is the one inside the DrawerLayout, the one above is the one in your main activity layout.

David Ferrand
  • 5,357
  • 1
  • 33
  • 43
Linxy
  • 2,525
  • 3
  • 22
  • 37
0

From the developers' page:

DrawerLayout acts as a top-level container for window content that allows for interactive "drawer" views to be pulled out from the edge of the window.

At first try placing the DrawerLayout as a top-level container (i.e. parent layout). Then place the CoordinatorLayout below and see what happens.

Plus you haven't added the NavigationView. Please check the fundamental instructions here.

TheoK
  • 3,601
  • 5
  • 27
  • 37
  • I know what happens, I tried it. If I put the Toolbar within the main content of the DrawerLayout (with the RecyclerView), the drawer will cover the toolbar. I would like the drawer to be below the Toolbar. Otherwise I won't see the fancy animation of the hamburger icon and arrow. But, maybe it is the way now, as all the new apps (even the Photos app etc.) simply have the drawer cover the toolbar as well? I really don't like the way the standard drower looks like, with the header covering the toolbar, as it seems to heavy weighted, but it seems to be the standard. – wujek Jun 09 '15 at 07:59
  • I am not using the NavigationView yet as I am taking it step by step and replacing the existing, custom code with the library code, and haven't come to the drawer yet. But, I am not sure if I can use it - it requires a menu, i.e. it is static what it can present, and my drawer is basically a RecyclerView whose entries come from a database, which means its content is dynamic and completely unknown at compile time. I don't know yet if the NavigationView supports this use case. – wujek Jun 09 '15 at 08:16
  • The new NavigationView is meant to go all the way to the top, including the status bar. If you want it to show lower, add empty margins at the top. – radley Jul 09 '15 at 16:36
0

Try this it should work, worked for me.

    <android.support.design.widget.CoordinatorLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                />

        </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"
           app:layout_behavior="@string/appbar_scrolling_view_behavior"
            >
          <android.support.v7.widget.RecyclerView
                 android:id="@+id/scrollingRecyclerView"
                 android:layout_width="match_parent"
                 android:layout_height="fill_parent"
        />

            <!-- The navigation drawer -->
            <FrameLayout
                android:id="@+id/right_frame"
                android:layout_height="match_parent"
                android:layout_gravity="start"/> (whatever)

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

    </android.support.design.widget.CoordinatorLayout>

Scrolling behavior must be set to the direct child of CoordinatorLayout (to DrawerLayout). This should fix your #2, #3 problems. And in case your drawer content contains recyclerView Toolbar will be again scrolled off the screen.

Tiko
  • 990
  • 7
  • 18
0

Its been a long time now but I believe it still helps someone. Drawer Layout must have one child layout. According to android docs it must be FrameLayout because the XML order implies z-ordering and the drawer must be on top of the content. Visit below link.

Creating a Navigation Drawer

Add your AppBarLayout, Toolbar, RecyclerView and all other views in FrameLayout and make it a child of Drawer Layout. Hopefully it will run.

muak
  • 189
  • 2
  • 10