How to display menu item with icon and text in AppCompatActivity

Question

I tried different combinations in xml file:

<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">
    <item
        android:id="@+id/action_create_alarm"
        android:icon="@drawable/ic_action_accept"
        android:orderInCategory="100"
        android:title="@string/menu_create_alarm"
        app:showAsAction="ifRoom|withText" />
</menu>

or

<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">
    <item
        android:id="@+id/action_create_alarm"
        android:icon="@drawable/ic_action_accept"
        android:orderInCategory="100"
        android:title="@string/menu_create_alarm"
        app:showAsAction="always|withText" />
</menu>

or

<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">
    <item
        android:id="@+id/action_create_alarm"
        android:icon="@drawable/ic_action_accept"
        android:orderInCategory="100"
        android:title="@string/menu_create_alarm"
        app:showAsAction="withText" />
</menu>

or

<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">
    <item
        android:id="@+id/action_create_alarm"
        android:icon="@drawable/ic_action_accept"
        android:orderInCategory="100"
        android:title="@string/menu_create_alarm"
        android:showAsAction="always|withText" />
</menu>

I tried to set it programmaticly

@Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater){
        MenuItem item = menu.add(R.string.menu_create_alarm);
        item.setShowAsAction(MenuItem.SHOW_AS_ACTION_WITH_TEXT|MenuItem.SHOW_AS_ACTION_IF_ROOM);
        item.setIcon(R.drawable.ic_action_accept);
        item.setOnMenuItemClickListener(
            new OnMenuItemClickListener(){

                @Override
                public boolean onMenuItemClick(MenuItem item){
                    saveAlarm();
                    return true;
                }
            }
        );


//      inflater.inflate(R.menu.menu_create_alarm, menu);
        super.onCreateOptionsMenu(menu, inflater);

    }

or

<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">
    <item
        android:id="@+id/action_create_alarm"
        android:icon="@drawable/ic_action_accept"
        android:orderInCategory="100"
        android:title="@string/menu_create_alarm"
        android:showAsAction="always|withText"
        app:showAsAction="always|withText" />
</menu>

However, Only Icon appears. And there is planty of room, cause I did not set toolbar title. Removing menues and replasing them with button inside toolbar is not sutable.
How to display text?

http://stackoverflow.com/questions/14932216/action-bar-sub-menu-item-with-text-and-image-not-working-properly — vab, Oct 06 '15 at 11:57
@vab yo make link to answers, with solution already listed and not working — Yarh, Oct 06 '15 at 12:01
May be this could help clear the picture http://stackoverflow.com/a/12225863/2819262 — PunitD, Oct 06 '15 at 12:19

score 30 · Answer 1 · answered Jan 10 '17 at 13:04

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
//        getMenuInflater().inflate(R.menu.menu_patient_home_screen, menu);


        menu.add(0, 1, 1, menuIconWithText(getResources().getDrawable(R.mipmap.user_2), getResources().getString(R.string.action_profile)));
        menu.add(0, 2, 2, menuIconWithText(getResources().getDrawable(R.mipmap.add_user), getResources().getString(R.string.action_add_user)));
        menu.add(0, 3, 3, menuIconWithText(getResources().getDrawable(R.mipmap.switch_profile), getResources().getString(R.string.action_switch_profile)));
        menu.add(0, 4, 4, menuIconWithText(getResources().getDrawable(R.mipmap.logout), getResources().getString(R.string.action_sign_out)));
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        switch (item.getItemId()) {
            case 1:
                Toast.makeText(PatientHomeScreen.this, "Profile is Clicked", Toast.LENGTH_SHORT).show();
                return true;
            case 2:
                Toast.makeText(PatientHomeScreen.this, "Add New User is Clicked", Toast.LENGTH_SHORT).show();
                return true;
            case 3:
                Toast.makeText(PatientHomeScreen.this, "Switch Profile is Clicked", Toast.LENGTH_SHORT).show();
                return true;
            case 4:
                Toast.makeText(PatientHomeScreen.this, "Sign Out is Clicked", Toast.LENGTH_SHORT).show();
                return true;
        }

        return super.onOptionsItemSelected(item);
    }

    private CharSequence menuIconWithText(Drawable r, String title) {

        r.setBounds(0, 0, r.getIntrinsicWidth(), r.getIntrinsicHeight());
        SpannableString sb = new SpannableString("    " + title);
        ImageSpan imageSpan = new ImageSpan(r, ImageSpan.ALIGN_BOTTOM);
        sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        return sb;
    }

Hope this will help you

Above solution works good, If you are working in Fragment you need to change only one thing, change onCreateOptionsMenu(Menu menu) with onCreateOptionsMenu(Menu menu, MenuInflater inflater). and add setHasOptionsMenu(true) in onCreate(Bundle savedInstanceState) or View onCreateView(LayoutInflater inflater....) — Rajan Maurya, Dec 15 '17 at 08:52

score 25 · Answer 2 · edited May 14 '18 at 18:37

You need to add tools:context="your class" to menu tag

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=".activities.BaseActivity">


   <item
       android:id="@+id/action_notification1"
       android:icon="@drawable/three"
       android:title="action_notification"
       app:showAsAction="always">
       <menu>
           <item
               android:id="@+id/profile"
               android:icon="@drawable/profile"
               android:orderInCategory="100"
               android:title="PROFILE" />

           <item
               android:id="@+id/c"
               android:icon="@drawable/correct_tick"
               android:orderInCategory="100"
               android:title="COMPLETED TRIPS" />

           <item
               android:id="@+id/app"
               android:icon="@drawable/report_issue"
               android:orderInCategory="100"
               android:title="REPORT ISSUES" />
           <item
               android:id="@+id/r"
               android:icon="@drawable/correct_tick"
               android:orderInCategory="100"
               android:title="REACHED CENTER" />


           <item
               android:id="@+id/pdf"
               android:icon="@drawable/pdf_image"
               android:orderInCategory="100"
               android:title="BAG INFO" />
           <item
               android:id="@+id/l"
               android:icon="@drawable/logout"
               android:orderInCategory="100"
               android:title="LOGOUT" />
       </menu>
   </item>


</menu>

Override onCreateOptionsMenu() Method

@Override 
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu); 
    menu.getItem(0).getSubMenu().getItem(3).setVisible(false);
    menu.getItem(0).getSubMenu().getItem(4).setVisible(true);
    return super.onCreateOptionsMenu(menu);
}

You should write tool:context to menu tag then run you will get icons before your text.

score 25 · Answer 3 · edited May 23 '17 at 12:26

25

Adding to the answer from dev_ry, there is a much smoother way without using reflection by just casting and suppressing the restricted API warning:

import android.support.v7.view.menu.MenuBuilder;

@SuppressLint("RestrictedApi")
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    if (menu instanceof MenuBuilder) {
        ((MenuBuilder) menu).setOptionalIconsVisible(true);
    }
    getMenuInflater().inflate(R.menu.menu, menu);
    return super.onCreateOptionsMenu(menu);
}

edited May 23 '17 at 12:26

Community

1
1

answered Apr 14 '17 at 12:15

Maxr1998

1,179
14
22

2

Simple but powerful solution. – Ahamadullah Saikat May 04 '19 at 10:06
1

saved my day bro :-) – Nikunj Paradva Sep 15 '20 at 10:56

score 13 · Answer 4 · answered Feb 19 '16 at 07:02

13

protected boolean onPrepareOptionsPanel(View view, Menu menu) {
    if (menu != null) {
        if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
            try {
                Method m = menu.getClass().getDeclaredMethod(
                        "setOptionalIconsVisible", Boolean.TYPE);
                m.setAccessible(true);
                m.invoke(menu, true);
            } catch (Exception e) {
                Log.e(getClass().getSimpleName(),
                        "onMenuOpened...unable to set icons for overflow menu",
                        e);
            }
        }
    }
    return super.onPrepareOptionsPanel(view, menu);
}

answered Feb 19 '16 at 07:02

Ravi Yadav

2,296
3
25
32

When my class extended Activity, this worked form me: http://stackoverflow.com/a/22288914/555762. But when i changed my class to extend AppCompatActivity, previous solution stoped working and this answer saved my day =) – Uroš Podkrižnik Aug 16 '16 at 07:40
Thanks a lot for this. Any change we need to make in proguard? – Atul Jan 17 '17 at 06:44
1

@Atul I have not tested it for proguard but dont think that progurad need some changes because of this. – Ravi Yadav Jan 17 '17 at 06:47
Tried everything else to get both the icon and text to display in the drop-down menu. This worked which also gave an error which was resolved by adding @SuppressLint("RestrictedApi") before the method as per https://stackoverflow.com/questions/41150995/appcompatactivity-oncreate-can-only-be-called-from-within-the-same-library-group – Mickey D Apr 28 '18 at 13:34

score 11 · Accepted Answer · answered Mar 01 '20 at 12:15

You can use following code for establishing your purpose. No need to make it programmatic. You can trick in menu.xml file.

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

<item
    android:id="@+id/overflowMenu"
    android:icon="@drawable/ic_more_vert_white_24dp"
    android:title=""
    app:showAsAction="always">

    <menu>
        <item
            android:id="@+id/menuWithIconText"
            android:icon="@drawable/chosen_icon"
            android:title="@string/menu_item_title"
            />
    </menu>
</item>

In above code, we've used menu inside of item. In inside menu, we've defined our overflow menu which we want with icon. Just remember to use app:showAsAction="always" in outside item tag.

I don't have such a drawable in my project and when i add it it says that it's not found. — SubqueryCrunch, Feb 23 '21 at 13:21
@SubqueryCrunch drawable is folder where you save icons. Basically in drawable folder you keep all your assets. Please check your assets folder and select it in android:icon attribute. — Rohit Sawai, Feb 27 '21 at 13:11

string.Empty · Answer 6 · 2016-03-28T20:05:48.437

10

xml:

<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">
    <item
        android:id="@+id/action_create_alarm"
        android:icon="@drawable/ic_action_accept"
        android:orderInCategory="100"
        android:title="@string/menu_create_alarm"
        android:showAsAction="always|withText"
        app:showAsAction="always|withText" />
</menu>

java:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    new MenuInflater(this).inflate(R.menu.menu_frg_safetybox, menu);
    super.onCreateOptionsMenu(menu, inflater);
}

edited Mar 28 '16 at 20:05

answered Oct 06 '15 at 12:24

string.Empty

10,393
4
39
67

1

there is still no text, only icon – Yarh Oct 06 '15 at 12:27
Android decides for itself at the end of the day if it can fit or not. – string.Empty Oct 06 '15 at 12:29
how to call, new inflator in fragment? If i do @Override public void onCreateOptionsMenu(Menu menu, MenuInflater inflater){ // inflater.inflate(R.menu.menu_create_level, menu); new MenuInflater(getActivity()).inflate(R.menu.menu_create_level, menu); super.onCreateOptionsMenu(menu, inflater); }, I still have only icon – Yarh Oct 06 '15 at 12:31
As i said. if the OS decides that the text and icon are to large for the device, it will only put the icon. You would have to try a larger device. – string.Empty Oct 06 '15 at 12:36
but how is this diff from mine lol.. life on stackoverflow :) – Elltz Oct 06 '15 at 12:51

score 6 · Answer 7 · answered Oct 06 '15 at 12:42

6

'always|withText' will work if there is sufficient room, otherwise it will place only the icon.You an see that by rotating phone to landscape mode..

       <item
        android:id="@+id/action_create_alarm"
        android:icon="@drawable/ic_launcher"
        android:title="Save"
        app:showAsAction="always|withText"
        />

answered Oct 06 '15 at 12:42

Sabyasachi

3,499
2
14
21

3

that is correct. If I turn the device into landscape mode the text show up. Nevertheless I want to text is being displaying always. Although my Title in toolbar is very short ("Activity") text doesn't appear. – murt Apr 06 '16 at 14:11

score 3 · Answer 8 · answered Oct 06 '15 at 12:20

3

try these two together

app:showAsAction="always|withText"
android:showAsAction="always|withText"

answered Oct 06 '15 at 12:20

Elltz

10,730
4
31
59

there is still no text, only icon – Yarh Oct 06 '15 at 12:27
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – JohanShogun Oct 06 '15 at 19:41
2

where is the link Sir @JohanShogun – Elltz Oct 07 '15 at 02:04
This is the correct answer I don't know why it doesn't have more upvotes – Daniel Wilson Mar 07 '18 at 16:03

score 2 · Answer 9 · answered Jan 20 '20 at 13:13

MyActivity.java:

@Override
    public boolean onCreateOptionsMenu(Menu menu) 
    {
        getMenuInflater().inflate(R.menu.my_menu, menu);
        View view = menu.findItem(R.id.whats_this).getActionView();
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // do something
            }
        });
        return super.onCreateOptionsMenu(menu);
    }

my_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=".MyActivity">

    <item
        android:id="@+id/item"
        app:actionLayout="@layout/my_layout"
        android:orderInCategory="100"
        android:title="@string/whats_this"
        app:showAsAction="always" />
</menu>

my_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:paddingLeft="5dp"
        android:gravity="center_vertical"
        android:textStyle="bold"
        android:textColor="@color/white"
        android:text="@string/whats_this"/>

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/question"/>

</LinearLayout>

This is not useful at all, the question is how to display an icon next to the item when the menu unfolds — George, May 13 '22 at 07:23

How to display menu item with icon and text in AppCompatActivity

9 Answers9

Linked

Related