Change drawable color programmatically

Question

I'm trying to change the color on a white marker image by code. I have read that the code below should change the color, but my marker remains white.

Drawable.setColorFilter( 0xffff0000, Mode.MULTIPLY )

Did I miss something? Is there any other way to change colors on my drawables located in my res folder?

accepted answer didn't work for me..used this [answer][1], [1]: http://stackoverflow.com/questions/5940825/android-change-shape-color-in-runtime — shyam.y, Jan 16 '15 at 15:10
I think all the answers here change the background color, but not color of the image. Im i right? can anyone tell me please? I tried all the solutions here and also on same questions on stackoverflow, but they change only background color in may case. So i think, we can only change background color, but not the images color. I'm I right? — Shirish Herwade, Apr 20 '15 at 12:44
Check this answer: https://stackoverflow.com/a/66479081/3503855 — Anis LOUNIS aka AnixPasBesoin, Mar 05 '21 at 17:49

score 346 · Accepted Answer · edited Jun 04 '19 at 22:50

346

Try this:

Drawable unwrappedDrawable = AppCompatResources.getDrawable(context, R.drawable.my_drawable); 
Drawable wrappedDrawable = DrawableCompat.wrap(unwrappedDrawable);
DrawableCompat.setTint(wrappedDrawable, Color.RED);

Using DrawableCompat is important because it provides backwards compatibility and bug fixes on API 22 devices and earlier.

edited Jun 04 '19 at 22:50

Alex Lockwood

83,063
39
206
250

answered Jul 07 '12 at 16:12

ρяσѕρєя K

132,198
53
198
213

Hmm, the color remains white. Could it have to do with the hello mapview `OverlayItems` class that might be causing the problem? Its a regular drawable from my res folder, nothing special... – Johan Jul 07 '12 at 16:27
31

You might prefer PorterDuff.Mode.SRC_IN if you want it to work with a wider range of source colors. – Lorne Laliberte Jul 16 '15 at 19:27
PorterDuff.Mode.MULTIPLY did not changed anything for me ( Black star with transparent background). i used the PorterDuff.Mode.SRC_ATOP for coloring the actual bitmap. – Viktor Petrovski Mar 09 '16 at 11:54
There's also a convenience method you can use: `setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN)` – CorayThan Feb 08 '17 at 00:25
1

PorterDuffColorFilter constructor takes ARGB color format – RichX Mar 23 '17 at 09:31
3

will be interesting to mutate the drawable with #mutate() to avoid share its state with any other drawable, otherwise if you reuse the drawable could have wrong color. – Ricard Mar 27 '20 at 18:02
The drawables are shared amongst all getDrawable from resources, hence the mutate() call is required to be able to change the tint of a drawable, without altering all the drawables associates with that resource ID, see https://stackoverflow.com/a/44593641/5555218 – Ricard Sep 18 '20 at 09:55

score 163 · Answer 2 · edited Jun 04 '19 at 22:51

163

You can try this for svg vector drawable

DrawableCompat.setTint(
    DrawableCompat.wrap(myImageView.getDrawable()),
    ContextCompat.getColor(context, R.color.another_nice_color)
);

edited Jun 04 '19 at 22:51

Alex Lockwood

83,063
39
206
250

answered Oct 06 '16 at 09:40

amorenew

10,760
10
47
69

7

Best way I've seen for svg. – apSTRK Jan 18 '17 at 21:44
1

prefer this over the accepted answer, although both will work, but with this one I don't have to worry about what drawable to set, i just get the one already there, and it's also backward compatible, great! – usernotnull Jun 29 '17 at 20:17
1

Best answer when nothing worked iot work like a charm! Thanks a lot! Note: It also works for when you have a xml drawable in your imageView/AppCompatImageView – Sjd Sep 15 '17 at 13:10
1

How to remove it programatically ? – Hardik Joshi Oct 04 '18 at 09:04
3

@HardikJoshi Documentation says: *To clear the tint, pass `null` to `Drawable#setTintList(ColorStateList)`* – arekolek Jan 11 '19 at 15:55
Unfortunately, this overrides the set stroke in the xml file, whereas the color filter option doesn't – Big_Chair May 12 '19 at 11:01
1

Correction, it only does so when not setting a mode. When using `DrawableCompat.setTintMode(bgDrawable, PorterDuff.Mode.MULTIPLY)` before applying the tint, it works the same as color filter. – Big_Chair May 12 '19 at 11:08
Remember to use `mutate()` or else you'd change the colour of the drawable globally! – ericn Jul 07 '21 at 15:07

shicky · Answer 3 · 2016-07-08T02:19:59.337

37

You may need to call mutate() on the drawable or else all icons are affected.

Drawable icon = ContextCompat.getDrawable(getContext(), R.drawable.ic_my_icon).mutate();
TypedValue typedValue = new TypedValue();
getContext().getTheme().resolveAttribute(R.attr.colorIcon, typedValue, true);
icon.setColorFilter(typedValue.data, PorterDuff.Mode.SRC_ATOP);

edited Jul 08 '16 at 02:19

answered Jan 21 '16 at 07:11

shicky

1,193
14
21

1

What really make your answer incredible is `mutate()` that really what I was searching for. Thanks. – Adham Gamal Feb 11 '21 at 05:06

Jaydip Meghapara · Answer 4 · 2021-08-17T16:19:24.233

33

You can try this for ImageView. using setColorFilter().

imageView.setColorFilter(ContextCompat.getColor(context, R.color.colorWhite));

edited Aug 17 '21 at 16:19

answered Jan 16 '18 at 09:03

Jaydip Meghapara

2,687
1
15
14

MinceMan · Answer 5 · 2016-12-14T15:16:39.493

22

Another way to do this on Lollipop, android 5.+ is setting a tint on a bitmap drawable like such:

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_back"
    android:tint="@color/red_tint"/>

This will work for you if you have a limited number of colors you want to use on your drawables. Check out my blog post for more information.

edited Dec 14 '16 at 15:16

answered Dec 09 '14 at 17:03

MinceMan

7,483
3
38
40

2

Nice! Btw, this seems to work fine on pre-Lollipop too. (Just tested this with `minSdkVersion 16` and Android 4.1.1 device.) – Jonik Mar 03 '15 at 12:16
When creating a bitmap this way, it does not stretch to fit the layout as it would when using `android:background="..."`. Pretty strange! – Prince May 19 '15 at 10:45
I think that's because you are not creating a nine patch here. – MinceMan May 19 '15 at 12:39
Sorry this page does not exist =( – Linh Jul 29 '16 at 07:41
@Jonik The answers in your provided question are irrelevant. This question is asking for the way to change *Drawable*'s colour, not ImageView. – Antony.H Feb 02 '17 at 04:45

Sachin Tanpure · Answer 6 · 2017-03-22T07:47:44.547

I have wrote a generic function in which you can pass context, icon is id drawable/mipmap image icon and new color which you need for that icon.

This function returns a drawable.

public static Drawable changeDrawableColor(Context context,int icon, int newColor) {
    Drawable mDrawable = ContextCompat.getDrawable(context, icon).mutate(); 
    mDrawable.setColorFilter(new PorterDuffColorFilter(newColor, PorterDuff.Mode.SRC_IN)); 
    return mDrawable;
} 

changeDrawableColor(getContext(),R.mipmap.ic_action_tune, Color.WHITE);

score 10 · Answer 7 · edited Feb 24 '15 at 17:05

You could try a ColorMatrixColorFilter, since your key color is white:

// Assuming "color" is your target color
float r = Color.red(color) / 255f;
float g = Color.green(color) / 255f;
float b = Color.blue(color) / 255f;

ColorMatrix cm = new ColorMatrix(new float[] {
        // Change red channel
        r, 0, 0, 0, 0,
        // Change green channel
        0, g, 0, 0, 0,
        // Change blue channel
        0, 0, b, 0, 0,
        // Keep alpha channel
        0, 0, 0, 1, 0,
});
ColorMatrixColorFilter cf = new ColorMatrixColorFilter(cm);
myDrawable.setColorFilter(cf);

score 10 · Answer 8 · answered Nov 15 '17 at 04:14

10

This worked for me. Make sure to put "ff" between 0x and color code. Like this 0xff2196F3

Drawable mDrawable = ContextCompat.getDrawable(MainActivity.this,R.drawable.ic_vector_home);
                    mDrawable.setColorFilter(new
                            PorterDuffColorFilter(0xff2196F3,PorterDuff.Mode.SRC_IN));

answered Nov 15 '17 at 04:14

Bek

7,790
4
18
31

Hi @Bek welcome to stackoverflow. If this worked for you, it would be very helpful to include a jsfiddle with minimal solution to show that. It will help the person who posted question to understand properly. – Arjun Chaudhary Nov 15 '17 at 04:21

score 6 · Answer 9 · answered May 18 '17 at 17:51

Same as the accepted answer but a simpler convenience method:

val myDrawable = ContextCompat.getDrawable(context, R.drawable.my_drawable)
myDrawable.setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN)
setCompoundDrawablesWithIntrinsicBounds(myDrawable, null, null, null)

Note, the code here is Kotlin.

score 6 · Answer 10 · answered Jul 08 '20 at 20:44

For those who use Kotlin a simple extension function:

fun Drawable.tint(context: Context,  @ColorRes color: Int) {
    DrawableCompat.setTint(this, context.resources.getColor(color, context.theme))
}

and then simply do

background.tint(context, R.color.colorPrimary)

score 5 · Answer 11 · answered Jul 12 '19 at 19:55

Use this: For java

view.getBackground().setColorFilter(Color.parseColor("#343434"), PorterDuff.Mode.SRC_OVER)

for Kotlin

view.background.setColorFilter(Color.parseColor("#343434"),PorterDuff.Mode.SRC_OVER)

you can use PorterDuff.Mode.SRC_ATOP, if your background has rounded corners etc.

score 3 · Answer 12 · edited Mar 05 '14 at 09:11

3

You may want to try Mode.LIGHTEN or Mode.DARKEN. The Android Javadocs are horrible at explaining what the PorterDuff Modes do. You can take a look at them here: PorterDuff | Android

I suggest looking around at Compositing on Mozilla's site here. (They don't have all the modes that android does but they have a lot of them)

edited Mar 05 '14 at 09:11

groovecoder

1,551
1
17
27

answered Jul 07 '12 at 16:12

sebsebmc

112
4

score 2 · Answer 13 · edited Jun 13 '19 at 11:01

2

Syntax

"your image name".setColorFilter("your context".getResources().getColor("color name"));

Example

myImage.setColorFilter(mContext.getResources().getColor(R.color.deep_blue_new));

edited Jun 13 '19 at 11:01

ArteFact

517
4
14

answered May 03 '19 at 10:06

Om Prakash Sharma

691
7
6

score 2 · Answer 14 · answered Mar 03 '21 at 14:46

You can change your drawable color in this way:

background = view.findViewById(R.id.background)

val uDrawable = AppCompatResources.getDrawable(view.context, R.drawable.background)
uDrawable?.let {
      val wDrawable = DrawableCompat.wrap(it)
      DrawableCompat.setTint(wDrawable, ContextCompat.getColor(view.context, 
                                                      color /*specify your int color code*/))
      background.background = wDrawable
}

score 2 · Answer 15 · answered Jul 05 '21 at 03:21

2

SDK >= 21 one line myIconImageView.getDrawable().setTint(getResources().getColor(myColor))

answered Jul 05 '21 at 03:21

close_file

331
2
5

Pretty nice, I recommend to use `Drawable newDrawable = myDrawable.mutate().setTint(getResources().getColor(myColor))` to avoid changing it globally – FreddaP Mar 03 '22 at 14:01

score 1 · Answer 16 · answered Mar 17 '22 at 16:32

1

Kotlin Version

val unwrappedDrawable =
            AppCompatResources.getDrawable(this, R.drawable.your_drawable)
        val wrappedDrawable = DrawableCompat.wrap(unwrappedDrawable!!)
DrawableCompat.setTint(wrappedDrawable, Color.RED)

answered Mar 17 '22 at 16:32

Latiful Mousom

11
3

score 0 · Answer 17 · answered May 16 '16 at 16:40

This is what i did:

public static Drawable changeDrawableColor(int drawableRes, int colorRes, Context context) {
    //Convert drawable res to bitmap
    final Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), drawableRes);
    final Bitmap resultBitmap = Bitmap.createBitmap(bitmap, 0, 0,
            bitmap.getWidth() - 1, bitmap.getHeight() - 1);
    final Paint p = new Paint();
    final Canvas canvas = new Canvas(resultBitmap);
    canvas.drawBitmap(resultBitmap, 0, 0, p);

    //Create new drawable based on bitmap
    final Drawable drawable = new BitmapDrawable(context.getResources(), resultBitmap);
    drawable.setColorFilter(new
            PorterDuffColorFilter(context.getResources().getColor(colorRes), PorterDuff.Mode.MULTIPLY));
    return drawable;
}

score 0 · Answer 18 · answered Sep 02 '19 at 16:38

Create Method like this :

//CHANGE ICON COLOR
private void changeIconColor(Context context ,int drawable){
    Drawable unwrappedDrawable = AppCompatResources.getDrawable(context, drawable);
    assert unwrappedDrawable != null;
    Drawable wrappedDrawable = DrawableCompat.wrap(unwrappedDrawable);
    DrawableCompat.setTint(wrappedDrawable, getResources().getColor(R.color.colorAccent));
}

and use it like it :

    changeIconColor(this,R.drawable.ic_home);

score 0 · Answer 19 · answered Nov 27 '19 at 11:35

0

Easiest Way to do it :

imageView.setColorFilter(Color.rgb(r, g b));

or

imageView.setColorFilter(Color.argb(a, r, g, b));

a, r, g, b : Color argb values.

answered Nov 27 '19 at 11:35

Anubhav

1,984
22
17

This will only work if the OP would have be using imageViews instead of drawables. – SowingFiber Dec 14 '19 at 10:54

ucMedia · Answer 20 · 2023-05-21T13:38:36.823

Long story short :

May 2023 Kotlin (all APIs):

 DrawableCompat.wrap
     (AppCompatResources.getDrawable(ctx, R.drawable.myDrawable)!!)
    .mutate()
    .also { DrawableCompat.setTint(it,0xFFff0000.toInt()) }

⚠ don't forget the mutate, a mutable drawable is guaranteed to not share its state with any other! This is especially useful when you need to modify properties of drawables loaded from resources. By default, all drawables instances loaded from the same resource share a common state; if you modify the state of one instance, all the other instances will receive the same modification. Calling this method on a mutable Drawable will have no effect.

Old - Java :

public Drawable getColoredDrawable(@DrawableRes int resid,int color){
    Drawable drawable= ContextCompat.getDrawable(context, resid).mutate();
    DrawableCompat.setTint(drawable, color);
    return drawable;
}

Change drawable color programmatically

20 Answers20

Linked

Related