How to properly design/style a Android Navigation Drawer

Jaison Brooks picture Jaison Brooks · Aug 13, 2013 · Viewed 43.7k times · Source

Im having trouble find any resources on how to properly design a standard Navigation Drawer. I've got the below XML and am looking for ways to Populate multiple listviews, change font of text in listview etc.

Im trying to design similar to some of the following designs.

enter image description here

Im looking to find documents, Guides, code, examples or some direction besides referencing me to the Design doc . Im looking for more actual code on how to properly adapt this new Android Design pattern not just idea's of how they could look.

NavDrawer

 <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
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<ListView
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:background="#ffffff"/>
 </android.support.v4.widget.DrawerLayout>

TextView

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/activatedBackgroundIndicator"
android:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Loading Content ..."
android:textAppearance="?android:attr/textAppearanceListItem"
android:textColor="#000000" />

Answer

Steve Benett picture Steve Benett · Aug 13, 2013

You can use any ViewGroup like a LinearLayout for your Drawer. It is not limited to a ListView and a FrameLayout. Because of this you can style your Drawer View like any other layout of an Activity for example. The only thing you should keep in mind is that the NavigationDrawer can have only two childs. The first is your layout for the Activity and the second is the Drawer. Feel free to style them as you like!

<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
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- YOUR DRAWER -->
<LinearLayout
    android:id="@+id/drawer_view"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="start">

    <!-- Use any Views you like -->
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#ffffff"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>