Changing color of the Drawable or ImageView at runtime in Android

July 31st, 2012
Bookmark and Share

Android Colors

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: , ,

2 Responses to “Changing color of the Drawable or ImageView at runtime in Android”

  1. Sandesh Mendon says:

    how to change color of an image captured from a camera-android?

    • syedgakbar says:

      Sandesh,

      I think you can work on the similar lines i.e. capture the image, convert that image to the Drawable object, and then tweak the using setColorFilter with Multiply mode. You will have to play with it to get what you want.

      Regards, Akbar

Leave a Reply