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.

score 73 · Accepted Answer · edited Aug 10 '16 at 10:38

73

Add the below line into your theme attribute:

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

edited Aug 10 '16 at 10:38

Holger Just

52,918
14
115
123

answered Jun 30 '15 at 13:06

Piyush

5,607
4
27
27

I don't know i have also second solution please check this link http://stackoverflow.com/questions/26671677/android-appcompat-21-how-to-change-the-back-icon-and-the-overflow-icon-to-a-cu/33938229#33938229 – Piyush Dec 01 '15 at 08:10
6

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. – Stan Mots Oct 13 '16 at 18:00
2

Bette approach would be by creating a separate style for it: `` – Ariq Jul 11 '17 at 08:26
This will not result in a different colors in action mode and normal toolbar. – Sver Nov 09 '19 at 17:39
Setting your text color to a hard coded white (or any fixed color) will not allow it to reflect being activated or disabled, etc.. You really want that to be a color selector. – johngray1965 Feb 28 '23 at 18:58

Patrick McLaren · Answer 2 · 2018-03-22T17:56:45.473

17

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>

edited Mar 22 '18 at 17:56

answered Mar 06 '15 at 03:43

Patrick McLaren

978
10
22

4

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. – thisbytes Mar 10 '15 at 16:42
Now if you disable things in the actionBar, they will still be white. You need a color selected, not a hard coded color. – johngray1965 Feb 28 '23 at 19:00

score 12 · Answer 3 · answered May 28 '16 at 05:28

12

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

answered May 28 '16 at 05:28

androidmalin

899
1
8
12

The only answer works perfectly not changing text color or menu items color - only overflow menu icon. – Daniel Feb 20 '19 at 10:30

score 11 · Answer 4 · answered May 16 '18 at 05:30

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

Fakhriddin Abdullaev · Answer 5 · 2021-01-31T04:26:29.933

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

edited Jan 31 '21 at 04:26

answered Jul 14 '17 at 08:58

Fakhriddin Abdullaev

4,169
2
35
37

doesn't change color of icons of `MaterialToolbar` – user924 Aug 15 '22 at 10:58

score 5 · Answer 6 · answered May 27 '19 at 15:23

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

score 3 · Answer 7 · answered Dec 14 '16 at 16:33

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>

score 3 · Answer 8 · answered Nov 09 '19 at 20:13

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.

doesn't change color of icons of `MaterialToolbar` – user924 Aug 15 '22 at 10:58 — user924, Aug 15 '22 at 10:58

score 2 · Answer 9 · answered Sep 14 '17 at 10:40

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

score 2 · Answer 10 · answered Aug 13 '18 at 13:15

2

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)

answered Aug 13 '18 at 13:15

Abhishek

2,295
24
28

Thanks. This helped me a lot. How to do it if the menu item contains actionLayout? – ThunderDragon Nov 12 '18 at 11:10

score 2 · Answer 11 · answered Oct 24 '19 at 11:41

2

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

answered Oct 24 '19 at 11:41

Shekhar

56
3

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. – xiawi Oct 24 '19 at 12:02

Daniel · Answer 12 · 2019-02-20T10:22:42.490

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.

AppCompat Toolbar: Change Overflow Icon Color in ActionMode

12 Answers12

Linked