Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,769,404 Members 40,091 Now Online
XDA Developers Android and Mobile Development Forum

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

Tip us?
 
bdjnk
Old
#1  
bdjnk's Avatar
Member - OP
Thanks Meter 11
Posts: 33
Join Date: Jul 2010
Thumbs up [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!
Attached Thumbnails
Click image for larger version

Name:	Crinkle.png
Views:	73
Size:	62.3 KB
ID:	2806818   Click image for larger version

Name:	crinkle-desktop.jpg
Views:	131
Size:	151.4 KB
ID:	2806819   Click image for larger version

Name:	crinkle-drawer.jpg
Views:	95
Size:	133.8 KB
ID:	2806820  
Attached Files
File Type: zip Crinkle.zip - [Click for QR Code] (326.5 KB, 19 views)
The Following 3 Users Say Thank You to bdjnk For This Useful Post: [ Click to Expand ]
 
1rdc
Old
(Last edited by 1rdc; 16th July 2014 at 11:59 AM.) Reason: EDIT: spelling
#2  
Junior Member
Thanks Meter 1
Posts: 6
Join Date: May 2014
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 :P)

I want to make a sepia themed icon mask.

Thanks
 
1rdc
Old
#3  
Junior Member
Thanks Meter 1
Posts: 6
Join Date: May 2014
Default error

Also, I'm getting an error as soon as I import.
Is there a way to make this target api 10 instead of api 19?
Attached Thumbnails
Click image for larger version

Name:	Capture.PNG
Views:	37
Size:	11.1 KB
ID:	2854737  
 
bdjnk
Old
#4  
bdjnk's Avatar
Member - OP
Thanks Meter 11
Posts: 33
Join Date: Jul 2010
Quote:
Originally Posted by 1rdc View Post
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 :P)

I want to make a sepia themed icon mask.

Thanks
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.
 
1rdc
Old
(Last edited by 1rdc; 22nd July 2014 at 12:25 PM.)
#5  
Junior Member
Thanks Meter 1
Posts: 6
Join Date: May 2014
How do I make it compatible with Smart Launcher? The icon pack applies but the shader doesn't work and the theme doesn't show up under "Themes"
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes