Changing "fill color" of vector resource doesn't work

Question

I create a vector resource asset through Android studio Vector Asset, the icon appears correctly with no problem. But when I change the fill color attribute, nothing changes at all and icon keeps its default selected and unselected colors. Here is my vector xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="51.0"
    android:viewportWidth="61.0">
    <path
        android:fillColor="@color/unselected"
        android:pathData="M59.28,1.7a5.67,5.67 0,0 0,-4.14 -1.71L5.86,-0.01a5.67,5.67 0,0 0,-4.14 1.71A5.54,5.54 0,0 0,0 5.79v39.42a5.54,5.54 0,0 0,1.72 4.09,5.67 5.67,0 0,0 4.14,1.71L55.14,51.01a5.67,5.67 0,0 0,4.14 -1.71A5.54,5.54 0,0 0,61 45.21v-39.42A5.54,5.54 0,0 0,59.28 1.7ZM18.77,45.21a1.12,1.12 0,0 1,-0.33 0.83,1.14 1.14,0 0,1 -0.84,0.33L5.86,46.37a1.14,1.14 0,0 1,-0.84 -0.33,1.12 1.12,0 0,1 -0.33,-0.83v-6.96a1.12,1.12 0,0 1,0.33 -0.83,1.14 1.14,0 0,1 0.84,-0.33L17.6,37.09a1.14,1.14 0,0 1,0.84 0.33,1.12 1.12,0 0,1 0.33,0.83v6.96ZM18.77,31.3a1.13,1.13 0,0 1,-1.17 1.16L5.86,32.46a1.14,1.14 0,0 1,-0.84 -0.33,1.13 1.13,0 0,1 -0.33,-0.83v-6.96a1.1,1.1 0,0 1,0.33 -0.83,1.14 1.14,0 0,1 0.84,-0.33L17.6,23.18a1.14,1.14 0,0 1,0.84 0.33,1.1 1.1,0 0,1 0.33,0.83v6.96ZM18.77,17.38a1.14,1.14 0,0 1,-0.33 0.84,1.17 1.17,0 0,1 -0.84,0.32L5.86,18.54a1.18,1.18 0,0 1,-0.84 -0.32,1.14 1.14,0 0,1 -0.33,-0.84v-6.95a1.14,1.14 0,0 1,0.33 -0.84,1.18 1.18,0 0,1 0.84,-0.32L17.6,9.27a1.17,1.17 0,0 1,0.84 0.32,1.14 1.14,0 0,1 0.33,0.84v6.95ZM37.54,45.21a1.12,1.12 0,0 1,-0.33 0.83,1.14 1.14,0 0,1 -0.84,0.33L24.63,46.37a1.14,1.14 0,0 1,-0.84 -0.33,1.12 1.12,0 0,1 -0.33,-0.83v-6.96a1.12,1.12 0,0 1,0.33 -0.83,1.14 1.14,0 0,1 0.84,-0.33L36.37,37.09a1.14,1.14 0,0 1,0.84 0.33,1.12 1.12,0 0,1 0.33,0.83v6.96h0ZM37.54,31.3a1.13,1.13 0,0 1,-1.17 1.16L24.63,32.46a1.14,1.14 0,0 1,-0.84 -0.33,1.13 1.13,0 0,1 -0.33,-0.83v-6.96a1.1,1.1 0,0 1,0.33 -0.83,1.14 1.14,0 0,1 0.84,-0.33L36.37,23.18a1.14,1.14 0,0 1,0.84 0.33,1.1 1.1,0 0,1 0.33,0.83v6.96h0ZM37.54,17.38a1.14,1.14 0,0 1,-0.33 0.84,1.17 1.17,0 0,1 -0.84,0.32L24.63,18.54a1.18,1.18 0,0 1,-0.84 -0.32,1.14 1.14,0 0,1 -0.33,-0.84v-6.95a1.14,1.14 0,0 1,0.33 -0.84,1.18 1.18,0 0,1 0.84,-0.32L36.37,9.27a1.17,1.17 0,0 1,0.84 0.32,1.14 1.14,0 0,1 0.33,0.84v6.95h0ZM56.31,45.21a1.12,1.12 0,0 1,-0.33 0.83,1.14 1.14,0 0,1 -0.84,0.33L43.4,46.37a1.14,1.14 0,0 1,-0.84 -0.33,1.12 1.12,0 0,1 -0.33,-0.83v-6.96a1.12,1.12 0,0 1,0.33 -0.83,1.14 1.14,0 0,1 0.84,-0.33L55.14,37.09a1.14,1.14 0,0 1,0.84 0.33,1.12 1.12,0 0,1 0.33,0.83v6.96ZM56.31,31.3a1.13,1.13 0,0 1,-0.33 0.83,1.14 1.14,0 0,1 -0.84,0.33L43.4,32.46a1.13,1.13 0,0 1,-1.17 -1.16v-6.96a1.1,1.1 0,0 1,0.33 -0.83,1.14 1.14,0 0,1 0.84,-0.33L55.14,23.18a1.14,1.14 0,0 1,0.84 0.33,1.1 1.1,0 0,1 0.33,0.83v6.96ZM56.31,17.38a1.14,1.14 0,0 1,-0.33 0.84,1.18 1.18,0 0,1 -0.84,0.32L43.4,18.54a1.17,1.17 0,0 1,-0.84 -0.32,1.14 1.14,0 0,1 -0.33,-0.84v-6.95a1.14,1.14 0,0 1,0.33 -0.84,1.17 1.17,0 0,1 0.84,-0.32L55.14,9.27a1.18,1.18 0,0 1,0.84 0.32,1.14 1.14,0 0,1 0.33,0.84v6.95Z" />
</vector>

@color/unselected doesn't work and icon keeps its default #FF000000

I am using these vectors in BottomNavigation Layout which inflates a navigation menu xml file as below:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/navigation_time"
    android:icon="@drawable/ic_time"
    android:tint="@color/unselected"
    android:title="@string/title_time"
    app:showAsAction="always|withText" />

<item
    android:id="@+id/navigation_late"
    android:icon="@drawable/ic_late"
    android:tint="@color/unselected"
    android:title="@string/title_late"
    app:showAsAction="always|withText" />

<item
    android:id="@+id/navigation_file"
    android:icon="@drawable/ic_file"
    android:tint="@color/unselected"
    android:title="@string/title_file"
    app:showAsAction="always|withText" />

<item
    android:id="@+id/navigation_attach"
    android:icon="@drawable/ic_attach"
    android:tint="@color/colorPrimaryDark"
    android:title="@string/title_attach"
    app:showAsAction="always|withText" />

<item
    android:id="@+id/navigation_table"
    android:icon="@drawable/ic_table"
    android:tint="@color/colorPrimaryDark"
    android:title="@string/title_table"
    app:showAsAction="always|withText" />

I tried the tint attribute but nothing changed...

Possible duplicate of [Change fill color on vector asset in Android Studio](https://stackoverflow.com/questions/32924986/change-fill-color-on-vector-asset-in-android-studio) — Mark, Aug 15 '17 at 01:12
@Mark Keen, Tried this... didn't work Updates my question for more info — Abuzaid, Aug 16 '17 at 00:01

score 1 · Answer 1 · answered Feb 16 '18 at 02:42

Try to set 'app:itemIconTint="@color/yourColor"' attribute in your 'Bottom NavigationView' definition in the layout XML. In my case, I had a similar issue with NavigationView. This is how I fixed it:

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:itemIconTint="@color/scrollbarColor" />

Hope that helps.

score 0 · Answer 2 · edited Jan 13 '21 at 00:01

0

I deleted the following attribute that came with the element:

android:tint="?attr/colorControlNormal"

After that, the following attribute of the element started working properly.

android:fillColor="#830E0E"

edited Jan 13 '21 at 00:01

Zain

37,492
7
60
84

answered Jan 12 '21 at 23:10

Eddy

13
1

Changing "fill color" of vector resource doesn't work

2 Answers2