[Android Themes] BrooklynAvi:
I want to preface this by saying that I am in no way, shape or form a graphic artist. I've picked up a bunch of techniques out of necessity over the last 15 years of being a Web developer but most of my techniques can be done faster and more efficiently by a qualified graphic artist. That said, I've managed to produce some pretty decent stuff over the years considering I don't really have a clue. :-) So use this guide to help you put your graphics knowledge to work by creating some amazing themes.

I created a theme for GO Launcher EX called "Sepia Theme for GO Launcher EX" (shameless plug: https://market.android.com/details?id=com.aac.go.sepia) and figured I'd share my experiences on how I created it. It took me three nights to create the theme above but I imagine if I was an actual graphic artist and wasn't learning as I did it I could have done it in a day (I'm also counting testing time and time to package and post to the Market). Anyway, here's how I did and how you can too.

Attached to this post is an Android Eclipse project that you can use as a template. I originally created the project using the GO Dev Team's Theme Factory which actually created the project (Link: Theme Factory) and was the base for the Eclipse project in this post. I found that while a good start, the Theme Factory did not allow for certain code customizations (such as adding multiple wallpapers and preview graphics) as well as not allowing for custom namespaces which is really needed to make the theme your own. So, after using the Theme Factory to create the initial Android code, I imported it into Eclipse, stripped out all the garbage and cleaned it up a bit. All the graphics used are the default ones added by the Theme Factory so you will want to change them in your own theme. Here are some of the things you will want to customize when making your own theme (these are the absolute basics and if you are a graphic artist you will have no trouble digging in and customizing every other aspect). I highly recommend you download and open the Theme Factory and at least check it out. It's very rough but will clue you in to what graphics you should be customizing to create a theme. This assumes that you know how to use Eclipse and if you don't, that is beyond what I'm willing to discuss here. There are plenty of places to read up on that.

Icons

To add icons to the theme there are several steps you will need to take. First, create your icons. Once you have the icons you want for your theme you will want to add them to your project. Icons are placed in the GOThemeTemplate/res/drawable-hdpi. Once added there, you will need to reference them in two .xml files in Eclipse. Open GOThemeTemplate/assets/drawable.xml. Using the name of the png file you just added to the drawable-hdpi folder (do NOT add the ".png"), add a new <item> element for each. You will see a bunch listed there as examples for you but it will be in the form of

<item drawable="png_name" />

Next, add a corresponding line to the GOThemeTemplate/assets/appfilter.xml file. It will be in the following format

<item component="ComponentInfo{com.package.name/com.package.name.LaunchActivity}" drawable="png_name"/>

The tricky part here is the component attribute. In order to enter the correct information for the brackets after ComponentInfo, you will need to find the correct package name for the app that the icon represents and the default activity that is launched when the icon is clicked. While this could be a ridiculously tedious process, the is a wonderful Web site that does all the work for you. Simply visit http://activities.droidicon.com and enter the app's name in the search box. At the time of this writing they have cataloged nearly 110,000 apps with they package names, main activity, icon and the proper format for three popular launchers' themes (ADW, Launcher Pro and GO Launcher EX). So once you have the proper package name and activity for the app whose icon you wish to replace (it is the last option and it even selects the text when you click it saving you one step), paste it between the brackets. Finally, in the drawable attribute, add the name of the png for the icon as you did in the drawable.xml file (again, do not add the ".png").

The theme template attached to this post contains the correct <item> tags for over 200 icons (sorry, icons not included, that's your job). There are many icons included as examples but only those created with the Theme Factory.

The last thing you will need to deal with for the icons is the default icon back. In the GOThemeTemplate/res/drawable-hdpi folder you will find a file called iconback.png. This is the icon that will be placed behind all icons on the device that do not have a specific icon created for it. All icons will be scaled to fit atop this icon. The default is 70% of the icon's size. This can be changed in the appfilter.xml file in the <scale> tag at the top of the file. It looks like this: <scale factor="0.7"/>. Just change the factor attribute (1 being the actual size). You can change the name of the icon back image using the <iconback> tag in the appfilter.xml. There is also a transparent image that goes atop both icons called iconupon which can be changed using the <iconupon> tag. This creates an illusion that the three icons are one.

Theme Configuration

When users click Menu > Themes in GO Launcher EX they will be presented with a graphical representation of all the themes currently installed on their device. You want them to find your theme too. You will be working with a file name GOThemeTemplate/assets/themecfg.xml and there are a few images you will need to create and they are all to be placed in the GOThemeTemplate/res/drawable-hdpi folder.

A thumbnail preview image exactly 110x180 in png format. You can view the image I left from my theme as an example. It's themepreview.png and the name of this image is defined <preview> tag (you can change this if you wish).

One or more screenshots also in PNG format that are placed in the drawable-hdpi folder as well. These are also defined in the <preview> tag and and I have left three example screenshots as well.

Each drawable above is defined in the <preview> tag with attributes labeled img1, img2, img3, etc.

Finally, when users are previewing your theme you can provide them additional information such as the theme's name, your Web address and contact information. This is done in the GOThemeTemplate/res/values/themeinfo.xml file. There are two <string> elements with name attributes for defining the theme's name (as displayed on the theme chooser screen, not in the Market) and theme's information.

Wallpapers

To add wallpapers to your theme, you will need to modify at least one file (two if you want to change the name of your default wallpaper). You will need to edit the GOThemeTemplate/res/values/array.xml file. Open this file and edit the <string-array> element with the name attribute of <string-array name="wallpaperlist">. You will add an item element for every wallpaper you wish to add. For example, let's assume you have three wallpapers with following names:

wallpaper_sand.jpg

wallpaper_barrel.jpg

wallpaper_cloud.jpg

You would place these three wallpapers in the GOThemeTemplate/res/drawable-hdpi folder and then add three <item> elements to the XML file like this.

<item>wallpaper_sand</item>
<item>wallpaper_barrel</item>
<item>wallpaper_cloud</item>

To define which wallpaper loads as the default wallpaper when the theme is applied, edit the Wallpaper attribute of the <Desk> element in GOThemeTemplate/assets/desk.xml.

Before users can a wallpaper other than the default wallpaper you will need to add thumbnails of the wallpapers. To do this, create thumbnail images in PNG format with dimensions of 170x142. Save them using the same name as the JPGs but add "_thumb" to the end. So, wallpaper_sand.jpg becomes wallpaper_sand_thumb.png.

Your Theme's Name

To name your app as it will appear in the app drawer, open GOThemeTemplate/res/values/strings.xml and edit the <string> element with the name attribute of "app_name."

Your Theme's Icon

To change the icon for your them, change the icon.png in the GOThemeTemplate/res/drawable-hdpi folder.

Package Name

You will need to customize the package name for publication in the Android Market. This name must be unique. Frankly, if you are actually using Eclipse and are editing these file then you should already be familiar with this. You will need to open the GOThemeTemplate/AndroidManifest.xml file and edit the "package" attribute in the <manifest> element.

Further Customizations

This tutorial really gives you a very basic overview on adding icons and wallpapers to your theme and how to get the basics accomplished. To really make your theme a theme and to stand out and be unique, there are dozens of other PNGs that you will need to edit, each being responsible for a specific UI element. For example, to add your own folder icon, edit the GOThemeTemplate/res/drawable-hdpi/folderback.png image. You will have to figure out what each icon does and how you can best edit them. The Theme Factory is an extremely useful tool for this and I highly recommend that you use that program alongside this tutorial and Eclipse project when creating your theme. The Theme Factory will guide you image by image and show you previews of what each does. However, I found that that's about the only things it's good for. When compiling my theme I found that Eclipse was the most efficient method. As mentioned above, multiple wallpapers and screen previews are not possible as of yet using the Theme Factory so you will need to manually edit the files anyway. I suggest starting with this project as it is really just a cleaned up version of what the Theme Factory produces and to use the Theme Factory as your images guide.

Download Template

You can download the Eclipse project theme template at the end of this post.

I hope that this guide helps you and if you have any questions, feel free to post it here. I can't promise that I'll answer (I'm not on here as much as I used to be) but my hope is that this becomes a good spot for theme creation discussion.