android - Change MaterialToolbar menu items icon color

user_10307340 0
Viewed 6367

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!

android-toolbar material-components-android android-theme android-xml android
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

user_20165620

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.

user_68357320
Related