Android: How to change android:fillcolor with selector in one Vector Drawable xml

Question

Tab Icons: My current method is to create two files (ic_list_selected_24dp.xml and ic_list_unselected_24dp.xml; they are basically the same but only the android:fillColor='Color HEX CODE' are different), and then create a selector (selector_tabitem_list.xml) to change the drawable color when the state is changed.

// @drawable/selector_tabitem_list.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:drawable="@drawable/ic_list_selected_24dp" 
        android:state_selected="true" />
    <item android:drawable="@drawable/ic_list_unselected_24dp" 
        android:state_selected="false" />
</selector>

It's kind of duplicated because two drawables are the same.

Selector cannot be used in vector drawable.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="@drawable/selector"
        android:pathData="M19,3...."
</vector>

--

// @drawable/selector

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <color android:color="@color/itemSelected" />
    </item>
    <item android:state_selected="false">
        <color android:color="@color/itemUnselected" />
    </item>
</selector>

, and android:fillColor="@color/state" either.

// @color/state

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/white" android:state_selected="true" />
    <item android:color="@android:color/black" android:state_selected="false" />
</selector>

Is there any way to use one drawable and change its color dynamically? Using hard hex code is better?

Thanks.

Answer 1

Here is the complete list of steps to use a vector asset as tinted icon in a TabItem (which is part of the support design lib). All parts are present in the original question and linked answer, but are easy to miss.

1. Create the selector. Note that it has to switch the color for state_selected (as included in the question, but not in the answer linked by @cmingmai. There it only states android:state_enabled which is not relevant for tabs):

res/color/selector_navigation.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="false" android:color="@android:color/black" />
    <item android:state_selected="true" android:color="@android:color/white" />
</selector>

2. Adjust the vector drawable by adding android:tintMode and android:tint to the vector tag. In addition for the tinting to work with multiply, the fillColor of the path needs to be set to white!

res/drawable/ic_tab_list:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:height="24dp"
        android:width="24dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0"
        android:tintMode="multiply"
        android:tint="@color/selector_navigation">
    <path
        android:fillColor="@android:color/white"
        android:pathData="..." />
</vector>

3. Use vector drawable in Layout – or use to create the tabs in code as shown in the developer guide on Tabs. Note that I also modified the tab indicator color to match the active icon color to follow the material design guidelines.

Relevant part of the layout:

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="@android:color/white">

    <android.support.design.widget.TabItem
        android:id="@+id/tabItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/ic_tab_list" />
    <!-- More Tabs -->
</android.support.design.widget.TabLayout>

4. Adjust build.gradle with following to activate vector support for old Android versions (in case it was not already previously added):

   android { defaultConfig { vectorDrawables.useSupportLibrary = true } }