Tint VectorDrawable inside Drawable Resource xml

Question

i've had a drawable resource for a selectable Button/ImageView like this:

<selector>
<item android:state_selected="true">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="@color/blue"/>
            </shape>
        </item>
        <item>
            <bitmap
                android:src="@drawable/ic_icon"
                android:tint="@color/white"/>

        </item>
    </layer-list>
</item>
<item>
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="@color/background_unselected"/>
            </shape>
        </item>
        <item>
            <bitmap
                android:src="@drawable/ic_icon"
                android:tint="@color/icon_unselected"/>
        </item>
    </layer-list>
</item>

as i've switched to use VectorDrawables the above declaration does not work because i cannot reference a VectorDrawable with a <bitmap> tag. But as far as i know that's the only way i can tint the icon.

I also cannot apply a Colorfilter in code as this would tint the whole drawable and not just the icon.

Any suggestions?

Answer 1

You can define colors as attributes and reference them in your SVG. Then can load the drawable styled by a theme.

Short example:

attributes.xml

<declare-styleable name="vectorColors">
    <attr name="primaryColor" format="color" />
    <attr name="secondaryColor" format="color" />
</declare-styleable>

ic_icon.xml

<path
    android:fillColor="?attr/primaryColor"
    android:pathData="...." />
<path
    android:fillColor="?attr/secondaryColor"
    android:pathData="...." />

styles.xml

<style name="svgColors">
    <item name="primaryColor">@color/someColor</item> 
    <!-- also can use #RRGGBB way -->
    <item name="secondaryColor">#ff0000</item>
</style>

Then load your theme and drawable:

Resources.Theme theme = getResources().newTheme();
theme.applyStyle(R.style.svgColors, false);
VectorDrawableCompat drawable = VectorDrawableCompat.create(getResources(), R.drawable.ic_icon, theme);
imageView.setImageDrawable(drawable);

In your specific selector you should replace

<item>
    <bitmap
        android:src="@drawable/ic_icon"
        android:tint="@color/white"/>
</item>

by <item android:drawable="@drawable/ic_icon">

Reference and full example