How to change option menu icon in the action bar?

Question

How to change the index icon of option menu?

enter image description here

I mean icon (3).

Here is my code:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.options, menu);

    return true;
}

And here is the XML file:

<item android:id="@+id/Bugreport"
    android:title="@string/option_bugreport" />

<item android:id="@+id/Info"
    android:title="@string/option_info" />

<item android:id="@+id/About"
    android:title="@string/option_about" />

score 81 · Accepted Answer · edited Jul 12 '16 at 00:56

81

The following lines should be updated in app -> main -> res -> values -> Styles.xml

 <!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    <item name="android:actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>
</style>

<!-- Style to replace actionbar overflow icon. set item 'android:actionOverflowButtonStyle' in AppTheme -->
<style name="MyActionButtonOverflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
    <item name="android:src">@drawable/ic_launcher</item>
    <item name="android:background">?android:attr/actionBarItemBackground</item>
    <item name="android:contentDescription">"Lala"</item>
</style>

This is how it can be done. If you want to change the overflow icon in action bar

edited Jul 12 '16 at 00:56

Nouman Bhatti

1,341
6
28
54

answered Oct 10 '14 at 13:37

Syed Raza Mehdi

4,067
1
31
47

@smartmouse let me know if you face any problem – Syed Raza Mehdi Oct 10 '14 at 13:38
Worked, thank you so much! What's the need of "Lala" in contentDescription? – smartmouse Oct 10 '14 at 14:41
2

you welcome, i am glad to help you and actually there is no such need for that but with every image we give description for that that is why i used it, and 'lala' means good friend in my language ;) – Syed Raza Mehdi Oct 11 '14 at 19:06
3

This also works when using [Material theme via AppCompat](https://chris.banes.me/2014/10/17/appcompat-v21/): just switch to `parent="Widget.AppCompat.ActionButton.Overflow"` in MyActionButtonOverflow. – Jonik Apr 20 '15 at 17:58
1

not working in using mipmap instead of drawable/ic_launcher.. using api 15 appcompat theme – woninana Jul 30 '15 at 07:27
1

Just tried and it doesn't work for me. No errors but the icon remains the same. – Andrea Grandi Jul 06 '16 at 10:28
Perfect!! Thank you for amazing solution... Solution still works in 2019 – AnujDeo Dec 06 '19 at 13:10
How can we change option menu icon at runtime? – AnujDeo Dec 06 '19 at 13:10
Do you know how to make it valid for just one menu file , and not for all of the menus in the app ? – Berni Apr 21 '20 at 15:53

score 64 · Answer 2 · answered Mar 04 '16 at 07:35

64

I got a simpler solution which worked perfectly for me :

Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.change_pass);
        toolbar.setOverflowIcon(drawable);

answered Mar 04 '16 at 07:35

Parth Anjaria

3,961
3
30
62

for me also it worked fine and programmatic way, we can change it any time that is the added advantage. Thanks Parth. – Swapnil May 10 '16 at 10:35
Works perfectly! Thanks. – mnrl Aug 11 '16 at 21:29
1

This is just so perfect and exactly what I was looking for. Most of people have discussed changing the icon forever for whole app. – Atul Sep 08 '16 at 19:39
doesn't work when using `val toolbar = findViewById(R.id.action_bar)` , `toolbar.overflowIcon = Util.getDrawable(R.drawable.ic_menu)`, ` – user25 Feb 02 '19 at 19:16

score 12 · Answer 3 · edited Jul 05 '16 at 12:25

1) Declare menu in your class.

private Menu menu;

2) In onCreateOptionsMenu do the following :

public boolean onCreateOptionsMenu(Menu menu) {
    this.menu = menu;
    getMenuInflater().inflate(R.menu.menu_orders_screen, menu);
    return true;
}

3) In onOptionsItemSelected, get the item and do the changes as required(icon, text, colour, background)

public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.action_search) {
        return true;
    }
    if (id == R.id.ventor_status) {
        return true;
    }
    if (id == R.id.action_settings_online) {
        menu.getItem(0).setIcon(getResources().getDrawable(R.drawable.history_converted));
        menu.getItem(1).setTitle("Online");
        return true;
    }
    if (id == R.id.action_settings_offline) {
        menu.getItem(0).setIcon(getResources().getDrawable(R.drawable.cross));
        menu.getItem(1).setTitle("Offline");
        return true;
    }

    return super.onOptionsItemSelected(item);
}

Note:
If you have 3 menu items :
menu.getItem(0) = 1 item,
menu.getItem(1) = 2 iteam,
menu.getItem(2) = 3 item

Based on this make the changes accordingly as per your requirement.

He's talking about the menu icon itself, not the menu items. — Genc, Sep 23 '16 at 09:51
Instead of menu.getItem(0), I recommend using menu.findItem(R.id.viewId) because the for the former become a mess once you have so many items and their position if you make one of the option invisible. — Aman, Jan 16 '23 at 13:00

score 10 · Answer 4 · answered Apr 04 '16 at 06:05

//just edit menu.xml file    
//add icon for item which will change default setting icon
//add sub menus


 ///menu.xml file


    <item
            android:id="@+id/action_settings"
            android:orderInCategory="100"
            android:title="@string/action_settings"
            android:icon="@drawable/your_icon"
            app:showAsAction="always" >

            <menu>

                <item android:id="@+id/action_menu1"
                    android:icon="@android:drawable/ic_menu_preferences"
                    android:title="menu 1" />

                <item android:id="@+id/action_menu2"
                    android:icon="@android:drawable/ic_menu_help"
                    android:title="menu 2" />

            </menu>
        </item>

Thanks! It works :) Just want to mention that the item of "action_settings" should be wrapped in " ... " — flame3, Jun 27 '16 at 11:00
`@string/action_settings` - there must be default android resources for this which includes all languages — user25, Feb 02 '19 at 19:27

score 5 · Answer 5 · edited May 03 '17 at 12:35

5

This works properly in my case:

Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),
                                              R.drawable.change_pass);
toolbar.setOverflowIcon(drawable);

edited May 03 '17 at 12:35

Mad Physicist

107,652
25
181
264

answered May 03 '17 at 12:02

user7957410

55
1
1

doesn't work when using `val toolbar = findViewById(R.id.action_bar)` , `toolbar.overflowIcon = Util.getDrawable(R.drawable.ic_menu)`, ` – user25 Feb 02 '19 at 19:19

score 4 · Answer 6 · answered May 10 '16 at 14:13

Use the example of Syed Raza Mehdi and add on the Application theme the name=actionOverflowButtonStyle parameter for compatibility.

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    <item name="android:actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>

    <!-- For compatibility -->
    <item name="actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>

</style>

Pravin · Answer 7 · 2014-10-10T13:38:55.347

3

you can achieve this by doing

<item
    android:id="@+id/menus"
    android:actionProviderClass="@android:style/Widget.Holo.ActionButton.Overflow"
    android:icon="@drawable/your_icon"
    android:showAsAction="always">
  <item android:id="@+id/Bugreport"
   android:title="@string/option_bugreport" />

  <item android:id="@+id/Info"
  android:title="@string/option_info" />

 <item android:id="@+id/About"
   android:title="@string/option_about" />
  </item>

edited Oct 10 '14 at 13:38

answered Oct 10 '14 at 13:27

Pravin

1,362
12
21

1

Calling that a hack is kind of misleading. That's a standard part of the Android system. – Nathan Walters Oct 10 '14 at 13:31
I'm not saying you're wrong, this is the correct answer. But it is definitely not a hack. – Nathan Walters Oct 10 '14 at 13:39

score 2 · Answer 8 · answered May 23 '19 at 02:52

this work for me, just set your xml menu like this:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:icon="@drawable/your_icon"
        android:title="menu"
        app:showAsAction="always">
        <menu>

            <item
                android:id="@+id/action_menu1"
                android:orderInCategory="1"
                android:title="menu 1" />

            <item
                android:id="@+id/action_menu2"
                android:orderInCategory="2"
                android:title="menu 2" />

        </menu>
    </item>
</menu>

score 1 · Answer 9 · answered Apr 21 '15 at 10:18

Change your custom overflow icon of Actionbar in styles.xml

 <resources>
    <!-- Base application theme. -->
    <style name=“MyTheme" parent="@android:style/Theme.Holo">
       <!-- Pointer to Overflow style DONT forget! -->
       <item name="android:actionOverflowButtonStyle">@style/MyOverFlow</item>
    </style>

    <!-- Styles -->
    <style name="MyOverFlow" parent="@android:style/Widget.Holo.ActionButton.Overflow">
        <item name="android:src">@drawable/ic_your_action_overflow</item>
    </style>
 </resources>

Put custom theme "MyTheme" in application tag of AndroidManifest.xml

<application
    android:name="com.example.android.MainApp"
    android:theme="@style/AppTheme">
</application>

Have fun.@.@

Hai Rom · Answer 10 · 2019-03-12T03:58:47.157

If you want to change icon/title menu in the actionbar/toolbar programmatically,

STEP by STEP

Declare Menu in class

private var mMenu: Menu? = null

Overide onCreateOptionsMenu method and find item so you need to change

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
mMenu = menu
menuInflater.inflate(R.menu.menu, menu)
if (mIsFavorite){
    mMenu?.findItem(R.id.action_favorite)?.icon = yourDrawable
} else {
    mMenu?.findItem(R.id.action_favorite)?.icon = yourDrawable
}
return true

}

Use invalidateOptionsMenu() to update some changes in menu after onCreateOptionsMenu executed. This method will re-create menu

score 1 · Answer 11 · answered Mar 09 '20 at 17:00

1

Check this out this may work: (in kotlin)
toolBar.menu.getItem(indexNumber).setIcon(R.drawable.ic_myIcon)

answered Mar 09 '20 at 17:00

Biplob Das

2,818
21
13

score 0 · Answer 12 · answered Feb 15 '17 at 07:02

0

An short and easy way to change color of option menu index icon is:

<!-- android:textColorSecondary is the color of the menu overflow icon (three vertical dots) -->
<item name="android:textColorSecondary">@color/optionMenuIconColor</item>

Add above line of code into style.xml (custom theme) file, Hope you get answer,Thanks.

answered Feb 15 '17 at 07:02

AMI CHARADAVA

303
3
9

Even if it works, this is a stupid thing to do; it changes the actual secondary app's text color, used in a multitude of places and widgets as a - you guessed it - text color. – Adrian Crețu Mar 22 '17 at 03:12
@Adrian Cretu yeah, that might be stupid if you weren't trying to match the text and icon color, globally. Otherwise it seems easy and very reasonable. – me_ Jul 28 '18 at 18:26
we're talking about icon, not color, and you answer will change color of many items – user25 Feb 02 '19 at 19:41

score 0 · Answer 13 · answered Sep 10 '20 at 21:30

<?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/logout"
            android:icon="@drawable/logout"
            android:title="Log Out"
            app:showAsAction="always"
        />
</menu>

This did the trick for me!

How to change option menu icon in the action bar?

13 Answers13

Linked