Change color of the overflow button on ActionBar

Question

Is it possible to change the color of the overflow button(3 vertical dots) on the action bar? If so, how do we do that? I didn't find any style for overflow button.

Thanks

Yes possible, `#fff` add it to your style. – meyasir Apr 23 '18 at 06:35 — meyasir, Apr 23 '18 at 06:35

score 72 · Accepted Answer · answered Jul 11 '12 at 07:51

72

You can change the image used for it using the following style declaration.

<style name="MyCustomTheme" parent="style/Theme.Holo">
    <item name="android:actionOverflowButtonStyle">@style/MyCustomTheme.OverFlow</item>
</style>

<style name="MyCustomTheme.OverFlow">
    <item name="android:src">@drawable/my_overflow_image</item>
</style>

And if you're using ActionBarSherlock, here's how to do it

<style name="MyCustomTheme" parent="style/Theme.Sherlock">
    <item name="android:actionOverflowButtonStyle">@style/MyCustomTheme.OverFlow</item>
    <item name="actionOverflowButtonStyle">@style/MyCustomTheme.OverFlow</item>
</style>

<style name="MyCustomTheme.OverFlow">
    <item name="android:src">@drawable/my_overflow_image</item>
</style>

answered Jul 11 '12 at 07:51

XGouchet

9,652
9
43
80

5

For some reason that did not work for me with target sdk 15, running on a Galaxy Nexus (JellyBean). The 3-dot menu button remains the same. – IgorGanapolsky Feb 04 '13 at 21:07
13

To retain the default overflow button settings (e.g. height/width, on-touch overlay graphic) and change only the icon image, add the parent to the custom overflow style: `parent="@android:style/Widget.ActionButton.Overflow"` – jokeefe Dec 10 '13 at 17:23
2

So there's no way to change the color of the "..." icon without adding an entirely new image? – VinceFior Jul 25 '14 at 23:02
@VinceFior did you figure out how to change the color besides creating a whole new image? This seems really really odd to me.. – reidisaki Feb 05 '15 at 01:20
@reidisaki No, I ended up making a new image, I'm afraid. It wasn't really that bad, but I agree it seems silly. – VinceFior Feb 07 '15 at 02:28
I also did.. I just used their dark/light versions of the ic_overflow.png – reidisaki Feb 09 '15 at 18:45
How could tf can I do this programmatically? – Josh Aug 13 '15 at 09:02
1

It picks color from textColorPrimary, so rather than writing multiple lines this single line `@android:color/white` will fix your problem. Only a small problem is that this color will be apply to the textcolor of your overflow menu also, and lots of other places of-course. – Neo Oct 08 '15 at 12:52
1

If you don't want to change the image take a look at http://stackoverflow.com/questions/35932669/how-do-i-change-the-action-bar-overflow-button-color – bitrock Mar 11 '16 at 15:36

score 34 · Answer 2 · answered Aug 18 '18 at 12:53

34

Some of these answers are serious overkill and some give limited results. The answer is much simpler. You can set it to whatever color you want, any time. Here:

toolbar.getOverflowIcon().setColorFilter(colorInt, PorterDuff.Mode.SRC_ATOP);

answered Aug 18 '18 at 12:53

Peter Griffin

634
9
13

3

Brilliant! After several hours of search it works. Instead of `colorInt` use `ContextCompat.getColor(this, R.color.gray)`. – CoolMind Aug 30 '18 at 10:35
colorInt just refers to any color referenced by its integer value – Peter Griffin Oct 08 '18 at 13:36
2

[This](https://stackoverflow.com/questions/26788464/how-to-change-color-of-the-back-arrow-in-the-new-material-theme#comment57980762_27517878) is the correct way to do it. It changes the colour of the back button too. – daka Dec 02 '18 at 19:20
3

I used `setTint` in the following manner, now that `setColorFilter` is deprecated: `.setTint(ContextCompat.getColor(this, R.color.red))` – AlvaroSantisteban Oct 16 '19 at 15:54
@AlvaroSantisteban `if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)` – YoussefDir Apr 25 '20 at 19:18
I'm sorry, but what is `toolbar`? I only have an `ActionBar`. – xjcl Sep 28 '20 at 16:07
```Toolbar toolbar = findViewById(R.id.toolbar);``` You can use a Toolbar in xml for the ActionBar by using the method ```setSupportActionBar(toolbar);``` – John Glen Oct 04 '20 at 01:50
For ```colorInt``` I used ```getResources().getColor(R.color.color)``` – John Glen Oct 04 '20 at 01:52

score 20 · Answer 3 · edited May 23 '17 at 12:18

20

XGouchet's answer is great, but just wanted to add that if you inherit from an existing style you'll get the standard padding, selected state, etc.

<style name="MyCustomTheme.OverFlow" parent="Widget.Sherlock.ActionButton.Overflow">
    <item name="android:src">@drawable/title_moreicon</item>
</style>

edited May 23 '17 at 12:18

Community

1
1

answered Mar 05 '13 at 18:27

Brian Christensen

4,906
2
14
7

1

parent="android:Widget.ActionButton.Overflow" – Alexander Sidikov Pfeif Oct 31 '14 at 14:46
for me : parent="@android:style/Widget.Holo.Light.ActionButton.Overflow" – jpprade Aug 13 '15 at 20:37

score 10 · Answer 4 · answered Sep 28 '15 at 14:06

10

If you are using AppCompat , you could derive a new custom style with the attribute android:textColorSecondaryset to the required color, and use it as the theme for your toolbar. Android: Changing the Toolbar’s text color and overflow icon color

answered Sep 28 '15 at 14:06

ben_joseph

1,440
1
14
24

3

This is in my eyes the actual way to go if you want to change the dot color without too much fuss! – Vince V. Dec 07 '15 at 12:17

score 9 · Answer 5 · answered May 10 '17 at 08:43

Other programmatically option:

        Drawable drawable = toolbar.getOverflowIcon();
        if(drawable != null) {
            drawable = DrawableCompat.wrap(drawable);
            DrawableCompat.setTint(drawable.mutate(), getResources().getColor(R.color.thecolor));
            toolbar.setOverflowIcon(drawable);
        }

Hope it helps!

score 3 · Answer 6 · answered Oct 08 '15 at 12:59

Putting images is not a great idea, because if you can change it by changing colors only then no need to use an extra image. The menu dots picks color from textColorPrimary, so rather than writing multiple lines this single line <item name="android:textColorPrimary">@android:color/white</item> will fix your problem. Only a small problem is that this color will be apply to the textcolor of your overflow menu also, and lots of other places of-course :)

It's android:textColorSecondary. – shmoula Dec 14 '15 at 12:53 — shmoula, Dec 14 '15 at 12:53

score 2 · Answer 7 · answered Aug 31 '17 at 21:37

If you are using the latest Toolbar, you have to put the statement in styles.xml, as shown in the code below:

<style name="AppToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/black</item>
</style>

score 1 · Answer 8 · answered Jun 12 '17 at 11:44

<style name="MyCustomTheme" parent="@style/Theme.AppCompat.Light">
  <item name="actionOverflowButtonStyle">@style/OverflowMenuButtonStyle</item>
</style>
<style name="OverflowMenuButtonStyle" parent="Widget.AppCompat.ActionButton.Overflow">
  <item name="android:src">@drawable/quantum_ic_more_vert_white_24</item>
</style>

Note that this is different from XGouchet's answer by removing android namespace. XGouchet's answer only works for Lollipop and higher devices while mine works for all API 7+ devices.

ref: Custom AppCompat Theme not changing Overflow icon on older devices

score 1 · Answer 9 · answered Feb 12 '18 at 17:43

just add this line in your choosen style in style.xma file

<item name="colorControlNormal">@color/white</item>

its working fine. if you use

<item name="textColorSecondary">@color/white</item>

then your other items like drawer navigation menu icons color and radio button will be affected

score 0 · Answer 10 · answered Jun 13 '18 at 19:19

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.dashboard, menu); // dashboard is xml file name
        Drawable drawable = menu.findItem(R.id.lan).getIcon();
        if (drawable != null) {
            drawable.mutate();
            drawable.setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_ATOP);
        }
        return true;
    }

It's working for me and I found it from here

score 0 · Answer 11 · answered Jan 28 '19 at 08:46

0

For Overflow icon color change, you can just add

toolbar.setOverflowicon(getDrawable)

answered Jan 28 '19 at 08:46

Navin Kumar

1,940
2
12
32

Brendon · Answer 12 · 2019-03-01T10:10:02.647

0

If you just want to get the 3 dots icon white instead of black you can simply change the theme of the toolbar to this:

 <android.support.v7.widget.Toolbar
     ...
     android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"
 />

full reference here: medium.com/the-curious-case-of-the-overflow-icon-color

edited Mar 01 '19 at 10:10

answered Mar 01 '19 at 10:03

Brendon

2,220
1
7
10

Changing the theme also change the whole application appearance that is not what people want. – Pedro Massango Apr 17 '19 at 10:01

score 0 · Answer 13 · answered Nov 22 '19 at 09:36

To change overflow icon color to color of your choice..... User them

 <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
     <item name="actionOverflowButtonStyle">@style/actionButtonOverflow</item>
</style>
 <style name="actionButtonOverflow"   parent="Widget.AppCompat.Light.ActionButton.Overflow">
    <item name="android:tint">@color/primary_dark</item>
</style>

Change color of the overflow button on ActionBar

13 Answers13

Linked

Related