10

I tried to load PNG image form drawable into ImageView, and set tint color for this ImageView with below code ⇒ it's working:

imageView1.setImageResource(R.drawable.pngFile);
imageView1.setColorFilter(getResources().getColor(R.color.colorAccent), android.graphics.PorterDuff.Mode.MULTIPLY);

I want to load SVG image into ImageView using Glide and set tint color for it. But after successfully loading SVG image into imageView, setColorFilter NOT WORKING.

I could load SVG image into another ImageView using Glide with the below code:

// Setup RequestBuilder
requestBuilder = Glide.with(mActivity)
.using(Glide.buildStreamModelLoader(Uri.class, mActivity), 
InputStream.class)
.from(Uri.class)
.as(SVG.class)
.transcode(new SvgDrawableTranscoder(), PictureDrawable.class)
.sourceEncoder(new StreamEncoder())
.cacheDecoder(new FileToStreamDecoder<SVG>(new SvgDecoder()))
.decoder(new SvgDecoder())
.placeholder(R.drawable.ic_facebook)
.error(R.drawable.ic_web)
.animate(android.R.anim.fade_in)
.listener(new SvgSoftwareLayerSetter<Uri>());

// Use RequestBuilder with uri
Uri uri = Uri.parse("http://upload.wikimedia.org/wikipedia/commons/e/e8/Svg_example3.svg");
requestBuilder
.diskCacheStrategy(DiskCacheStrategy.SOURCE)
.load(uri)
.into(imageView2);

Now, I want to change tint color of mageView2 (after successfully loading SVG image into imageView2), I tried the below code but it's not working:

imageView2.setColorFilter(getResources().getColor(R.color.colorAccent), android.graphics.PorterDuff.Mode.MULTIPLY);
Zoe
  • 27,060
  • 21
  • 118
  • 148
Sonzero
  • 141
  • 2
  • 7

4 Answers4

6

The complete guide how to download SVG via Glide:

1) Include this libraries in your gradle file:

implementation "com.github.bumptech.glide:glide:$glideVersion" kapt "com.github.bumptech.glide:compiler:$glideVersion" implementation 'com.caverock:androidsvg-aar:1.4

2) Download files from the Glide SVG sampler.

3) Modify the SvgDrawableTranscoder class to convert PictureDrawable to BitmapDrawable, because PictureDrawable is not able to apply a color filter: 

public class SvgDrawableTranscoder implements ResourceTranscoder<SVG, Drawable> {
  @Nullable
  @Override
  public Resource<Drawable> transcode(
      @NonNull Resource<SVG> toTranscode, @NonNull Options options) {
    SVG svg = toTranscode.get();
    Picture picture = svg.renderToPicture();
    PictureDrawable drawable = new PictureDrawable(picture);

    Bitmap returnedBitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(),Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(returnedBitmap);
    canvas.drawPicture(drawable.getPicture());
    Drawable d = new BitmapDrawable(PlatformApp.Companion.getInstance().getResources(), returnedBitmap);
    return new SimpleResource<>(d);
  }
}
Vadim Shved
  • 159
  • 1
  • 10
3

If you are using an icon maybe this can be usefull:

android:tint="@color/colorAccent"

else you can try modify the class:

ImageView imageViewIcon = (ImageView) listItem.findViewById(R.id.imageViewIcon);
imageViewIcon.setColorFilter(getContext().getResources().getColor(R.color.blue));

more info in this thread Is it possible to change material design icon color from xml in Android? Material design icon colour from xml

Community
  • 1
  • 1
Sai's Stack
  • 1,345
  • 2
  • 16
  • 29
  • 2
    This solution WORKING when i loaded PNG image form drawable into ImageView. But when i loaded SVG image into imageView using Glide, it's NOT WORKING. Please help! – Sonzero May 16 '17 at 09:22
3

you can set the layer paint of imageview. this is the only method that i found working !

val paint = Paint()
val colorFilter = PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.SRC_ATOP)
paint.colorFilter = colorFilter
imageView.setLayerPaint(paint)

this code is in kotlin, just add a few new keywords to make it work in java :)

if you are using kotlin, add this extension to make it easier

fun ImageView.paintColor(colorString: String) {
    val paint = Paint()
    val colorFilter = PorterDuffColorFilter(Color.parseColor(colorString), PorterDuff.Mode.SRC_ATOP)
    paint.colorFilter = colorFilter
    setLayerPaint(paint)
}

then you only need to call paintColor and voila !

imageView.paintColor("#FFC4C4C4")
ilaimihar
  • 141
  • 5
2

You can use android.support.v7.widget.AppCompatImageView replace ImageView and using 

DrawableCompat.setTint(imvageView.getDrawable(), getResources().getColor(R.color.yourcolor));
RoShan Shan
  • 2,924
  • 1
  • 18
  • 38
  • 2
    I tried load PNG image form drawable into ImageView, and using your code to set tint color ⇒ it's working. But after successfully loading SVG image into imageView using Glide, setColorFilter NOT WORKING. Another solution? – Sonzero May 15 '17 at 17:33
  • What do you mean?. You comment the same for other answers. So Which answer works? – RoShan Shan May 16 '17 at 03:54
  • All three ways WORKING when loaded PNG image form drawable into ImageViewt. But when loaded SVG image into imageView using Glide, all three ways NOT WORKING. Please help ! – Sonzero May 16 '17 at 09:19
  • @Sonzero Had you got any other solution for loaded SVG color change? – patel135 Aug 08 '18 at 08:39