How to change the color of the action bar overflow button

Question

At first I read the Change the color of the overflow button on the action bar , but I cannot get it to work.

I just want to have a simple theme: Action bar background blue and the buttons and text are white. For the list views that I have, I want them to be inverse: white background and blue text. If there is an easy way to achieve this, please let me know. I tried setting the color of the text using the style, but I can’t get the text and buttons for different colors, so I tried to set the overflow for output and for testing. I made the dots red, but I see no 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 use for testing

While i see

which clearly does not use red buttons.

I was able to use the android: textColorPrimary attribute, but has unwanted 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 get no way to see any text, since the text and background are white.

Thank!

Answer 1

I found another way to do this without requiring an image replacement!

 <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="OverflowButtonStyle">@style/overflowButtonStyle</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> 

Answer 2

android: textColorSecondary did not work for me. So I tried to tint 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 color of the action bar settings icon But this was my first hit on Google when searching for an answer)

Answer 3

There is a way that can solve it easier, for example, if we want the title bar and toolbar icons to be white, 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 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 the toolbar icons.

Answer 4

Add actionOverflowButtonStyle to 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> 

Done.