Android design library CoordinatorLayout, AppBarLayout and DrawerLayout

wujek picture wujek · Jun 8, 2015 · Viewed 13.2k times · Source

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?

Answer

mtazamaji picture mtazamaji · Oct 29, 2015

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>