How do I change the Action Bar Overflow button color

Question

First off I have read Change color of the overflow button on action bar but I'm not able to get it to work.

I just want to have a simple theme: Action bar background blue and the buttons and text white. For the list views that I have I want them to be the inverse: white background and blue text. If there is a simple way to achieve this please let me know. I have tried setting text color using a style but I cannot get the text and the buttons to be different colors so I tried setting the overflow drawable and for testing purposes I made the dots red but don't see any effect.

    <!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="actionBarStyle">@style/ActionBarStyle</item>
</style>

<style name="ActionBarStyle" parent="Widget.AppCompat.ActionBar">
    <item name="background">@color/background_blue</item>
    <item name="titleTextStyle">@style/AppTheme.ActionBar.Title</item>
    <item name="actionOverflowButtonStyle">@style/AppTheme.ActionButton.Overflow</item>
</style>

<style name="AppTheme.ActionBar.Title" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textColor">@color/white</item>
</style>

<style name="AppTheme.ActionButton.Overflow"  parent="@style/Widget.AppCompat.ActionButton.Overflow">
    <item name="android:src">@drawable/abc_ic_menu_overflow_button</item>
</style>

The overflow button that I'm using for testing

While what I see

which clearly is not using the red buttons.

I was able to use the android:textColorPrimary attribute but that has undesirable side effects.

    <style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="actionBarStyle">@style/ActionBarStyle</item>
</style>

<style name="ActionBarStyle" parent="Widget.AppCompat.ActionBar">
    <item name="background">@color/background_blue</item>
    <item name="titleTextStyle">@style/AppTheme.ActionBar.Title</item>
</style>

<style name="AppTheme.ActionBar.Title" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textColor">@color/white</item>
</style>

but then since I want a white background for my lists I end up not being able to see some text since the text and background are both white.

Thanks!

I am adding this as answer please accept it so others who face the same issue it can be helpful to them. — Jay Rathod, Mar 11 '16 at 05:17

score 41 · Accepted Answer · edited Aug 05 '20 at 17:19

I found another way to do it which does not require replacing the image!

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="actionBarTheme">@style/AppTheme.ActionBarTheme</item> <!-- used for the back arrow on the action bar -->
</style>

<style name="AppTheme.ActionBarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
    <!-- THIS is where you can color the arrow and the overflow button! -->
    <item name="colorControlNormal">@color/splash_title</item> <!-- sets the color for the back arrow -->
    <item name="actionOverflowButtonStyle">@style/actionOverflowButtonStyle</item> <!-- sets the style for the overflow button -->
</style>

<!-- This style is where you define the tint color of your overflow menu button -->
<style name="actionOverflowButtonStyle" parent="@style/Widget.AppCompat.ActionButton.Overflow">
    <item name="android:tint">@color/white</item>
</style>

It would be nice if you at least credited me when editing your outdated answer. — Mike Birkhoff, Dec 31 '17 at 15:57

score 25 · Answer 2 · answered Aug 16 '17 at 16:04

android:textColorSecondary did not work for me. So I tried tinting the overflow style:

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

and then use it in your style:

  <style name="YourDarkAppTheme">

    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>

    ... your appTheme


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


  </style>

(I already answered in this thread: Change the action bar settings icon color But this was my first hit on Google when searching for an answer)

score 7 · Answer 3 · answered Jul 12 '16 at 16:44

There is a way that can solve it easier, for example if we want white color of title letter and icons of a toolbar, we can do this:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:theme="@style/MainMenu"
    app:popupTheme="@style/android:Theme.Holo.Light"/>

and in styles.xml file we can do this:

<style name="MainMenu" parent="Theme.AppCompat.NoActionBar">
    <item name="android:textColorSecondary">@color/white</item>
</style>

this android:textColorSecondary changes the color of icons in toolbar.

score 5 · Answer 4 · answered Mar 11 '16 at 05:20

5

Add actionOverflowButtonStyle in your main theme.

<style name="AppTheme" parent="Theme.AppCompat.Light">
 <item name="actionBarStyle">@style/ActionBarStyle</item>
 <item name="actionOverflowButtonStyle">@style/AppTheme.ActionButton.Overflow</item>
</style>

It's Done.

answered Mar 11 '16 at 05:20

Jay Rathod

11,131
6
34
58

1

What is `ActionBarStyle` and `AppTheme.ActionButton.Overflow`? – testing Nov 08 '18 at 13:03

How do I change the Action Bar Overflow button color

4 Answers4

Linked