597

I need to set tint for an image view... I am using it the following way:

imageView.setColorFilter(R.color.blue, android.graphics.PorterDuff.Mode.MULTIPLY);

But it doesn't change...

Improve this question
2
  • 17
    You may have used the integer resource id instead of integer color value, try to convert R.color.blue to getResources().getColor(R.color.blue) Commented May 19, 2015 at 16:29
  • Drawable drawable = ... ; drawable.setColorFilter(ContextCompat.getColor(context, R.color.white), PorterDuff.Mode.DST); imageView.setImageDrawable(drawable); // any color can be used here Commented May 21, 2018 at 11:05

30 Answers 30

Reset to default
1276

UPDATE:
@ADev has a newer solution in his answer here, but his solution requires a newer support library, 25.4.0 or above.

You can change the tint quite easily in code via:

imageView.setColorFilter(Color.argb(255, 255, 255, 255)); // White Tint

If you want color tint then

imageView.setColorFilter(ContextCompat.getColor(context, R.color.COLOR_YOUR_COLOR), android.graphics.PorterDuff.Mode.MULTIPLY);

For Vector Drawable

imageView.setColorFilter(ContextCompat.getColor(context, R.color.COLOR_YOUR_COLOR), android.graphics.PorterDuff.Mode.SRC_IN);
Improve this answer
Sign up to request clarification or add additional context in comments.

18 Comments

More Information: public final void setColorFilter (int color, PorterDuff.Mode mode)
In xml, android:tint="@color/blue"
android:tint="@color/blue" does not work while loading image via Glide.
android:tint works on all android versions. Maybe you're talking about drawableTint?
PorterDuff.Mode.MULTIPLY doesn't work in my situation i used PorterDuff.Mode.SRC_IN and it works
|
413

Most answers refer to using setColorFilter which is not what was originally asked.

The user @Tad has his answer in the right direction but it only works on API 21+.

To set the tint on all Android versions, use the ImageViewCompat:

ImageViewCompat.setImageTintList(imageView, ColorStateList.valueOf(yourTint));

Note that yourTint in this case must be a "color int". If you have a color resource like R.color.blue, you need to load the color int first:

ContextCompat.getColor(context, R.color.blue);
Improve this answer

3 Comments

Should be the accepted answer. Note that it works only on xml ImageView instances with AppCompat theme or on AppCompatImageView subclasses.
@ADev appreciate your solution but the question was asked in 2013 and ImageViewCompat and AppCompatImageView release with v4 support lib 25.4.0 in June 2017 and 25.1.0 December 2016 respectively :)
@ADev of course but you haven't mention it properly in your answer that your solution is new and require newer support library 25.4.0 and above because with lower version of support lib this class is not available so no one could find it !!!! by the way i edited the answer :) good day...
80

This worked for me 

mImageView.setColorFilter(ContextCompat.getColor(getContext(), R.color.green_500));
Improve this answer

2 Comments

yeah, worked for me too, without the second parameter.. it also can goes mImageView.setColorFilter(getContext().getResources().getColor(R.color.green_500));
upvoted and without the second parameter, it works like charm. Thx @toobsco42
40

Hardik has it right. The other error in your code is when you reference your XML-defined color. You passed only the id to the setColorFilter method, when you should use the ID to locate the color resource, and pass the resource to the setColorFilter method. Rewriting your original code below.

If this line is within your activity:

imageView.setColorFilter(getResources().getColor(R.color.blue), android.graphics.PorterDuff.Mode.MULTIPLY);

Else, you need to reference your main activity:

Activity main = ...
imageView.setColorFilter(main.getResources().getColor(R.color.blue), android.graphics.PorterDuff.Mode.MULTIPLY);

Note that this is also true of the other types of resources, such as integers, bools, dimensions, etc. Except for string, for which you can directly use getString() in your Activity without the need to first call getResources() (don't ask me why).

Otherwise, your code looks good. (Though I haven't investigated the setColorFilter method too much...)

Improve this answer

Comments

33

Better simplified extension function thanks to ADev

fun ImageView.setTint(@ColorRes colorRes: Int) {
    ImageViewCompat.setImageTintList(this, ColorStateList.valueOf(ContextCompat.getColor(context, colorRes)))
}

Usage:-

imageView.setTint(R.color.tintColor)
Improve this answer

3 Comments

Is there a similar one for the Button's/TextView's text tint?
do you mean textview text color or tint for textview drawable ?
I mean "text tint". The color of the text. But I think it's quite problematic, as text has a color for each state... Then again, how come it works fine for when I set accent color ... Odd.... Is it possible perhaps to set the accent color to a specific Button (or TextView) , programmatically ?
25

After i tried all methods and they did not work for me.

I get the solution by using another PortDuff.MODE.

imgEstadoBillete.setColorFilter(context.getResources().getColor(R.color.green),PorterDuff.Mode.SRC_IN);
Improve this answer

Comments

25

If your color has hex transparency, use the below code.

ImageViewCompat.setImageTintMode(imageView, PorterDuff.Mode.SRC_ATOP);
ImageViewCompat.setImageTintList(imageView, ColorStateList.valueOf(Color.parseColor("#80000000")));

To clear the tint

ImageViewCompat.setImageTintList(imageView, null);
Improve this answer

2 Comments

what is "img"'s type
@Beyaz img is of type ImageView.
17

Simple and one line

imageView.setColorFilter(activity.getResources().getColor(R.color.your_color));
Improve this answer

Comments

16

Beginning with Android 5.0 (Lollipop), there is also a tint method for BitmapDrawables that works with the new Palette class:

public void setTintList (ColorStateList tint)

and

public void setTintMode (PorterDuff.Mode tintMode)

On older versions of Android, you can now use the DrawableCompat library.

Improve this answer

1 Comment

actually, the support library does support it. see my answer: stackoverflow.com/a/34479043/878126
15

An extension function in Kotlin, to set and unset the tinting.

fun ImageView.setTint(@ColorRes color: Int?) {
  if (color == null) {
    ImageViewCompat.setImageTintList(this, null)
  } else {
    ImageViewCompat.setImageTintList(this, ColorStateList.valueOf(ContextCompat.getColor(context, color)))
}}

Usage: yourImageView.setTint(R.color.white) for setting and for removing just: yourImageView.setTint(null)

Improve this answer

Comments

14

Try this. It should work on all Android versions that the support library supports:

public static Drawable getTintedDrawableOfColorResId(@NonNull Context context, @NonNull Bitmap inputBitmap, @ColorRes int colorResId) {
    return getTintedDrawable(context, new BitmapDrawable(context.getResources(), inputBitmap), ContextCompat.getColor(context, colorResId));
}

public static Drawable getTintedDrawable(@NonNull Context context, @NonNull Bitmap inputBitmap, @ColorInt int color) {
    return getTintedDrawable(context, new BitmapDrawable(context.getResources(), inputBitmap), color);
}

public static Drawable getTintedDrawable(@NonNull Context context, @NonNull Drawable inputDrawable, @ColorInt int color) {
    Drawable wrapDrawable = DrawableCompat.wrap(inputDrawable);
    DrawableCompat.setTint(wrapDrawable, color);
    DrawableCompat.setTintMode(wrapDrawable, PorterDuff.Mode.SRC_IN);
    return wrapDrawable;
}

You can use any of the above to make it work.

You can read about more interesting features of DrawableCompat on the docs, here.

Improve this answer

3 Comments

I also had to do imageView.getBackground() to get the drawable, because imageView.getDrawable() was returning null.
@RockLee be sure that you used src in image view xml or setImageResource in code
this is the perfect way to set tint color for imageview background
14

A Kotlin solution using an extension function, to set and unset the tinting:

fun ImageView.setTint(@ColorInt color: Int?) {
    if (color == null) {
        ImageViewCompat.setImageTintList(this, null)
        return
    }
    ImageViewCompat.setImageTintMode(this, PorterDuff.Mode.SRC_ATOP)
    ImageViewCompat.setImageTintList(this, ColorStateList.valueOf(color))
}
Improve this answer

Comments

13

I found that we can use a color selector for the tint attribute:

mImageView.setEnabled(true);

activity_main.xml:

<ImageView
    android:id="@+id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_arrowup"
    android:tint="@color/section_arrowup_color" />

section_arrowup_color.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/white" android:state_enabled="true"/>
    <item android:color="@android:color/black" android:state_enabled="false"/>
    <item android:color="@android:color/white"/>
</selector>
Improve this answer

3 Comments

Hi, It's not working for vector drawables..Any workaround for same?
@Manukumar Use app:srcCompat instead of android:src , and add vectorDrawables.useSupportLibrary = true into the defaultConfig part of your build.gradle file. Tested to work fine on Kitkat emulator.
As per Android docs, I've created a subdirectory color in the res directory to store the file section_arrowup_color.xml. Android Studio will help you create new files if you right click on the color subdirectory, select new and then Color Resource File.
13

For setting tint for an image view programmatically in Android, I have two methods for Android:

1)

imgView.setColorFilter(context.getResources().getColor(R.color.blue));

 DrawableCompat.setTint(imgView.getDrawable(),
                     ContextCompat.getColor(context, R.color.blue));
Improve this answer

Comments

10

Adding to ADev's answer (which in my opinion is the most correct), since the widespread adoption of Kotlin, and its useful extension functions:

fun ImageView.setTint(context: Context, @ColorRes colorId: Int) {
    val color = ContextCompat.getColor(context, colorId)
    val colorStateList = ColorStateList.valueOf(color)
    ImageViewCompat.setImageTintList(this, colorStateList)
}

I think this is a function which could be useful to have in any Android project!

Improve this answer

Comments

10

As the first answer didn't work for me:

// Get ImageView
ImageView myImageView = (ImageView) findViewById(R.id.iv);

// colorid is the id of a color defined in values/colors.xml
myImageView.setImageTintList(ColorStateList.valueOf(ContextCompat.getColor(getApplicationContext(), R.color.colorid)));

This only seems to work in API 21+, but for me that wasn't an issue. You can use an ImageViewCompat to resolve that issue, though.

Improve this answer

Comments

8

Beginning in Android 5.0 (Lollipop), there is a method called ImageView#setImageTintList() that you can use... the advantage being that it takes a ColorStateList as opposed to just a single color, thus making the image's tint state-aware.

On pre-Lollipop devices, you can get the same behavior by tinting the drawable and then setting it as the ImageView's image drawable:

ColorStateList csl = AppCompatResources.getColorStateList(context, R.color.my_clr_selector);
Drawable drawable = DrawableCompat.wrap(imageView.getDrawable());
DrawableCompat.setTintList(drawable, csl);
imageView.setImageDrawable(drawable);
Improve this answer

Comments

6 
Random random=new Random;
ImageView imageView = (ImageView) view.findViewById(R.id.imageView);
ColorFilter cf = new PorterDuffColorFilter(Color.rgb(random.nextInt(255), random.nextInt(255), random.nextInt(255)),Mode.OVERLAY);

imageView.setImageResource(R.drawable.ic_bg_box);
imageView.setColorFilter(cf);
Improve this answer

Comments

4

In Java, I'm using

imageView.setImageTintList(ColorStateList.valueOf(ContextCompat.getColor(context, R.color.red)));
Improve this answer

Comments

3

Don't use PoterDuff.Mode, Use setColorFilter() it works for all.

ImageView imageView = (ImageView) listItem.findViewById(R.id.imageView);
imageView.setColorFilter(getContext().getResources().getColor(R.color.msg_read));
Improve this answer

Comments

3

In case you want to set selector to your tint:

ImageViewCompat.setImageTintList(iv, getResources().getColorStateList(R.color.app_icon_click_color));
Improve this answer

Comments

3

As milosmns said, you should use

imageView.setColorFilter(getResouces().getColor(R.color.blue), android.graphics.PorterDuff.Mode.MULTIPLY);

This API needs a color value instead of a color resource id. That was the root cause why your statement didn't work.

Improve this answer

Comments

2

For me, this code works. I use it with card and image views, but I think_ it works in any view to change their tints colors. cardBookmark is my cardView.

var cardDrawable: Drawable = binding.cardBookmark.background
cardDrawable = DrawableCompat.wrap(cardDrawable)
DrawableCompat.setTint(cardDrawable, resources.getColor(R.color.shuffleColor))
binding.cardBookmark.background = cardDrawable
Improve this answer

Comments

2

I did the below:

view.drawable.setTint(ContextCompat.getColor(requireContext(),R.color.color_05F73F))
Improve this answer

Comments

2

I didn't see my solution above. We are able to set tint color via setImageResource(), too (my minSdkVersion is 24).

So, first, you need to create a selector and save it in /drawable asset folder (I call it ic_color_white_green_search.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Focused and not pressed -->
    <item android:state_focused="true"
          android:state_pressed="false">

        <bitmap android:src="@drawable/ic_search"
                android:tint="@color/branding_green"/>
    </item>

    <!-- Focused and pressed -->
    <item android:state_focused="true"
          android:state_pressed="true">

        <bitmap android:src="@drawable/ic_search"
                android:tint="@color/branding_green"/>
    </item>

    <!-- Default -->
    <item android:drawable="@drawable/ic_search"/>

</selector>

Then set it in code like this:

val icon = itemView.findViewById(R.id.icon) as ImageButton
icon.setImageResource(R.drawable.ic_color_white_green_search)
Improve this answer

Comments

1

Disclaimer: This is not the answer for this post. But it is the answer for this question i.e. how to reset the color/tint of the drawable or imageview. Sorry, for putting this over here as that question is not accepting answers and referring to this post for answers. So, adding it here so that someone looking for a solution might look end up at this.

As mentioned by @RRGT19 in the comment of this answer. We can reset the color using setImageTintList() and passing null as the tintList. It worked magically for me.

ImageViewCompat.setImageTintList(imageView, null)
Improve this answer

Comments

0

After I tried all methods and they did not work for me.

I get the solution specially in case if you are changing the color through any colorPicker library which returns an Integer value of selectedColor.

widgetIcon is my ImageView and selectedColor is the color from colorPicker

var imageDrawable: Drawable = widgetIcon.background
        imageDrawable = DrawableCompat.wrap(imageDrawable)
        DrawableCompat.setTint(imageDrawable, selectedColor)
        widgetIcon.background = imageDrawable
Improve this answer

Comments

0

Use:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    menuIcon.setImageTintList(ColorStateList.valueOf(ContextCompat.getColor(this, R.color.primary)));
}

I use this piece of code to change the tint of my menuIcon.

Improve this answer

Comments

0

If you are changing tint on Focus change, then try this please:

DrawableCompat.setTint(imgView.getDrawable(),
                 ContextCompat.getColor(context, R.color.blue));
Improve this answer

Comments

-5

It is not an exact answer, but a simpler alternative:

  • Place another view on top of the image
  • Change the alpha value of the view however you want (programmatically) to get the desired effect.

Here is a snippet for that:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="@dimen/height120"
        android:contentDescription="@string/my_description"
        android:scaleType="fitXY"
        android:src="@drawable/my_awesome_image"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/height120"
        android:alpha="0.5"
        android:background="@color/my_blue_color"/>
</FrameLayout>
Improve this answer

4 Comments

this is about tint! not alpha that is for transparency.
But that ends up acting as a tint. You should try it yourself. This is just one way to look at things.
@ShubhamChaudhary I know this is late but what if the image is png. Then won't the background change? Also Alpha and tint are very different. Tint Is like color replacement, if I am not wrong. No offence intended. Just trying to help :)
Valid point. This answer helped in my case. Hope fits someone else's shoes too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.