[ICONS][GUIDE] Creating Mask Based Icon Themes (with Example)

I've only created two icon packs, but they seem to work, so I'll take you through my process.

The first thing to research is how mask based icons work in general. There's a dearth of good information, but I did find the Icons Special Features section of the ADW Theming Guide to be useful. Alternatively, you can follow along and examine my images to gain an understanding of what I've done.

Let's proceed.

I began with mathur's Icon-Pack Template, but I've modified it to fit my needs by removing unnecessary bits and the parts relating to non-mask based icon packs. See the attached example, Crinkle.zip

Once you've downloaded Crinkle.zip and imported the code into eclipse, there are several things you'll need to alter:

First, you must rename the package. This can be done by doing one (or both) these actions:

[project (context menu)] > Android Tools > Rename Application Package
[package (context menu)] > Refactor > Rename​

Second, ensure the correct scale factor. This can be found in two places:

assets / appfilter.xml
res / xml / appfilter.xml​

Third, make sure your informational strings are correct. There are two locations:

res / values / strings.xml
res / values / theme_config.xml​

Fourth, and most important, add your own icons. These can be found in res / drawable-xhdpi, and they are:

icon.png - the application icon
iconback.png - the background image
iconmask.png - the transparency / opacity mask
iconupon.png - the overlay image​

Now test it out.

My finished icon pack is live on Google Play under the title Crinkle Icon Theme.

Enjoy!

1rdc said:

This looks great, but how would you create a mask for making all the icons black and white? Something like this:

com.seangrondin.icons.filmstripdesaturate (sorry i can't post links yet )

I want to make a sepia themed icon mask.

Thanks

Click to expand...

Click to collapse

I looked into it a bit, and here's what I've discovered. If you include a res/xml/shader.xml file, you will be able to affect the color in at least Apex and Nova. I found a fairly detailed explanation that should help you get started.

I will soon update the original post to include more details about this, as well as a cleaner icon pack framework.