Changing color of the Drawable or ImageView at runtime in Android

When working on a new Android application, we needed to show an icon (for info) in different colors depending on the different system states. Something like:

Red – When there are some error in the system
Green – If everything is working correctly.
Yellow – There are some warnings for the user to review.

We were using the Android Info icon for start. When working on this though, I thought that simplest option would be to just create all the required color icons in the Photoshop and then use them depending on different conditions. However, when working on the Photoshop Color/Hue adjustment screen, I realized that I may be able to do something similar in the Android using the Drawable class too, and indeed there was an option.

In fact, with just one line of code change, I was able to create all the different colors icons. A great plus is that this way I don’t have to create multiple copies of icon per different device resolution too. The Trick is in method setColorFilter (int color, PorterDuff.Mode mode) of Drawable. Here is the code snippets which worked for me:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Get the Image container object
ImageView imgStatus = (ImageView) findViewById(R.id.imgInfoIcon);
 
// Load the icon as drawable object
Drawable d = getResources().getDrawable(R.drawable.ic_menu_info_details);
 
// Get the color of the icon depending on system state
int iconColor = android.graphics.Color.BLACK
if (systemState == Status.ERROR)
	iconColor = android.graphics.Color.RED
else if (systemState == Status.WARNING)
	iconColor = android.graphics.Color.YELLOW
else if (systemState == Status.OK)
	iconColor = android.graphics.Color.GREEN
 
// Set the correct new color
d.setColorFilter( iconColor, Mode.MULTIPLY );
 
// Load the updated drawable to the image viewer
imgStatus.setImageDrawable(d);

When looking further, I found that ImageView object also support the setColorFilter method. So in case, you have set an icon at design time, and only want different colors of it depending on system state, then it might be easy to directly set that color filter to ImageView i.e. something like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Get the Image container object
ImageView imgStatus = (ImageView) findViewById(R.id.imgInfoIcon);
 
// Get the color of the icon depending on system state
int iconColor = android.graphics.Color.BLACK
if (systemState == Status.ERROR)
	iconColor = android.graphics.Color.RED
else if (systemState == Status.WARNING)
	iconColor = android.graphics.Color.YELLOW
else if (systemState == Status.OK)
	iconColor = android.graphics.Color.GREEN
 
// Set the correct new color
imgView.setColorFilter(iconColor, Mode.MULTIPLY);

That’s it. Simple and Nice.

BTW, if you have good experience of Photoshop, then you might also be interested in the second parameter of the setColorFilter method of type PorterDuff.Mode. If you don’t have Photoshop experience, but have a good sense of graphics, then following tutorial on the Porter Duff Rules might be good start for you:
Magic with Merlin: Porter-Duff rules!

Tags: Android, Color, Drawable

This entry was posted on Tuesday, July 31st, 2012 at 5:18 pm and is filed under Android. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.