AppCompat Toolbar: Change Overflow Icon Color in ActionMode

Question

With the AppCompat Toolbar, I want to be able to change the color of the overflow menu icon on ActionMode change.

For example, the overflow icon will be white in normal Toolbar mode. And will turn black on ActionMode. So far, I have managed to change the background of the action mode as well as the title text. But I have yet to find a way to change the overflow menu icon color.

I know that there's an answer available: Change ActionMode Overflow icon

I tried the first solution and I wasn't able to find the overflow icon.

The second solution, even with a 50L delay causes the overflow menu icon to flash the ActionMode's intended color for a brief split second that is very jarring.

Solution 1

Add the below line into your theme attribute:

<item name="android:textColorSecondary">@android:color/white</item>

Solution 2

This can be achieved by setting the android:textColorSecondary theme attribute.

For example, suppose you have the following toolbar, which uses the theme MyToolbarStyle:

<android.support.v7.widget.Toolbar
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/main_toolbar"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:minHeight="?attr/actionBarSize"
  theme="@style/MyToolbarStyle"
/>

Next, define the style MyToolbarStyle, inheriting from ThemeOverlay.AppCompat.ActionBar. Finally, modify the color of the overflow icon by adding an item for android:textColorSecondary:

<style name="MyToolbarStyle" parent="ThemeOverlay.AppCompat.ActionBar">
  <item name="android:textColorSecondary">#333333</item>
</style>

Solution 3

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
     <item name="android:actionOverflowButtonStyle">@style/ActionButton.Overflow.Icon</item>
 </style>

 <style name="ActionButton.Overflow.Icon" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
     <item name="android:src">@mipmap/yourwanticon</item>
 </style>

Solution 4

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:actionOverflowButtonStyle">@style/ActionButtonOverflow</item>

    <!-- Support library compatibility -->
    <item name="actionOverflowButtonStyle">@style/ActionButtonOverflow</item>
</style>

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

Solution 5

Add this code on your res->styles.xml

<style name="ToolbarColored" parent="AppTheme">
<item name="android:textColorSecondary">YOUR_COLOR</item>
</style>

Then your 'ToolbarColored' style in your XML file like belove

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:theme="@style/ToolbarColored"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

View more solutions

Comments

[thisbytes]

Hi. thanks for answering... But the problem was that the overflow icon menu color is shared by the ActionMode's overflow icon and the Toolbar's overflow icon. The goal was to have a different color for both.

[Piyush]

I don't know i have also second solution please check this link stackoverflow.com/questions/26671677/…

[Stan Mots]

Beware, this will also change the text colour in the bottom menu (which is shown by pressing the special key) on some devices. This can be a problem if textColorSecondary and the menu background are set to the same (or similar) colour.

[Ariq]

Bette approach would be by creating a separate style for it: <style name="ToolbarTheme" parent="AppTheme.MyTheme"> <item name="android:textColorSecondary">@android:color/white</item‌​> </style>

[Thunder Dragon]

Thanks. This helped me a lot. How to do it if the menu item contains actionLayout?

[Daniel]

The only answer works perfectly not changing text color or menu items color - only overflow menu icon.

[xiawi]

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.

[Sver]

This will not result in a different colors in action mode and normal toolbar.

[Bukunmi]

Best solution so far.