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

问题

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.

回答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.

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>

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>

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>

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 } }

回答2:

Upgrade to Support Library 28.0.0+ (presumably same for androidx.. didn't test).

On Support Library 28.0.0 using a selector color xml resource seems to work now when used as vector's android:fillColor.

In fact the previous solution (using vector's android:tintMode, android:tint and white for android:fillColor) no longer works for me on Support Library 28.0.0.

Tested on API 21 and 27 Emulators.