Change the action bar settings icon color

Question

How can one change the color of the overflow icon in the action bar?

enter image description here

(The most right icon)

DO you want to change the setting icon(3 vertical dots) or the font color of each item? — Jainendra, Apr 16 '13 at 11:53
important sidenote : this is NOT a settings button, but an overflow button. the settings should be in the overflow though. — Teovald, Apr 16 '13 at 14:17

score 34 · Accepted Answer · edited Feb 03 '19 at 14:25

You can use something like this

<style name="MyTheme" parent="android:style/Theme.Holo.Light">
     <item name="android:actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>
</style>

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

in your AndroidManifest.xml

<application
    android:theme="@style/MyTheme" >

If you want to change actionBar color @style/MyActionBar

        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@color/app_theme_color</item>

        <!-- Support library compatibility -->
        <item name="background">@color/app_theme_color</item>
        <item name="android:alwaysDrawnWithCache">true</item>
        <item name="android:displayOptions">showTitle|showHome|homeAsUp</item>
        <item name="android:icon">@android:color/transparent</item>
    </style>

Then in your AndroidManifest.xml you need to refer this one inside your application tag.

    android:theme="@style/CustomActionBarTheme"

Thanks, I create my own settings icon (the same as the original - just different color) and set it as the src. — Ori Seri, Apr 16 '13 at 12:59
I don't fully understand android yet, so excuse me if I am misunderstanding, but to get this to work for me, I had to put an '@' symbol in front of "MyActionButtonOverflow"'s parent. "@android:style/Widget ..." — Logan, May 12 '14 at 00:06

score 23 · Answer 2 · answered Aug 16 '17 at 12:35

23

If you just want to change the color you can simply tint it:

  <style name="DotsDarkTheme" parent="@style/Widget.AppCompat.ActionButton.Overflow" >
    <item name="android:tint">@color/yourColor</item>
  </style>

and then use it in your style:

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

answered Aug 16 '17 at 12:35

Mike Birkhoff

505
5
10

This does nothing – Code Wiget Mar 29 '20 at 18:50
1

``` ``` options menu icon is still white – Code Wiget Mar 29 '20 at 18:51

score 13 · Answer 3 · answered May 24 '19 at 23:42

13

if you are using action bar use :

        toolbar.getOverflowIcon().setColorFilter(Color.WHITE , PorterDuff.Mode.SRC_ATOP);

answered May 24 '19 at 23:42

Karem Mohamed

361
4
11

Superb, Thank You. – M Umer Feb 15 '21 at 08:02

score 2 · Answer 4 · answered Sep 19 '14 at 10:15

It's also worth adding that if you simply want to change the overflow button to a light or dark colour to go with your action bar colour this can be done without specifying a custom icon.

For a dark button colour set your theme as:

<style name="MyTheme" parent="@style/Theme.AppCompat.Light">
    <item name="android:actionBarStyle">@style/MyTheme.ActionBar</item>
</style>

Theme.Holo.Light

For a light button colour add DarkActionBar:

<style name="MyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/MyTheme.ActionBar</item>
</style>

Theme.Holo.Light.DarkActionBar

If, like me, you want a light button colour but you want the overflow menu to be light you can do the following:

<style name="MyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/MyTheme.ActionBar</item>
    <item name="android:actionBarWidgetTheme">@style/MyTheme.ActionBarWidget</item>
</style>
<!-- This helps the PopupMenu stick with Light theme while the ActionBar is in Dark theme -->
<style name="MyTheme.ActionBarWidget"
    parent="android:Theme.Holo.Light">
    <item name="android:popupMenuStyle">@android:style/Widget.Holo.Light.PopupMenu</item>
    <item name="android:dropDownListViewStyle">@android:style/Widget.Holo.Light.ListView.DropDown</item>
</style>

score 0 · Answer 5 · edited May 23 '17 at 12:32

You can use your custom style inside for menu item, like this

<item name="android:itemTextAppearance">@style/myCustomMenuTextApearance</item>

Define the style like this:

<style name="myCustomMenuTextApearance" parent="@android:style/TextAppearance.Widget.IconMenu.Item">
        <item name="android:textColor">@android:color/primary_text_dark</item>
</style>

Also see Change the background color of the options menu and

Android: customize application's menu (e.g background color)

score -1 · Answer 6 · answered Jul 27 '18 at 03:57

Create below style in styles.xml with parent as ActionButton Overflow widget and then use that theme in the style that you are using for that activity where toolbar is shown.

Step-1) Creating style for the actionButtonOverflow

<style name="DotsDarkTheme" parent="@style/Widget.AppCompat.ActionButton.Overflow" >
        <item name="android:tint">your color</item>
</style>

Step-2) Using this style in the activity that is using actionBar

<style name="CustomMainActivityTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="actionOverflowButtonStyle">@style/DotsDarkTheme</item>
</style>

Change the action bar settings icon color

6 Answers6

Linked