If you had a desire to create your own custom skin for screen shots of your awesome app for Google Play store and had trouble finding an example to work from… Well, you’re in some luck as I’m going to give away what I used to create mine. The app I created (GasUP) was my first attempt to work through the entire development pipeline, I guess an exercise you can say, to finish my Android Developer Certification from the University of Texas in Arlington.
However, being a bit retentive on presentation, I was not satisfied with the flat emulator screen shots you can do and… a desktop screen capture of a scaled emulator just looks like garbage. So for a stylized “brand” for publishing, I wanted to create something unique which also allowed me to provide some ‘tagline’ space for wording.
Here’s a snap shot of the template:
Figure 1: HTC Desire Cloned Photoshop Template
I basically grabbed one of the latest HTC Desire images from their website and built a template of it (changing a few details for my use in an artistic way, hopefully to not infringe on the design). The type of phone and design isn’t the focus here, but rather what you can do with it to create your own emulator skin.
I broke apart the template into a large enough format (1477px X 2754px), to be able to create some clean and presentable images. I then proceeded to create a few ‘hardware’ control layers and buttons which will be used via the emulator “layout” file to provide some capabilities while testing. Things such as the power button, back key, menu, and audio… (Example will be found in the “Custom” directory of the archive file found below).
The Layout File
The layout file for the emulator reminds me of a very simple CSS like syntax just without as much decoration, and perhaps some required spacing for formatting. The trick is to get the position values for your “button” placement within a tool like Photoshop (a few pixels offset here or there will not kill it), and enter that information into the layout file. It should be mostly self-explanatory once you look it over, but I’ll briefly cover the major components.
There are two primary sections to the file, “parts” and “layouts”… each serving a very particular purpose. The “parts” section describes all the elements that make up your layout and can be broken out between a portrait or landscape versioning. The sample I provide only demonstrates the portrait mode, but creating a landscape mode should be nearly the same. The hardware “buttons” are clearly outlined in the file, but you should make note that the members of those declarations provide the placement of the appropriate images within the context of the overall skin (0,0 being upper left, and N,N lower right).
The “device” section of the parts category is important, as this is the basic pixel resolution of the device display. In my sample, this is configured for a high dpi device 1080 x 1920 with its starting point being 0,0 (at least that’s what I believe those values represent). So if you create skin for a phone that has lower (or higher) resolution, that detail is specified here.
The next section is called “layouts” and is similar to the parts portion where you can specify the details for the actual skin for portrait or landscape modes. I’m only using portrait for this sample, but by looking at the file, you’ll note that it clearly provides the overall resolution of the skin, along with what I believe is the background color and any “hardware” type key events that the emulator should support.
A detailed description of the skin file format can be found here (at least for now).
The Hardware File
There is an additional file I provide that you can customize for specific hardware versioning, it is the ‘hardware.ini’ file… I’m not certain if this file is required, but it would seem that AVD does pick up some of the details for when you begin building a custom template using the skin. I also believe some of the options are overridden by the AVD UI tool.
If you download the archive, the primary template is called “template” J It has all buttons separated in layers, and includes a layer labeled “1080×1920” (to remind me of the resolution I’m working for). This is just a filler and should be replaced with any raw screen captures you take from your device when you are preparing your final pieces for publishing.
Also, you may figure out, that you cannot just export the button layers as they are. You should use the marquee tool (with Info window open) to outline their composited images separately, and copy them into a new file (I also provide examples of those). While I was doing this, I was making notes from the information panel in Photoshop to write down the starting positions of the images I was grabbing and using that information in my layout file. A little cumbersome, but it worked fine. Transparency is respected on the buttons, so export them as PNG and tint them as you like.
That should be it… check out the archive and let me know if you have a question.. Good Luck!
If you happen to use this template, please make a link back to this article and give me shout out… I like to be recognized sometimes too 🙂
Download from my OneDrive: