Theming your images.

Have you ever considered theming the images of your app?

If you have a predominant color in your theme or graphics, then you can achieve great tone consistency across your app by simply adding a color filter to your images.

ImageViews in android have a method to apply color filters,

public final void setColorFilter(int color, PorterDuff.Mode mode) {
    setColorFilter(new PorterDuffColorFilter(color, mode));
}

but it is not so straightforward to use it because it requires some understanding of PorterDuff options.

Diving the internet, I have found out that there is a real algebra behind PorterDuff and luckily I came across a very nice article which cleared the topic for me. However, if you are more the kind of person who doesn’t like theories and prefer to see some concrete examples, then you will find this app very useful.

PorterDuff Demo

In PorterDuff Demo there is a sample image on which you can apply a predefined set of color as filters. Just by tapping the colors in the palette, the sample image will update accordingly. This will give you a general idea of how color filter works.

The next step is to play with PorterDuff options. The default PorterDuff option used in the demo app is “Overlay”.

You can try other PorterDuff options selecting them from the dropdown menu. At a certain point you will notice that the image or the color filter may not be visible anymore. This depends from how they are combined together by the PorterDuff option selected at each time. So to let you understand how the PorterDuff algebra works, I have added also a SeekBar widget which allows you to adjust the alpha level of the image. While playing with it you will understand if the two pixel sources, the color filter and the sample image, are blended together, included or excluded.

In the next blog post, I will extend the sample app to show you which effect is possible to achieve blending two images with PorterDuff instead of one image and one color filter. Stay tuned!

[Code available on Github].