Navigation drawer like Google+

Question

How can I create a navigation drawer like Google+ where there is a header for user profile info and a listview below?

I have the following code in my Activity:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.br.app.MainActivity">
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <fragment android:id="@+id/navigation_drawer"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:name="com.br.app.NavigationDrawerFragment" />

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

Currently, the NavigationDrawerFragment contains just a listview, but I tried to add a RelativeLayout as a container with an inner RelativeLayout to create the profile area and the listview below, but the app is crashing.

I've read the tutorial from but as I could understand, my header would be an item of the listview, and it won't be fixed on top (without scrolling).

How can I create this custom navigation drawer like Google+?

Answer 1

You can easily customize the android Navigation drawer once you know how its implemented. here is a nice tutorial where you can set it up.

This will be the structure of your mainXML:

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

    <!-- Framelayout to display Fragments -->
    <FrameLayout
        android:id="@+id/frame_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- Listview to display slider menu -->
    <ListView
        android:id="@+id/list_slidermenu"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:choiceMode="singleChoice"
        android:divider="@color/list_divider"
        android:dividerHeight="1dp"        
        android:listSelector="@drawable/list_selector"
        android:background="@color/list_background"/>
     </android.support.v4.widget.DrawerLayout>

Answer 2

Actually, there are two version of navigation drawer used by google.

the first is the old navigation drawer BELOW the action bar. It is used in Google Play Store and Google Books for example.
HERE you can find a library that implements it.

The second is the new navigation drawer that is showed in Material Design guidelines where the drawer is over the action bar.
HERE you can find a library that implements it.

Actually these two libraries are in developing. But they are almost usable at this time.