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

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

Answer 4

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

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 6

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

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 8

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 9

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 10

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

Answer 11

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