Divider in Navigation Drawer using a xml menu

Question

I've been following the latest (?) tutorial of how to implement a Material Design Navigation Drawer side by side with this blogpost.

Instead of populating a list view it uses a menu resource (xml). Very neat and easy, but..

I can't figure out how to add dividers between menu items. Image from Material Design spec: enter image description here

menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
   <group android:checkableBehavior="single">
      <item
         android:id="@+id/item_1"
         android:checked="true"
         android:icon="@android:drawable/ic_menu_info_details"
         android:title="Item1"
      />
      <item
         android:id="@+id/item_2"
         android:icon="@android:drawable/ic_menu_agenda"
         android:title="Item2"
      />
      <item
         android:id="@+id/item_3"
         android:icon="@android:drawable/ic_menu_mapmode"
         android:title="Item3"
      />
      <item
         android:id="@+id/item_4"
         android:icon="@android:drawable/ic_menu_help"
         android:title="Item4"
      />
   </group>
</menu>

I have tried dividing by groups, but it gives me no divider. When I added a submenu, I got a divider but also an unwanted header.

Like this:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <group android:checkableBehavior="single">
    <item
      android:id="@+id/item_1"
      android:checked="true"
      android:title="Header1"
    >
      <menu>
        <item
          android:id="@+id/item_2"
          android:icon="@android:drawable/ic_menu_agenda"
          android:title="SubItem1"
        />
      </menu>
    </item>
    <item
      android:id="@+id/item_2"
      android:icon="@android:drawable/ic_menu_agenda"
      android:title="Item2"
    />
    <item
      android:id="@+id/item_3"
      android:icon="@android:drawable/ic_menu_mapmode"
      android:title="Item3"
    />
    <item
       android:id="@+id/item_4"
       android:icon="@android:drawable/ic_menu_help"
       android:title="Item4"
    />
  </group>
</menu>

enter image description here

I want the divider, but not the header. Thanks in advance, I appreciate the help!

Hi, not sure what is the '2nd group item' (you have both unique ids and titles in the code, please refer to that =) ). I've tried having empty `title` in the Header1 but it will still push the menu down and leave allocated area for the title. — J.G.Sebring, Jul 23 '15 at 13:42
Duplicate of http://stackoverflow.com/questions/30625280/how-to-create-a-simple-divider-in-the-new-navigationview — J.G.Sebring, Jul 24 '15 at 10:14
Solution: You get dividers between groups if, and only if, you give the groups id attribute. — J.G.Sebring, Aug 24 '15 at 13:21

score 5 · Accepted Answer · edited Jan 09 '17 at 08:54

To add a divider after each menu item provide unique id to each group item as shown below

<group
    android:id="@+id/group_item_1"
    android:checkableBehavior="single">
    <item
        android:id="@+id/nav_agreement"
        android:icon="@mipmap/ic_launcher"
        android:title="Agreement" />
</group>
<group
    android:id="@+id/group_item_2"
    android:checkableBehavior="single">
    <item
        android:id="@+id/nav_aboutus"
        android:icon="@mipmap/ic_launcher"
        android:title="About Us" />
</group>
<group
    android:id="@+id/group_item_3"
    android:checkableBehavior="single">
    <item
        android:id="@+id/nav_terms"
        android:icon="@mipmap/ic_launcher"
        android:title="Terms Condition  " />
</group>
<group
    android:id="@+id/group_item_4"
    android:checkableBehavior="single">
    <item
        android:id="@+id/nav_chngpassword"
        android:icon="@mipmap/ic_launcher"
        android:title="Change Password" />
</group>
<group
    android:id="@+id/group_item_5"
    android:checkableBehavior="single">
    <item
        android:id="@+id/nav_signout"
        android:icon="@mipmap/ic_launcher"
        android:title="Sign Out" />
</group>

Thank you! The trick is to put `android:id` for the `` . Otherwise, the dividers wont appear. — dum4ll3, Apr 05 '16 at 14:52

Divider in Navigation Drawer using a xml menu

1 Answers1