Changing overflow icon in the action bar

Question

Is it possible to change the overflow icon in the action bar? I have blue icons for all ActionBar items and I also want to change the overflow icon when it appears.

@ShirishHerwade: That link is dead now. – Al Lelopath Mar 30 '17 at 21:25 — Al Lelopath, Mar 30 '17 at 21:25

score 258 · Accepted Answer · edited May 23 '17 at 12:17

258

You can with a style, but you have to add it to the main Theme declaration.

<resources>
    <!-- Base application theme. -->
    <style name="Your.Theme" parent="@android:style/Theme.Holo">
        <!-- Pointer to Overflow style ***MUST*** go here or it will not work -->
        <item name="android:actionOverflowButtonStyle">@style/OverFlow</item>
    </style>

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

</resources>

You also can change it dynamically, which I go into detail about here:

Changing the Android Overflow menu icon programmatically

edited May 23 '17 at 12:17

Community

1
1

answered Mar 16 '12 at 07:36

adneal

30,484
10
122
151

1

I have already found this solution looking into source code, but thanks :) It is a good answer. – pjanecze Mar 16 '12 at 07:42
6

NOTE that this is applied to the THEME, and not the STYLE. Had me stuck for a while until I realised that. Thx @aneal – Richard Le Mesurier Nov 19 '12 at 08:21
5

This will crash on tablets running Android 3.0 (API 11), because it doesn't like people defining the style "android:actionOverflowButtonStyle" (probably platform bug). So you have to use different styles in values-v11/styles.xml and values-v15/styles.xml. – Mr-IDE Dec 31 '12 at 07:24
10

And for ActionBarSherlock users, the parent style is: `parent="Widget.Sherlock.ActionButton.Overflow"` – Nick White May 31 '13 at 19:40
1

@BillMote TBH its not making sense to me either after 2 years?! I can see I upvoted adneal at the time, so he definitely helped me. I must have been reading other posts that said something else, in order to have felt like that comment meant something. Sorry I must plead the 5th, and say that maybe it meant something at the time to have received +5. Then again, votes don't count for much around here. I'm posting (as an answer) minimal code from a production app that might help. – Richard Le Mesurier Aug 18 '14 at 21:01
1

@RichardLeMesurier I figured it out. You have to include the reference to the overflow menu icon where you are declaring your theme rather than with the rest of the styles -- even the ones related to your actionbar. Simply moving it to the "Theme" section of your styles fixes the issue of it not working. That cost me a couple of hours today. I updated the answer to make it more clear. – Bill Mote Aug 18 '14 at 21:19
@BillMote so glad to hear I was making sense back in the day, even if I couldn't explain it today! Good on you for clarifying things by updating the answer. – Richard Le Mesurier Aug 18 '14 at 23:19
8

For appcompat (v21 lollipop anyway), `parent="@style/Widget.AppCompat.ActionButton.Overflow"` seems to work for me. – fattire Oct 18 '14 at 21:43

score 16 · Answer 2 · answered Mar 05 '15 at 22:35

16

For those who can't get it to work try this WITHOUT the "android:" namespace.

<item name="actionOverflowButtonStyle">@style/OverFlow</item>

answered Mar 05 '15 at 22:35

user2968401

925
3
14
27

Thanks mate, this really helped. Anyone got an explanation for this? – DaMachk Apr 07 '15 at 11:15
4

@DaMachk If you're using AppCompat, then don't include the "android:" namespace. – matiash May 26 '15 at 16:23

score 5 · Answer 3 · answered Apr 21 '15 at 10:22

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.@.@

score 5 · Answer 4 · answered Jan 11 '18 at 17:20

5

No matter what I tried to do in styles.xml, none of the solutions worked for me. In the end, if you have AppCompat 23+, which you should, this is the easiest way that actually works:

toolbar.setOverflowIcon(drawable);

answered Jan 11 '18 at 17:20

Starwave

2,352
2
23
30

Most accurate way that i have found! – Shubhamhackz Sep 04 '18 at 11:40

score 1 · Answer 5 · edited May 23 '17 at 12:02

@adneal's answer is correct (so this is just a community wiki explanation to expand on it).

One of the comments suggested that there may be misunderstanding how to do this, so my answer is just another example on how to override the Overflow icon image.

Code below is based on the template styles from the ADT sample New Android Project. The code comes from the styles.xml file in res/values folder.

<style name="AppBaseTheme" parent="android:Theme.Light">
    <!--
        Theme customizations available in newer API levels can go in
        res/values-vXX/styles.xml, while customizations related to
        backward-compatibility can go here.

    -->
</style>

<!-- 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/OverflowMenuButton</item>
</style>

<style name="OverflowMenuButton" parent="@android:style/Widget.Holo.ActionButton.Overflow">
    <item name="android:src">@drawable/ic_menu_moreoverflow</item>
</style>

What this above code does is replace the default overflow icon with whatever drawable you have that is named ic_menu_moreoverflow. If you want a quick way to test it out, use your app's launcher icon filename, which will make it obvious how it works.

A useful resource to use when trying to understand ActionBar styling, is:

Android Action Bar Style Generator

There you can define specific colours to use for your Overflow icon, and the ZIP file will include the correct styles.xml file for you.

score 1 · Answer 6 · edited Dec 29 '14 at 10:59

After long search what i got the guidance to be followed like:

Check the theme in the manifesto file.
Then go to res->values->themes.
Find the theme name in this file .

Add the item within the theme in the theme.xml:

<item name="android:actionBarWidgetTheme">@style/widgetStyle</item>
<item name="android:actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>

Add the icon in the style in the same file I mean theme.xml:

<style name="MyActionButtonOverflow" parent="android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">@drawable/icon_menu</item>
</style>

Check out the custom icon which you want to change

It worked for me

score 1 · Answer 7 · answered Jan 28 '19 at 08:49

1

For Overflow icon color change, you can just add

toolbar.setOverflowicon(getDrawable(R.id.whiteIcon));

or

toolbar.setOverflowicon(getDrawable(R.id.redIcon));

It will change the icon, choose whatever color you want and set as an Overflowicon.

answered Jan 28 '19 at 08:49

Navin Kumar

3,393
3
21
46

Changing overflow icon in the action bar

7 Answers7

Linked

Related