CODEWITHSUNDEEP
androidandroid-toolbarandroid-xmlandroid-themematerial-components-android
Meltix
Meltix

Reputation: 499

android - Change MaterialToolbar menu items icon color

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!

Upvotes: 15

Views: 13713

Answers (3)

Vitaliy L
Vitaliy L

Reputation: 581

For MaterialToolbar you could set it programatically by:

toolbar.menu.forEach { menuItem -> MenuItemCompat.setIconTintList(
        menuItem, getColorStateList(requireContext(), R.color.primary_color_state))

And color selector is smth like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:color="?attr/colorPrimary"/>
    <item android:state_selected="true" android:color="?attr/colorPrimary"/>
    <item android:state_pressed="true" android:color="?attr/colorPrimaryDark"/>
    <item android:color="?attr/colorPrimary"/>
</selector>

Upvotes: 0

Gabriele Mariotti
Gabriele Mariotti

Reputation: 365058

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>

enter image description here

Upvotes: 18

Primož Ivančič
Primož Ivančič

Reputation: 2376

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

  1. set your desired color to a variable in colors.xml

    <color name="toolbarTextColor">#ffffff</color>

  2. Then set this color directly in the source of drawable

    android:fillColor="@color/toolbarTextColor"

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

Upvotes: 2

Related Questions