Android Tricks: Automatic Icon Shading with Cocoa-Like Template Images

Apple’s Cocoa framework has a built-in mechanism that applies consistent styling to user interface icons. The feature is made available to developers through a special NSImage template mode, which is enabled by default for images that have the “Template” suffix in their name.

Template images on OS X are typically black silhouettes—when the system displays them in template mode, it automatically applies gradient shading and color filters. This feature is especially useful for non-designers because it makes it very easy to create toolbar icons that will look great while retaining visual consistency with the rest of the underlying platform.

As a developer, you only have to supply the black shape of the icon you want to use (variations are allowed via the image alpha channel) and then you can let the system worry about making them look right. These effects are used everywhere on Mac OS X: you can find icons with the template style applied in application toolbars and sidebars. The following image shows an example:

Android also comes with certain effects for images, but nothing similar to the Cocoa template image style. I hacked together a simple method that reproduces the toolbar icon effect by layering a gradient on top of a similarly-made template image.

The following is the code for the method:

public class Shadifier
{
	public static Bitmap AddShading (Bitmap src)
	{
		var buffer = src.Copy (src.GetConfig (), true);
		var gradient = new LinearGradient (0, 0, src.Width, src.Height,
		                                   Color.Argb (0xE5, 0, 0, 0),
		                                   Color.Argb (0xA0, 0, 0, 0),
		                                   Shader.TileMode.Clamp);
		var overlay = new Paint { AntiAlias = true };
		overlay.SetShader (gradient);
		overlay.SetXfermode (new PorterDuffXfermode (PorterDuff.Mode.DstIn));
		 
		using (var canvas = new Canvas (buffer))
			canvas.DrawPaint (overlay);

		return Bitmap.CreateBitmap (buffer);
	}
}

The source Bitmap needs to be a black image with a transparent background, exactly like Mac OS X’s template images. Similarly, you can make variations on your shape by using different alpha values. You can refer to the toolbar and sidebar sections of Apple’s icon design guidelines for more details.

For added bling, you can use Bitmap images created from SVG resources—in the same way that Mac OS X lets developers load template icons from PDF files. Refer to my my previous blog post for more details about using SVG resources.

The following image shows the effect from the above method applied to the familiar apple icon. The left side shows what the icon looks like with the gradient applied. The original source icon is shown on the right.

You can play with the alpha values of the LinearGradient used in the code to tune the appearance of the effect—I selected the current values myself.