How to add line divider for menu item Android

Question

My menu item become bigger so that I want group them and make a line divider to separate each group. What should I do now ?

    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
<!--group1-->
            <item
                android:id="@+id/action_addtag"
                android:title="@string/add_hashtag_string"
                app:showAsAction="never" />
            <item
                android:id="@+id/action_block_list"
                android:title="Block"
                app:showAsAction="never" />
            <item
                android:id="@+id/action_report_list"
                android:title="Report"
                app:showAsAction="never" />
<!--group2-->
            <item
                android:id="@+id/terms"
                android:title="Terms"
                app:showAsAction="never" />
            <item
                android:id="@+id/feedback"
                android:title="FeedBack"
                app:showAsAction="never" />
<!--group3-->
            <item
                android:id="@+id/action_setting"
                android:title="Setting"
                app:showAsAction="never" />
    </menu>

Forsworn

This work for me #30625780 – Merilyn

Answer 1

All you need to do is define a group with an unique ID, I have checked the implementation if group has different id's it will create a divider.

Example menu, creating the separator:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">

<group android:id="@+id/grp1">
    <item
        android:id="@+id/navigation_item_1"
        android:checked="true"
        android:icon="@drawable/ic_home"
        android:title="@string/navigation_item_1" />
</group>

<group android:id="@+id/grp2">
    <item
        android:id="@+id/navigation_item_2"
        android:icon="@drawable/ic_home"
        android:title="@string/navigation_item_2" />
</group>

hope this helps

UPDATE

for menu item may be you can use this

    <menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <item
        android:id="@+id/action_cart"
        android:title="cart"
        android:actionLayout="@layout/cart_update_count"
        android:icon="@drawable/shape_notification"
        app:showAsAction="always"/>
</menu>

and actionLayout file will be

 <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:id="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/divider"/>

    <TextView
        android:id="@android:id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/selectableItemBackground"
        android:gravity="center_vertical"          
        android:textAppearance="?attr/textAppearanceListItemSmall"/>

</LinearLayout>

Iyar

I tried this way but i don't see line divider. Seems it does not work with the menu item, only works with drawerNavigator – Forsworn

Sorry mr @Vivid Vervet, I checked with android 4.0, 5.0 the solution not work :( – Forsworn

I changed to app:showAsAction="never", app:actionLayout="@layout/cart_update_count" – Forsworn

This works for me in Android 7.0 - worth noting that if you don't set IDs for each group then the lines don't appear, which confused me – Unseal

On older versions of Android you also need to call MenuCompat.setGroupDividerEnabled, as shown in the answer below. – Underpainting

Answer 2

Make sure to call MenuCompat.setGroupDividerEnabled(menu, true); when you inflate your menu, otherwise groups will not be separated by divider!

Example:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_activity_main, menu);

    MenuCompat.setGroupDividerEnabled(menu, true);

    return true;
}

And make sure to have different groups in your menu xml, e.g.:

    <menu>
        <group android:id="@+id/sorting" >
            <item
                android:id="@+id/action_sorting_new_old"
                android:title="@string/action_sorting_new_old"/>

            <item
                android:id="@+id/action_sorting_a_z"
                android:title="@string/action_sorting_a_z"/>
        </group>

        <group android:id="@+id/settings">
            <item
                android:id="@+id/action_settings"
                android:title="@string/action_settings"/>
        </group>
    </menu>

Epsomite

Hallelujah! This is the missing key to seemingly every other answer on the Internet! 1000x thanks. – Retina

Additionally, each group must have a id. – Quitclaim

@MuntashirAkon thank you for specifying they require an id. I spent a long time not knowing why the dividers weren't showing up. – Twibill

Answer 3

Old question, but the above answers didn't work for me (and I object to adding "groups" for single items). What did work was adding a style element as follows:

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar"> <!--  .Light.DarkActionBar"> -->
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">#17161B</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:dropDownListViewStyle">@style/PopupMenuListView</item>//<-add this
    </style>

that references

    <style name="PopupMenuListView" parent="@style/Widget.AppCompat.ListView.DropDown">
        <item name="android:divider">#dddddd</item>
        <item name="android:dividerHeight">1dp</item>
    </style>

in the same res/values/styles.xml file. Hope it helps!

Pyrethrum

For me, this adds a visible line between every two menu items, not only between the groups. – Celle

Answer 4

If you need add vertical lines in the Overflow menu (the ellipses at far right):

Assuming you have added a new menu resource file, do the following.

1. Group menu items and assign a unique ID to each group

   <group android:id="@+id/group1">
     <item
        android:id="@+id/action_about"
        android:orderInCategory="100"
        android:title="@string/about"
        app:showAsAction="never" />
    </group>
   
   <group android:id="@+id/group2">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="200"
        android:title="@string/settings"
        app:showAsAction="never" />
   </group>
   

2. When you inflate the menu in the Activity's oncreate method:

   getMenuInflater().inflate(R.menu.main, menu);//inflate menu
   
   MenuCompat.setGroupDividerEnabled(menu, true);//add horizontal divider
   

Candleberry

Answer 5

For Android SDK 28+:

1. Add a group with id (!) to xml menu file for devide.

<group android:id="@+id/id_0">
   ...
</group>

2. Add line code.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
   ...
   menu.setGroupDividerEnabled( true ); // this line
   ...
}

Jez

Answer 6

This works perfectly for me...

<item
    android:title="@string/divider"
    MetaJsoup:showAsAction="ifRoom|withText" />
    
<string name="divider">-------------</string>

Aleedis

no such tag for menus – Haslam

Answer 7

For me the space is valuable, so I just put an unused "-----------" divider string. Later if needed I can change the ID and the text and handler a new menu choice. This is the correct way because my apps have only two requirements...Everything and Anything. I get more change/additions request in a week than most programmers get in a month.

 <item
    android:id="@+id/actions_divider1"
    android:orderInCategory="200"
    android:title="-------------------"
    app:showAsAction="never"></item>

Topfull