Dynamically change SVG image color in android

Question

I know that using third party library, it is possible to use SVG image in Android. Library like: svg-android

The code to load SVG image is like below:

 public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Create a new ImageView
    ImageView imageView = new ImageView(this);
    // Set the background color to white
    imageView.setBackgroundColor(Color.WHITE);
    // Parse the SVG file from the resource
    SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.android);
    // Get a drawable from the parsed SVG and set it as the drawable for the ImageView
    imageView.setImageDrawable(svg.createPictureDrawable());
    // Set the ImageView as the content view for the Activity
    setContentView(imageView);
}

It's working fine. I'm able to see the image. But now I want to change the color for the svg image at runtime. For that I tried the code below as mentioned in the same project description.

  // 0xFF9FBF3B is the hex code for the existing Android green, 0xFF1756c9 is the new blue color
    SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.android, 0xFF9FBF3B, 0xFF1756c9);

But with that I am not able to see the change in the color. So I would like to know how it is possible to change the color dynamically in Java file.

Make sure this color `0xFF9FBF3B` exists in your svg (just open it in a text editor and search for this value). Keep in mind that the color change only happens **when you load the file**, not dynamically. So, just reload the file to apply the color change. — Phantômaxx, Oct 29 '14 at 09:37

score 40 · Answer 1 · answered Oct 16 '15 at 18:45

I know it's kind of late but I also had this issue and was able to fix this issue using the setColorFilter(int color, PorterDuff.Mode mode) method.

Example:

imageView.setColorFilter(getResources().getColor(android.R.color.black), PorterDuff.Mode.SRC_IN);

score 10 · Accepted Answer · answered Oct 29 '14 at 13:19

10

I got where is the problem. The issue is with the color code i am using in svg file. Its not exactly 0xFF9FBF3B but #9FBF3B
But during java code you have to write it with ARGB value (e.g. 0xFF9FBF3B). I have updated it and its work fine now. I can able to change the color of svg file with same code.

Hope this will also help others to identify the actual case while changing the color of the SVG image at runtime.

answered Oct 29 '14 at 13:19

Shreyash Mahajan

23,386
35
116
188

I can not change color of this image in imageview https://firebasestorage.googleapis.com/v0/b/android-generalize.appspot.com/o/test.svg?alt=media&token=ea6faaff-0e6c-4f96-9953-185cb496def5 color have you any idea how i can do this? – patel135 Aug 08 '18 at 10:03
Can you please check @Antlip Dev's answer. That is more accurate. – Shreyash Mahajan Aug 09 '18 at 08:20
Also we have tintColor option in in XML for Imageview. You can try with that as well. – Shreyash Mahajan Aug 09 '18 at 08:21
tint option can change image only which had .xml format and i had .svg format url – patel135 Aug 09 '18 at 11:40
You can also change the SVG image colour dynamically. – Shreyash Mahajan Aug 13 '18 at 11:58

CoolMind · Answer 3 · 2020-02-11T07:41:16.940

6

Using the answer of Antlip Dev in Kotlin.

package com.example.... // Your package.

import android.graphics.PorterDuff
import android.widget.ImageView
import androidx.annotation.ColorRes
import androidx.core.content.ContextCompat

fun ImageView.setSvgColor(@ColorRes color: Int) =
    setColorFilter(ContextCompat.getColor(context, color), PorterDuff.Mode.SRC_IN)

Usage:

view.your_image.setSvgColor(R.color.gray)

edited Feb 11 '20 at 07:41

answered Feb 05 '19 at 10:17

CoolMind

26,736
15
188
224

1

Best to avoid using !! whenever possible, better to do something like context?.let { setSvgColor(it, ... } – crobicha Feb 10 '20 at 16:27
1

@crobicha, I agree with you. But when you call these methods from `view`, `context != null`. – CoolMind Feb 10 '20 at 19:56
1

@crobicha, thanks for your answer. I simplified the method. Please, see an update. – CoolMind Feb 11 '20 at 07:41

score 2 · Answer 4 · answered Feb 20 '20 at 12:20

what @Antlip Dev said is correct, but that method is deprecated now. This is the updated version:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
    drawable.setColorFilter(new BlendModeColorFilter(color, BlendMode.SRC_ATOP));
} else {
   drawable.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
}

score 1 · Answer 5 · answered May 30 '20 at 10:03

1

You can use: drawableTint to change the color

answered May 30 '20 at 10:03

Code_Life

5,742
4
29
49

score 0 · Answer 6 · answered Jul 28 '22 at 00:53

0

This worked for me DrawableCompat.setTint(imageView.getDrawable(),ContextCompat.getColor(getApplicationContext(), R.color.colorAccent))

answered Jul 28 '22 at 00:53

user2612398

11
2

Dynamically change SVG image color in android

6 Answers6

Linked