Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 833
Meltix Avatar asked Jun 30 '20 15:06

Meltix


2 Answers

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

like image 159
Gabriele Mariotti Avatar answered Sep 21 '22 14:09

Gabriele Mariotti


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.

like image 25
Primož Ivančič Avatar answered Sep 19 '22 14:09

Primož Ivančič