Is there any way to add icon in overflow menu item?

Question

I'm using overflow menu in basic Navigation Drawer.

And I want to display icon and text at menu item.

But whatever I do doesn't work.

These are the ways I tried in menu.xml code.

First, It's an ordinary way to put 'android:icon' overflow_menu.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MovieList">
    <item
        android:id="@+id/menu_movie"
        android:orderInCategory="150"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="setting1"
        app:showAsAction="never" />
    <item
        android:id="@+id/menu_gallery"
        android:orderInCategory="150"
        android:title="setting2"
        android:icon="@drawable/ic_search_black_24dp"
        app:showAsAction="never" />

    <item
        android:id="@+id/settings3"
        android:orderInCategory="150"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="setting2"
        app:showAsAction="never" />
</menu>

Second, Using 'android:actionLayout=""' code

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MovieList">
    <item
        android:id="@+id/menu_movie"
        android:orderInCategory="150"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="setting1"
        android:actionLayout="@layout/overflow_menu_title"
        app:showAsAction="never" />
    <item
        android:id="@+id/menu_gallery"
        android:orderInCategory="150"
        android:title="setting2"
        android:icon="@drawable/ic_search_black_24dp"
        android:actionLayout="@layout/overflow_menu_title"
        app:showAsAction="never" />

    <item
        android:id="@+id/settings3"
        android:orderInCategory="150"
        android:icon="@drawable/ic_search_black_24dp"
        android:actionLayout="@layout/overflow_menu_title"
        android:title="setting2"

        app:showAsAction="never" />
</menu>

overflow_menu_title.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center_vertical"
    android:padding="2dp"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark">

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_15"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MOVIE"
        android:textSize="24dp"/>
</LinearLayout>

I tried to any way but everyting failed.

I don't know why I can't put an icon in it.

please help me...

thank you.

Answer 1

Try to use a PopupMenu with your overflow_menu.xml.

Create a function in your activity to initialize the popup:

private void setupPopupMenu() 
{
    ImageButton menuButton = (ImageButton) findViewById(R.id.menu_button)

    PopupMenu popupMenu = new PopupMenu(this, menuButton);
    popupMenu.inflate(R.menu.overflow_menu);
    popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            switch (item.getItemId()) {
                case R.id.menu_movie:
                    break;
                case R.id.menu_gallery:
                    break;
                case R.id.settings3:
                    break;
                default:
                    return false;
            }
            return true;
        }
    });
}

Then call this function in your onCreate method.

If you are using a default Toolbar or the default ActionBar from the Android theme you may want to implement your custom Toolbar layout:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:orientation="horizontal">

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center|start"
        android:text="Title"/>

    <ImageButton
        android:id="@+id/menu_button"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="?selectableItemBackgroundBorderless"
        android:src="<your-button-image>"/>

</LinearLayout>

Also, simplify your overflow_menu like this:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MovieList">

    <item
        android:id="@+id/menu_movie"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="setting1" />

    <item
        android:id="@+id/menu_gallery"
        android:title="setting2"
        android:icon="@drawable/ic_search_black_24dp" />

    <item
        android:id="@+id/settings3"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="setting2" />
</menu>

Answer 2

You can do this programmatically in onCreateOptionsMenu() method using MenuBuilder class, and setting setOptionalIconsVisible(true)

@Override
public void onCreateOptionsMenu(@NonNull Menu menu, @NonNull MenuInflater inflater) {

    inflater.inflate(R.menu.overflow_menu, menu);

    // Force showing icons for menu items
    if (menu instanceof MenuBuilder) 
        ((MenuBuilder) menu).setOptionalIconsVisible(true);
    
}