android - Change MaterialToolbar menu items icon color

Question

Im currently creating an app, which has a MaterialToolbar widget. I want to set the icons color to white. I tried following the accepted answer in this question, however, it doesnt work. Adding colorControlNormal in styles.xml doesnt work.

This is my MaterialToolbar xml code:

<com.google.android.material.appbar.MaterialToolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/topToolbar"
            android:background="@color/colorPrimaryDark"
            app:title="Revo"
            app:titleTextColor="@android:color/white"
            app:menu="@menu/menu_floatingsearchview"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

What can i do?

EDIT, SOLUTION AND EXPLENATION

Thanks everyone for the nice answers. I managed to find a solution, that will include both solutions, and another question.

In this question, was asked why colorControlNormal doesnt work. The accepted answer says that in the vector lines, you have to change the value given to android:fillColor, and replace it with ?attr/colorControlNormal. Doing this trick, item colorControlNormal, will control the desired icons color.

In the app main style, you need to put:

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

Then, in the desired icon, you need to put under path:

android:fillColor="?attr/colorControlNormal"

Thats it! Now the icons will get the color given to the colorControlNormal attribute!

Which icons are you referring? Check https://stackoverflow.com/questions/58074174/how-to-change-the-navigation-icon-color/58074791#58074791 — Gabriele Mariotti, Jun 30 '20 at 15:54
@GabrieleMariotti im referring to the two icons on the right of the toolbar, contained in a menu xml file, named menu_floatingsearchview. Do i have to update the thread with the menu code? — Meltix, Jun 30 '20 at 15:58
Please write an answer to your question. It is easy to overlook an answer in the question. — John Glen, May 30 '22 at 20:00

Gabriele Mariotti · Accepted Answer · 2020-07-01T07:19:02.083

14

You can use:

    <com.google.android.material.appbar.MaterialToolbar
        app:menu="@menu/toolbar_menu"
        style="@style/Widget.MaterialComponents.Toolbar.Primary
        android:theme="@style/MyThemeOverlay_Toolbar"
        .../>

with:

<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <!-- color used by navigation icon and overflow icon -->
    <item name="colorOnPrimary">@color/....</item>
</style>

edited Jul 01 '20 at 07:19

answered Jun 30 '20 at 16:18

Gabriele Mariotti

320,139
94
887
841

For some reason this one doesnt seem to work. It is yet another method that is used by most dvelopers, proposed by many. But this one just doesnt work... – Meltix Jun 30 '20 at 16:26
@Meltix what is your app theme? Are you using a Material Components theme? – Gabriele Mariotti Jun 30 '20 at 16:27
This is my app theme: – Meltix Jun 30 '20 at 16:27
@Meltix which version of material components are you using? – Gabriele Mariotti Jun 30 '20 at 16:34
Im currently using the version 1.3.0 alpha 01, here's the line: implementation 'com.google.android.material:material:1.3.0-alpha01' – Meltix Jun 30 '20 at 16:35
@Meltix Try to add in the `Toolbar` layout: `style="@style/Widget.MaterialComponents.Toolbar.Primary`. Or in the themeOverlay `@color/....` – Gabriele Mariotti Jun 30 '20 at 16:37
@Meltix sorry but I am unable to replicate your issue. Just tried also with 1.2.0-beta01 and it seems to work. – Gabriele Mariotti Jun 30 '20 at 16:47
No worries. Maybe im doing something wrong. Thanks anyway! I'll accept your answer as soon as i get these solutions working. – Meltix Jun 30 '20 at 17:06
Hey! I updated the post with the solution of the problem! – Meltix Jun 30 '20 at 18:22
The `...` part didn't work for me. Using `...` instead works. – Robyer Apr 11 '23 at 13:26
@Robyer `colorOnPrimary` works if you are using a theme overlay (`android:theme`). `iconTint` instead works if your using a style (`style`). They are completely different. – Gabriele Mariotti Apr 11 '23 at 18:03
1

@GabrieleMariotti I had it as `android:theme`, but I just realized the difference. The `colorOnPrimary` indeed changes the color of the toolbar's title and overflow menu icon itself, BUT it has no effect on icons of menu items inflated from the menu xml resource - their color is changed only by changing the `iconTint` attribute. – Robyer Apr 12 '23 at 14:21

score 2 · Answer 2 · answered Jun 30 '20 at 15:40

2

That one bugged me a few days ago. I ended up doing this:

set your desired color to a variable in colors.xml

<color name="toolbarTextColor">#ffffff</color>
Then set this color directly in the source of drawable

android:fillColor="@color/toolbarTextColor"
Also, use same variable when setting color of text in MaterialToolbar.

This way, you have icons always the same color as text, which is, I suppose, what you want. Otherwise, just use another variable.

answered Jun 30 '20 at 15:40

Primož Ivančič

1,984
1
17
29

Well, this definetly works! Im waiting some other responses before accepting your answer, thanks! – Meltix Jun 30 '20 at 15:46

android - Change MaterialToolbar menu items icon color

2 Answers2