23

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" />
Jaison Brooks
  • 5,816
  • 7
  • 43
  • 79
  • Here's link to "Android Design in Action: Navigation Drawers" http://www.youtube.com/watch?v=F5COhlbpIbY. – Milan Aug 13 '13 at 06:11
  • How are the examples given different from *"ideas of how they could look"*? A nav drawer is often little more than a nicely styled `ListView`, so any tutorial on the latter should do. There are plenty of those 'out there', including heaps that illustrate how to use a custom layout for the row items (which will probably get you at least halfway there). – MH. Aug 13 '13 at 07:14

1 Answers1

34

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>
danb
  • 10,239
  • 14
  • 60
  • 76
Steve Benett
  • 12,843
  • 7
  • 59
  • 79
  • 2
    Are you certain that you can only have 2 children views? Don't you have the option for both a start and end drawer along with the main view? – Christopher Rucinski Sep 20 '13 at 20:59
  • 2
    @ChristopherRucinski Yeah, that's possible, but the question is about proper styling. And the docs mention that only one drawer is used in the design guide. – Steve Benett Sep 21 '13 at 08:27
  • Even if I use android:divider="@android:color/transparent" and android:dividerHeight="0dp", I still get a white line in my list view. How can I change the color of that white line? – Pria Nov 21 '13 at 06:33
  • @Pria to completely remove the divider you can set this in the xml `android:divider="@null" android:dividerHeight="0dp"`. – ntrp Dec 10 '13 at 14:13
  • Can fragments be added to the view ? – avrono Jan 12 '14 at 16:29
  • @Avrono Of course you can use Fragments for the Drawer View and for the Content View. The NavigationDrawer has no limitation of any ordinary Views. – Steve Benett Jan 12 '14 at 16:54
  • @Steve been trying for a few hours now, keep getting an "Error inflating class fragment" – avrono Jan 12 '14 at 17:19
  • @avrono It would be better to open a new question with more details to your situation – Steve Benett Jan 12 '14 at 17:38