Change fillColor of a vector in android programmatically

Question

I want to edit the fill Color of a vector-file in Android programmatically.

In the xml-file I can set my color with the attribute android:fillColor but I want to change the color in runtime.

Any examples for that? Thanks.

Answer 1

This is exactly what you need. Credits to @emmaguy, the author of the post. I just added the full support of Support Library 23.4+, which enables you to stop generating pngs at runtime:

 // Gradle Plugin 2.0+  
 android {  
   defaultConfig {  
     vectorDrawables.useSupportLibrary = true  
   }  
 } 

And if this line is set on your Activity's or Application's onCreate:

AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);

You can use your SVGs not only with srcCompat but also with other attributes such as drawableLeft, background, etc. in TextView, ToggleButton and so on. It also works if used on selectors.

Note: I modified the code to use VectorDrawableCompat.create instead of ResourcesCompat.getDrawable. Otherwise it would not work and throw org.xmlpull.v1.XmlPullParserException: Binary XML file line #2: invalid drawable tag vector.

---

Medium post content:

First, we create attributes for the two kinds of bauble, so we can change their colours:

<declare-styleable name="ChristmasTree">
    <attr name="bauble_round" format="color" />
    <attr name="bauble_small" format="color" />
</declare-styleable>

Then, in the VectorDrawable, set the parts we want to dynamically change to use these attributes:

<path
    android:fillColor="?attr/bauble_round"
    android:pathData="...." />
<path
    android:fillColor="?attr/bauble_small"
    android:pathData="...." />
...

Create themes and set the colours you want to use:

<style name="UpdatedScene" parent="DefaultScene">
    <item name="bauble_round">#db486e</item>
    <item name="bauble_small">#22c7f7</item>
</style>

<style name="DefaultScene">
    <item name="bauble_round">#fec758</item>
    <item name="bauble_small">#f22424</item>
</style>

Use the drawable in an ImageView:

final ContextThemeWrapper wrapper = new ContextThemeWrapper(this, R.style.DefaultScene);
final Drawable drawable = VectorDrawableCompat.create(getResources(), R.drawable.christmas, wrapper.getTheme());
imageView.setImageDrawable(drawable);

That’s it! When you want to change the colours, simply set a different theme and your drawable will update. See the GitHub repo for a full sample.

Answer 2

If you want to change the whole color, you could apply a PorterduffColorFilter. But this does not work for a single <path>. Only for the whole drawable.

public void applyThemeToDrawable(Drawable image) {
    if (image != null) {
        PorterDuffColorFilter porterDuffColorFilter = new PorterDuffColorFilter(Color.BLUE,
                PorterDuff.Mode.SRC_ATOP);

        image.setColorFilter(porterDuffColorFilter);
    }
}

VectorDrawable extends the Drawable class. See Docs

Answer 3

add setColorFilter() method to your image content vector (is added in api level 8) like this:

imgshare = (Imageview) findviewbyId(R.id.imageshare);
imgshare.setColorFilter(color);

Answer 4

button.setColorFilter(getResources().getColor(R.color.YOUR_COLOR));

example:

dislikeBtn.setColorFilter(getResources().getColor(R.color.grey));

Answer 5

None of these answers worked for changing the color of a vector path inside a drawable at runtime. In fact, I still didn't figure that out, but I think this answer would help a lot of people who are just trying to create and paint a simple shape at runtime.

I was trying to create a custom border Mvvm binding to customise the border & fill colors of a Button at runtime. For a while I was trying to modify an Android drawable to achieve this but found out that wasn't possible. Eventually I figured out how to do this with GradientDrawable.

I'm using Xamarin.Android in C# so it does look slightly different from Java.

GradientDrawable gd = new GradientDrawable();
gd.SetColor(Color.Red);
gd.SetCornerRadius(10);

gd.SetStroke(3, Color.White);

view.Background = gd;

Answer 6

Just use:

imageView.setColorFilter(ContextCompat.getColor(context, R.color.white), PorterDuff.Mode.SRC_IN)

Answer 7

To change the colors of vectors, don't change the fillColor. Instead, programmatically change the tint which will do the same thing and save you a lot of time! See this answer here.

Answer 8

To people looking for an answer when your vector have 2 or more <path> or you just want to keep your stroke color's different than fill color:

I don't think there is a way to programmatically change only the fillColor of Vector while ignoring the strokeColor (tint will modify both)

I've made a workaround by creating 3 copies of my Vector asset with different colors defined in .xml, then in kotlin I've just set proper copy of that Vector asset. For example: view.setBackgroundResource(R.drawable.myVectorColor1)

view.setBackgroundResource(R.drawable.myVectorColor2)