How to add an image with text in menu options in Android?

Question

I'm trying to implement a customized menu option with both, text and image, which looks like this image:

Unfortunately I don't know how to implement this.

My menu.xml looks like:

<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="com.example.admin.ddcart.LIST">

    <item android:id="@+id/action_settings1"
        android:title="@string/action_settings1"
        android:orderInCategory="100" 
        app:showAsAction="never" />

    <item android:id="@+id/action_settings2"    
        android:title="@string/action_settings2"
        android:orderInCategory="100" 
        app:showAsAction="never" />

     <item android:id="@+id/action_settings3" 
         android:title="@string/action_settings3"
         android:orderInCategory="100" 
         app:showAsAction="never" />

</menu>

used this question is duplicate question of this link http://stackoverflow.com/a/28953241/5305430 — sushildlh, Aug 25 '16 at 07:55
these 2 other link which help you http://android-dev-talk.blogspot.in/2012_05_20_archive.html and http://stackoverflow.com/a/28238747/5305430 — sushildlh, Aug 25 '16 at 07:59

score 3 · Answer 1 · answered Aug 25 '16 at 07:22

If your Image is in mipmap dir then use

android:icon=@mipmap/your_image"

If your Image is in drawable dir then use

android:icon=@drawable/your_image"

for icons prefer adding four drawable each in

drawable-hdpi image size 36*36
drawable-mdpi image size 24*24
drawable-xhdpi image size 48*48
drawable-xxhdpi image size 72*72
drawable-xxxdpi image size 96*96

You can also use vector

create fine named delete.xml in drawable dir

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="24dp">
    <path android:fillColor="#FFFFFF" android:pathData="M6,19c0,1.1 0.9,2 2,2h8c1.1,0 2,-0.9 2,-2V7H6v12zM19,4h-3.5l-1,-1h-5l-1,1H5v2h14V4z"/>
</vector>

and in item tag use android:icon=@drawable/your_image"

Complete code

<item android:id="@+id/action_settings2"    
   android:title="@string/action_settings2"
   android:icon=@drawable/your_image"/>

For generation of png and vector use this plugin

Easily adjust color,size etc Create png or vector

=> generate png's off all sizes on single click

Deepak John · Answer 2 · 2016-08-25T07:59:02.940

2

Add android:icon=@drawable/your_image" in attribute to the item tag

 <item android:id="@+id/action_settings2"    
       android:title="@string/action_settings2"
       android:icon=@drawable/your_image"/>

and you need to use spinner refer these links http://www.androidhive.info/2013/11/android-working-with-action-bar/

https://developer.android.com/guide/topics/ui/controls/spinner.html

edited Aug 25 '16 at 07:59

answered Aug 25 '16 at 07:07

Deepak John

967
1
7
19

score 2 · Answer 3 · answered Aug 25 '16 at 07:49

This way you can set icon to menu

http://keepsafe.github.io/2014/11/19/building-a-custom-overflow-menu.html

public void onClick(View v) {
    PopupMenu popupMenu = new PopupMenu(mContext, v);
    popupMenu.inflate(R.menu.album_overflow_menu);

    // Force icons to show
    Object menuHelper;
    Class[] argTypes;
    try {
        Field fMenuHelper = PopupMenu.class.getDeclaredField("mPopup");
        fMenuHelper.setAccessible(true);
        menuHelper = fMenuHelper.get(popupMenu);
        argTypes = new Class[] { boolean.class };
        menuHelper.getClass().getDeclaredMethod("setForceShowIcon", argTypes).invoke(menuHelper, true);
    } catch (Exception e) {
        // Possible exceptions are NoSuchMethodError and NoSuchFieldError
        //
        // In either case, an exception indicates something is wrong with the reflection code, or the 
        // structure of the PopupMenu class or its dependencies has changed.
        //
        // These exceptions should never happen since we're shipping the AppCompat library in our own apk, 
        // but in the case that they do, we simply can't force icons to display, so log the error and
        // show the menu normally.

        Log.w(TAG, "error forcing menu icons to show", e);
        popupMenu.show();
        return;
    }

    popupMenu.show();
}

Output

score 1 · Answer 4 · answered Mar 10 '19 at 09:55

<?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">

    <item android:id="@+id/setting"
        android:title="Setting"
        android:icon="@drawable/ic_settings_black_24dp"/>

    <item android:id="@+id/profile"
        android:title="Profile"
        android:icon="@drawable/ic_account_circle_black_24dp"/>

    <item android:id="@+id/chat"
        android:title="Chat"
        android:icon="@drawable/ic_chat_black_24dp"/>
</menu>

Welcome to Stack Overflow. Could you please describe how the provided code solves the question? — tshimkus, Mar 10 '19 at 10:10

score 0 · Answer 5 · answered Aug 29 '16 at 11:53

Simply add the images as icon variable in the items of menu.

 <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <group
            android:id="@+id/menu_top"
            android:checkableBehavior="single"
            >
            <item
                android:checked="true"
                android:id="@+id/drawer_gmail"
                android:icon="@drawable/gmail"
                android:title="Gmail"/>
            <item
                android:id="@+id/bluetooth"
                android:icon="@drawable/bluetooth"
                android:title="Bluetooth" >
            </item>
...
</group>


</menu>

score 0 · Answer 6 · answered Aug 29 '16 at 12:18

You can simply set a listview in the "menu" then by java code create a special adapter to inflate the "text and image together layout". Create a layout which contains a imageview and textview, use your special adapter to inflate and to transfer the result to listview so you will have a menu as how you wish.

If you have a error during doing these comment below..

How to add an image with text in menu options in Android?

6 Answers6