Single vector resource multiple tints

Question

I want to replace all .PNG resources (icons) in my project with vector versions. And for this to be as efficient as possible, i wanted to avoid duplication of images because of different states (like for "active" and "inactive" versions of the same icon).

Previously i've done that by using separate PNG files for each version: an opaque "active", and slightly transparent "inactive".

So the question is, is it possible to create some XMLs which reference a single vector (preferably) image but apply different colors/tints to it? Or at least different alpha values would be enough.

P.S. My minSDK version is 19, if it matters.

UPDATE_01: I think i need to explain in a bit more details. Vector resources are working as expected (all preparations are made for compat lib to draw vectors as needed).

The main problem is to use one single vector icon and multiple references of it with different colors/alphas in separate XMLs. And use these XMLs where needed (on toolbar, buttons, states, etc.).

UPDATE_02: Perhaps and example would be better.

I have a vector drawable of a "home" icon, which looks like this:

<vector
    android:height="24dp"
    android:viewportHeight="792.0"
    android:viewportWidth="792.0"
    android:width="24dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path
        android:fillColor="#FF000000"
        android:pathData="..."/>
</vector>

What i want is to use this same XML vector drawable but with different tints for "active" and "inactive" states, for example, in a page adapter's tabs.

What i do now for this is duplicate this XML and change it's "android:fillColor" value.

Mutating it (in code) in all the places it is used is one way, but not very good from my point of view. Perhaps there is another way? Something like this (pseudo):

<image-reference
    android:srcDrawable="@drawable/home_icon"
    android:tint="@color/activeHomeIcon" />

And then just use this "home_icon_ref.xml" everywhere as a drawable source.

Hope this makes my question more clear this time.

API<21 then you need to add in every activity where you are using vector drawable.--> static { AppCompatDelegate.setCompatVectorFromResourcesEnabled(true); } — Ram Prakash Bhat, Nov 25 '16 at 13:40
I think i should add more details on subject. See my update. — Kasbolat Kumakhov, Nov 25 '16 at 14:00
sorry, despite your update i still dont see your main problem... — pskink, Nov 25 '16 at 14:18
while using in ImageView/ImageButton it works by setting tint but if you use as compound drawable you need to do it programatically. — Ravi Theja, Nov 28 '16 at 07:16

score 2 · Answer 1 · answered Nov 07 '18 at 13:36

Not sure if this is exactly what you needed (and this is almost 2 years old), but you can use android:tint in the xml of an ImageView:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:src="@drawable/vector_drawable"
    android:tint="@android:color/black"
    android:contentDescription="@string/description"
/>

I'm currently using minSdkVersion 21 but it seems to work in earlier versions according to this.
You can also use a style with <item name="android:tint">@android:color/black</item>.

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

Instead of using in separate XML resources you can modify programatically in your java code.Follow this SO post

edited May 23 '17 at 12:30

Community

1
1

answered Nov 25 '16 at 14:05

Ravi Theja

3,371
1
22
34

If i understand correctly, i'll have to add mutating in code to every View which uses this image in all fragments and activities. Not very handy. – Kasbolat Kumakhov Nov 28 '16 at 07:10

Single vector resource multiple tints

2 Answers2