Change color of the overflow button on ActionBar

H

15

67

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

Hydrodynamics answered 11/7, 2012 at 4:39 Comment(1)

Yes possible, <item name="colorControlNormal">#fff</item> add it to your style. – Becket 23/4, 2018 at 6:35

S

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>

Saxecoburggotha answered 11/7, 2012 at 7:51 Comment(9)

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. – Jeopardous 4/2, 2013 at 21:7

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" – Urethrectomy 10/12, 2013 at 17:23

So there's no way to change the color of the "..." icon without adding an entirely new image? – Gibson 25/7, 2014 at 23:2

@Gibson did you figure out how to change the color besides creating a whole new image? This seems really really odd to me.. – Scope 5/2, 2015 at 1:20

@Scope No, I ended up making a new image, I'm afraid. It wasn't really that bad, but I agree it seems silly. – Gibson 7/2, 2015 at 2:28

I also did.. I just used their dark/light versions of the ic_overflow.png – Scope 9/2, 2015 at 18:45

How could tf can I do this programmatically? – Chalybeate 13/8, 2015 at 9:2

It 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. – Harkness 8/10, 2015 at 12:52

If you don't want to change the image take a look at #35933169 – Apfelstadt 11/3, 2016 at 15:36

A

41

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);

Advancement answered 18/8, 2018 at 12:53 Comment(9)

Brilliant! After several hours of search it works. Instead of colorInt use ContextCompat.getColor(this, R.color.gray). – Zerk 30/8, 2018 at 10:35

colorInt just refers to any color referenced by its integer value – Advancement 8/10, 2018 at 13:36

This is the correct way to do it. It changes the colour of the back button too. – Koah 2/12, 2018 at 19:20

I used setTint in the following manner, now that setColorFilter is deprecated: .setTint(ContextCompat.getColor(this, R.color.red)) – Marsupial 16/10, 2019 at 15:54

@Marsupial if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) – Coorg 25/4, 2020 at 19:18

I'm sorry, but what is toolbar? I only have an ActionBar. – Leisured 28/9, 2020 at 16:7

Toolbar toolbar = findViewById(R.id.toolbar); You can use a Toolbar in xml for the ActionBar by using the method setSupportActionBar(toolbar); – Tuba 4/10, 2020 at 1:50

For colorInt I used getResources().getColor(R.color.color) – Tuba 4/10, 2020 at 1:52

This only works if you replace the default ActionBar with a Toolbar. – Bevy 8/10, 2021 at 9:12

L

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>

Liqueur answered 5/3, 2013 at 18:27 Comment(2)

parent="android:Widget.ActionButton.Overflow" – Infect 31/10, 2014 at 14:46

for me : parent="@android:style/Widget.Holo.Light.ActionButton.Overflow" – Bk 13/8, 2015 at 20:37

U

11

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!

Ushas answered 10/5, 2017 at 8:43 Comment(0)

D

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

Delano answered 28/9, 2015 at 14:6 Comment(1)

This is in my eyes the actual way to go if you want to change the dot color without too much fuss! – Trying 7/12, 2015 at 12:17

H

3

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 :)

Harkness answered 8/10, 2015 at 12:59 Comment(1)

It's android:textColorSecondary. – Gadroon 14/12, 2015 at 12:53

T

2

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>

Trait answered 31/8, 2017 at 21:37 Comment(0)

T

2

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>

Thrombophlebitis answered 22/11, 2019 at 9:36 Comment(0)

S

1

<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

Syphilis answered 12/6, 2017 at 11:44 Comment(0)

B

1

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

Bali answered 12/2, 2018 at 17:43 Comment(0)

U

0

@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

Ursel answered 13/6, 2018 at 19:19 Comment(1)

Isn't that only for menu items ? – Bevy 8/10, 2021 at 9:41

E

0

For Overflow icon color change, you can just add

toolbar.setOverflowicon(getDrawable)

Eternize answered 28/1, 2019 at 8:46 Comment(0)

S

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

Staceystaci answered 1/3, 2019 at 10:3 Comment(1)

Changing the theme also change the whole application appearance that is not what people want. – Geelong 17/4, 2019 at 10:1

L

0

Material3 toolbar setup:

<style name="Theme.Custom" parent="Theme.Material3.DayNight">
    <item name="toolbarStyle">@style/ToolbarStyle</item>
</style>

<style name="ToolbarStyle" parent="Widget.Material3.Toolbar">
    <item name="android:background">@color/material3_primary</item>
    <item name="titleTextColor">@color/white</item>
    <item name="navigationIcon">@drawable/back_arrow</item>
    <item name="theme">@style/ToolbarTheme</item>
</style>

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

Legumin answered 6/9, 2023 at 15:31 Comment(0)

G

0

the simple solution in Kotlin:

    val toolbar: androidx.appcompat.widget.Toolbar? = findViewById(R.id.tbMenu)
    setSupportActionBar(toolbar)
    toolbar?.overflowIcon?.setTint(getColor(R.color.white))

Goethite answered 29/9, 2023 at 10:9 Comment(0)

Recommended topics

Hot tags