How to set tint for an image view programmatically in android?

G

30

584

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...

Gatha answered 21/11, 2013 at 13:10 Comment(2)

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) – Measurement 19/5, 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 – Heterography 21/5, 2018 at 11:5

I

1265

UPDATE:
@ADev has newer solution in his answer here, but his solution requires 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);

Illusionist answered 21/11, 2013 at 13:13 Comment(18)

More Information: public final void setColorFilter (int color, PorterDuff.Mode mode) – Libelous 29/5, 2015 at 16:36

In xml, android:tint="@color/blue" – Flurried 17/3, 2016 at 15:2

android:tint="@color/blue" does not work while loading image via Glide. – Mercy 14/12, 2016 at 8:35

i am using this code but it takin lot of time to set the color on image – Balling 19/12, 2016 at 9:39

Plus android:tint is 21+ – Kid 17/3, 2017 at 5:43

android:tint works on all android versions. Maybe you're talking about drawableTint? – Mcneely 20/4, 2017 at 11:10

@Mcneely the question was how to set tint programmatically not from xml. Read more: developer.android.com/reference/android/widget/… – Illusionist 24/4, 2017 at 6:28

@Illusionist sorry, the reply was intended for user3175580's reply where he was talking about the xml-part – Mcneely 26/4, 2017 at 14:43

PorterDuff.Mode.MULTIPLY doesn't work in my situation i used PorterDuff.Mode.SRC_IN and it works – Alexei 26/9, 2017 at 11:13

The same situation to @mohnage7. PorterDuff.Mode.MULTIPLY doesn't work for vector drawable in Android 8 for me, but PorterDuff.Mode.SRC_IN works. – Willwilla 24/10, 2017 at 20:42

The same situation to @mohnage7. PorterDuff.Mode.MULTIPLY doesn't work for vector drawable in Android 6.0.1 MXB48T for me, but PorterDuff.Mode.SRC_IN works. – Maldon 25/10, 2017 at 6:40

I faced with an interesting problem. Although I am using the methods described above, it does not work on Samsung Note 3 device. Then I figure out an interesting case : When initial tint color is given from xml, it cannot be changed dynamically with these methods. Solution is quite simple, I just remove tint attribute from xml and set initial tint color also dynamically and cheers.. Hope this saves a few minutes for others :) – Remaremain 1/12, 2017 at 8:12

Was trying to tint an ImageButton which had png image in it with DrawableCompat.setTint(v.getDrawable(), ContextCompat.getColor(getContext(), R.color.gold)); which didn't work on API 19, but this did: v.setColorFilter(ContextCompat.getColor(getContext(), R.color.gold), android.graphics.PorterDuff.Mode.SRC_IN); – Perfectionism 16/1, 2018 at 11:14

Your update should have referenced my answer since that's where you got it from: https://mcmap.net/q/64384/-how-to-set-tint-for-an-image-view-programmatically-in-android – Stays 14/2, 2018 at 13:12

@Stays 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... – Illusionist 14/2, 2018 at 14:48

it works perfectly fine except for Data Binding + Lenovo A7000-a + VectorDrawable T_T – Aerification 19/4, 2018 at 10:40

ImageView imageViewIcon = (ImageView) listItem.findViewById(R.id.imageViewIcon); imageViewIcon.setColorFilter(getContext().getResources().getColor(R.color.blue)); – Prison 3/7, 2018 at 11:24

This method does not work if the tint is set via XML. Remove tint from XML and set via this method programmatically. – Tiernan 13/2, 2019 at 16:39

S

405

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);

Stays answered 8/8, 2017 at 15:0 Comment(3)

Should be the accepted answer. Note that it works only on xml ImageView instances with AppCompat theme or on AppCompatImageView subclasses. – Chaconne 10/11, 2017 at 13:0

@Stays 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 :) – Illusionist 27/1, 2018 at 8:22

@Stays 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... – Illusionist 14/2, 2018 at 14:20

C

79

This worked for me

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

Chardin answered 14/10, 2015 at 17:59 Comment(2)

yeah, worked for me too, without the second parameter.. it also can goes mImageView.setColorFilter(getContext().getResources().getColor(R.color.green_500)); – Sharpedged 11/1, 2018 at 8:56

upvoted and without the second parameter, it works like charm. Thx @toobsco42 – Sibert 1/11, 2018 at 5:24

E

39

@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...)

Endogamy answered 12/8, 2014 at 17:5 Comment(0)

B

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)

Bozen answered 8/5, 2019 at 7:34 Comment(3)

Is there a similar one for the Button's/TextView's text tint? – Utile 18/7, 2019 at 14:14

do you mean textview text color or tint for textview drawable ? – Bozen 19/7, 2019 at 4:4

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 ? – Utile 20/7, 2019 at 9:47

O

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);

Overplay answered 25/10, 2016 at 13:53 Comment(0)

G

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);

Gazzo answered 4/5, 2018 at 11:43 Comment(2)

what is "img"'s type – Illuminometer 5/11, 2018 at 17:38

@Beyaz img is of type ImageView. – Gazzo 5/11, 2018 at 19:54

D

17

Simple and one line

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

Dogooder answered 27/3, 2018 at 5:8 Comment(0)

F

16

Beginning with 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

Firewarden answered 13/1, 2015 at 18:43 Comment(1)

actually, the support library does support it. see my answer: https://mcmap.net/q/64384/-how-to-set-tint-for-an-image-view-programmatically-in-android – Utile 27/12, 2015 at 9:9

U

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.

Utile answered 27/12, 2015 at 9:8 Comment(3)

I also had to do imageView.getBackground() to get the drawable, because imageView.getDrawable() was returning null. – Sign 1/6, 2016 at 16:22

@RockLee be sure that you used src in image view xml or setImageResource in code – Looney 8/9, 2016 at 12:36

this is the perfect way to set tint color for imageview background – Yeomanly 16/1, 2019 at 4:38

U

14

Kotlin solution using 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))
}

Utile answered 4/5, 2020 at 13:17 Comment(0)

F

13

I found that we can use color selector for tint attr:

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>

Flame answered 14/6, 2017 at 9:41 Comment(3)

Hi, It's not working for vector drawables..Any workaround for same? – Muttonchops 28/8, 2018 at 12:46

@Muttonchops 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. – Utile 15/1, 2019 at 10:10

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. – Utilitarian 4/4, 2021 at 22:40

Z

13

For set tint for an image view programmatically in android

I have two methods for android :

1)

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

2)

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

I hope I helped anyone out :-)

Zsa answered 3/5, 2019 at 10:15 Comment(0)

V

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, tho.

I hope I helped anyone out :-)

Varese answered 12/10, 2017 at 20:43 Comment(0)

P

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!

Pattern answered 25/4, 2019 at 8:14 Comment(0)

B

10

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)

Bajaj answered 20/4, 2022 at 9:33 Comment(0)

B

8

Beginning in 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);

Booking answered 26/10, 2016 at 4:4 Comment(0)

S

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);

Sanitary answered 28/4, 2014 at 12:16 Comment(0)

S

4

In java I'm using

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

Society answered 25/1, 2023 at 5:6 Comment(0)

P

3

As @milosmns said, you should use imageView.setColorFilter(getResouces().getColor(R.color.blue),android.graphics.PorterDuff.Mode.MULTIPLY);

This API need color value instead of color resource id, That's the root cause why your statement didn't work.

Paduasoy answered 8/10, 2015 at 15:9 Comment(0)

P

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));

Prison answered 3/7, 2018 at 11:25 Comment(0)

P

3

In case you want to set selector to your tint:

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

Provisory answered 15/3, 2019 at 10:2 Comment(0)

M

2

I am late in the party but I didn't see my solusion 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)

<!-- 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"/>

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)

Margetts answered 13/12, 2018 at 19:27 Comment(0)

K

2

For me this code works. I use it with card and image views but i thins 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

Kenji answered 1/7, 2021 at 22:0 Comment(0)

H

2

I did below:

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

Hegemony answered 1/7, 2023 at 9:19 Comment(0)

S

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)

Singe answered 18/2, 2022 at 6:14 Comment(0)

I

0

if you are changing tint on Focus change then try this please

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

Inobservance answered 27/12, 2022 at 6:53 Comment(0)

D

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

Descendible answered 20/1, 2023 at 15:15 Comment(0)

D

0

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 hope this helps.

Darees answered 12/10, 2023 at 9:20 Comment(0)

N

-4

Not 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>

Nuts answered 24/8, 2015 at 5:52 Comment(4)

this is about tint! not alpha that is for transparency. – Alithia 28/1, 2016 at 9:47

But that ends up acting as a tint. You should try it yourself. This is just one way to look at things. – Nuts 28/1, 2016 at 13:15

@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 :) – Amasa 13/6, 2016 at 18:46

Valid point. This answer helped in my case. Hope fits someone else's shoes too. – Nuts 13/6, 2016 at 19:11

Recommended topics

Hot tags