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.

Answer 1

Add the below line into your theme attribute:

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

Answer 2

To correctly change the color of your toolbar's overflow menu icon, set your toolbar's theme to an AppCompat dark ActionBar theme. For example:

In your res/values/style.xml file create a theme that inherits from AppCompat in this manner:

<style name="AppTheme.MyThemeName" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

Now set your toolbar's theme to this theme:

<android.support.v7.widget.Toolbar
  android:id="+id/my_toolbar_id
  android:layout_width="match_parent"
  android:layout_height="@dimen/my_toolbar_height"
  android:theme="@style/AppTheme.MyThemeName">

</android.support.v7.widget.Toolbar>

Answer 3

First make your custom style

 <style name="ToolbarColoredBackArrow" parent="AppTheme">
    <item name="android:textColorSecondary">@color/white</item>
 </style>

Then just add it into your toolbar

     <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:titleTextColor="@color/white"
          app:theme="@style/ToolbarColoredBackArrow"
          android:layout_height="?attr/actionBarSize"
          app:layout_scrollFlags="scroll|enterAlways"
          android:background="?attr/colorPrimary" />

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

Answer 5

If you are using the toolbar in your activity xml you can use something like this

toolbar?.navigationIcon?.setColorFilter(ContextCompat.getColor(this, android.R.color.black), PorterDuff.Mode.SRC_ATOP)

Answer 6

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" />

Answer 7

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="actionOverflowButtonStyle">@style/CustomOverflowButtonStyle</item>
</style>
<style name="CustomOverflowButtonStyle" parent="Widget.AppCompat.ActionButton.Overflow">
    <item name="android:tint">@color/black</item>
</style>

Answer 8

If you want the white overflow menu icon simply add android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" to your Toolbar layout code.

If you want the dark overflow menu icon use android:theme="@style/Base.Widget.AppCompat.Light.PopupMenu"

So final code is something like:

<android.support.v7.widget.Toolbar
        android:id="@+id/a_main_tb"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:title="@string/app_name"
        app:titleTextColor="#ffffff"
        />

Also, you should understand that it will change the color of the menu items also.

Answer 9

None of the answers here helped me change the overflow icon color of ActionMode independently from the overflow icon color of the normal Toolbar (without resorting to case-by-case styling in code). After some trial and error, I thought that we might override theme attribute of ActionMode independently from Toolbar, and it worked!

In the base theme, we specify the style of action mode like usual:

<style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.Bridge">
        <item name="actionModeStyle">@style/ActionModeStyle</item>
</style>

In our custom ActionModeStyle we do whatever styling we want, and also specify a theme attribute:

<style name="ActionModeStyle" parent="@style/Widget.AppCompat.ActionMode">
        <item name="theme">@style/ActionMode.Theme</item>
</style>

<style name="ActionMode.Theme" parent="ThemeOverlay.AppCompat.Dark">
        <item name="android:textColorSecondary">?attr/colorPrimary</item>
</style>

textColorSecondary will also change the back button color, but we can easily override that one using actionModeCloseButtonStyle.

Answer 10

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>

Answer 11

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

Answer 12

<style name="ToolBarTheme" parent="ThemeOverlay.AppCompat.ActionBar">
    <item name="android:tint">@color/colorAccent</item>

create the above theme.set tint with your color and add this theme to the toolbar.

<androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ToolBarTheme"/>