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

Answer 1

the simple solution in Kotlin:

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

Answer 2

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>

Answer 3

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>

Answer 4

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

Answer 5

For Overflow icon color change, you can just add

toolbar.setOverflowicon(getDrawable)

Answer 6

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

Answer 7

@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

Answer 8

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

Answer 9

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>

Answer 10

<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

Answer 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!

Answer 12

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

Answer 13

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

Answer 14

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>

Answer 15

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>