Android NavigationView menu group divider

Question

Android support design library provide NavigationView:

 <android.support.design.widget.NavigationView
    ...
    app:menu="@menu/navigation_drawer_items" />

menu/navigation_drawer_items:

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item .../>
        ...
    </group>

    <group android:checkableBehavior="single">
        <item .../>
        ...
    </group>

</menu>

How to add divider, separator or space between groups (like on picture)?

enter image description here

score 216 · Accepted Answer · edited Jan 04 '17 at 22:13

216

Just give a unique id to each group. It will create a separator automatically.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/group_feature"
        android:checkableBehavior="single">
        <item android:id="@+id/navdrawer_item_map"
            android:checked="true"
            android:icon="@drawable/ic_drawer_map"
            android:title="@string/navdrawer_item_map"/>

    </group>
    <group android:id="@+id/group_settings"
        android:checkableBehavior="single">
        <item android:id="@+id/navdrawer_item_settings"
            android:icon="@drawable/ic_drawer_settings"
            android:title="@string/navdrawer_item_settings"/>

    </group>
</menu>

edited Jan 04 '17 at 22:13

mavrosxristoforos

3,573
2
25
40

answered Jun 18 '15 at 13:44

Moinkhan

12,732
5
48
65

4

can you tell me how add color to this line – Yaseen Ahmad Jun 09 '16 at 11:30
1

This doesn't seem to work if you have groups in different layout files. – Whome Sep 22 '16 at 01:52
1

@YaseenAhmad http://stackoverflow.com/a/30731387/3544839 to chnge the color – Moinkhan Sep 29 '16 at 05:08
Creating a group did not work for me. I did figure out that this style @drawable/menu_divider Lets you set the background for the menu item so you can create a divider for each menu item. However, I would like a divider just between groups. – Rich Morey Mar 10 '17 at 22:44
@RichMorey Creating a group doesn't work. **You have to give them an unique ID.** – Moinkhan Mar 11 '17 at 04:33
now it is not working with latest sdk? – BHAVIK Jul 21 '17 at 12:17
yeah it's working – Moinkhan Jul 21 '17 at 13:33
1

Calling MenuCompat#setGroupDividerEnabled(Menu, boolean) may still be necessary here. – sgibly Mar 19 '19 at 23:50
@sgibly this is working for ThemeOverlay.AppCompat.* Styles. Thank you! – user1908375 Mar 21 '19 at 12:17

score 12 · Answer 2 · answered Jun 18 '15 at 13:40

you do something like this.

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_dashboard"
            android:title="Home" />
        <item
            android:id="@+id/nav_messages"
            android:icon="@drawable/ic_event"
            android:title="Messages" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/ic_headset"
            android:title="Friends" />
        <item
            android:id="@+id/nav_discussion"
            android:icon="@drawable/ic_forum"
            android:title="Discussion" />
    </group>

    <item android:title="Sub items">
        <menu>
            <item
                android:icon="@drawable/ic_dashboard"
                android:title="Sub item 1" />
            <item
                android:icon="@drawable/ic_forum"
                android:title="Sub item 2" />
        </menu>
    </item>

</menu>

this code is taken from the Design Library example app made by Chris Barnes https://github.com/chrisbanes/cheesesquare

Your solution works and its add subtitle, which is nice, but question was just about separator. If I omit title, there is divider but also space where should be title. — Shaddow, Jun 18 '15 at 13:56
you dont need a title, all you have to do is give the item an id — tyczj, Jun 18 '15 at 13:57
@Shaddow see this question http://stackoverflow.com/questions/30790420/how-to-get-dividers-in-navigationview-menu-without-titles#30790420 — tyczj, Jun 18 '15 at 14:06
items from second section don't get selected with this solution — Lukasz, Feb 03 '19 at 16:58

score 11 · Answer 3 · answered Jun 18 '15 at 13:44

I'm using it this way:

<group
        android:id="@+id/group1"
        android:checkableBehavior="single">
        <item
            android:id="@+id/menu1"
            android:icon="@drawable/somedrawable"
            android:title="Lorem ipsum" />
</group>
<group
        android:id="@+id/group2"
        android:checkableBehavior="single">
        <item
            android:id="@+id/menu2"
            android:icon="@drawable/somedrawable"
            android:title="Dolor it amet" />
</group>

IDs are important (+id/group1 and +id/group2). Without ids you won't see divider. It is working in my app.

score 2 · Answer 4 · answered Oct 26 '16 at 10:29

Divider in NavigationMenuList achieved using grouping the Menu items but make sure you are giving group id @+id that is necessary. Below is working code for you

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
    android:id="@+id/gp_one"
    android:checkableBehavior="single">
    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_avatar"
        android:title="Home" />
</group>

<group
    android:id="@+id/gp_two"
    android:checkableBehavior="single">
    <item
        android:id="@+id/nav_account"
        android:icon="@drawable/ic_avatar"
        android:title="My Account" />
    <item
        android:id="@+id/nav_orders"
        android:icon="@drawable/ic_avatar"
        android:title="My Orders" />
    <item
        android:id="@+id/nav_wishlist"
        android:icon="@drawable/ic_avatar"
        android:title="My Wishlist" />
</group>

<group
    android:id="@+id/gp_three"
    android:checkableBehavior="single">
    <item
        android:id="@+id/nav_rateus"
        android:icon="@drawable/ic_avatar"
        android:title="Rate Us" />
    <item
        android:id="@+id/nav_share"
        android:icon="@drawable/ic_avatar"
        android:title="Share" />
    <item
        android:id="@+id/nav_logout"
        android:icon="@drawable/ic_avatar"
        android:title="Logout" />
</group>

For divider we'll have to divide them in separate groups ? Actually I'm using `BottomNavigationView` — Anshul Tyagi, Mar 29 '17 at 05:03

score 1 · Answer 5 · answered Jul 27 '16 at 09:53

You can add your text between <item android:title="title_name"> and </item>

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_display_image"
            android:title="Load Image"
            android:icon="@drawable/ic_menu_gallery"
            app:showAsAction="always"

            app:actionLayout="@layout/switch_nav_drawer"/>
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="Saved News" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow" />

    </group>

    <item android:title="Settings">
        <menu>
            <item
                android:id="@+id/nav_manage"
                android:icon="@drawable/ic_menu_manage"
                android:title="Tools" />
        </menu>
    </item>

    <item
        android:id="@+id/about_us"
        android:icon="@drawable/ic_info_black_24dp"
        android:title="About Us"></item>


</menu>

Android NavigationView menu group divider

5 Answers5

Linked