Google Android Emulator Skins for Nexus S and Nexus One

When I was producing the screencast for Peter’s blog post about the EclipseCon App, I had a hard time to bring the Android App in shape. As any Android developer will know Google’s Android Emulator comes with a set of loveless default looks you are ashamed of each time you compare them with their sexy iPhone counterpart. Fortunately and contrary to the latter, the Android emulator offers support for skins to overcome this grievance and so I decided to build a set of high-quality Android Skins for Samsung Nexus S and HTC Nexus One including reflection overlays.

This package contains a set of four different skins including overlays for a glare effect.

Thanks to the great work of Alexander Gillis, I was able to create these skins with their native screen resolution at a superb image quality. They offer a glow effect when hovering over the hardware buttons, render a subtile drop shadow on both orientations and come with smooth corners on every edge. However, the outstanding feature of this set of skins is the fitting overlay image that can be put on top of the actual emulator screen. It’s based on the Android Emulator’s mostly unknown support for “onions”. That is a feature other mobile simulators, especially the iPhone simulator, do not provide (although tools like simfinger offer a great workaround).

I produced these skins especially to record screencasts and to take high quality screenshots of running Android applications with respect to the actual screen resolution of the devices and their physical proportions. Therefore, these skins come at a relatively large size in pixels that might exceed your average 1600×1200 display. Nevertheless, you can still run them on smaller screens by passing the scale option to the Emulator on startup or by specifying the scale options with “Scale display to real size” on the dialog “launch options”.

# scale emulator to half of its actual size
-scale 0.5﻿

To activate the glare overlay you have to specify an “onion” by passing another command line option to the Android Emulator (sorry, there’s no dialog to do this). Each skin has its own “overlay.png” to seamlessly continue the reflection visible on the body. Be sure to pass the full path to the appropriate graphic along with 100% opacity.

Each included hardware.ini contains an example of these arguments. If you are familiar with Android Emulator skins, go ahead and download the archive or fork them on GitHub. The clueless remainder of the Android developers should follow these briefly outlined installation steps.

Installing the Emulator Skins

An Android Emulator skin basically is a folder consisting of files for graphics and configuration. Once installed, skins are named after their folder names. Let’s start and download the ZIP archive containing the skins. After extracting the archive you will find a set of different folders corresponding to (fictitious) device names, e.g. “NEXUS-S” . Each of these folders is what’s called a skin.

Locate the “platforms” folder of your Android SDK. Each platform has its own set of skins you can find at “<AndroidSDK>/platforms/<platform>/skins”. Assuming you are developing against the Google API of Android 2.1, the proper platform would be 7. If unsure, have a look at your AVD manager. Extract the desired skin into the platform’s skins folder, e.g.

Now, restart the AVD manager so it is aware of the new skin and create a new virtual device based on one of your freshly installed skins.

Create a new AVD with one of the freshly installed skins.

You can use this AVD similar to any other virtual device, but as written before, these skins are quite large. If you want to reduce the size of the emulator window, be sure to explicitly pass a scaling factor. Yes, you can do this with a graphical dialog from within the AVD Manager but doing so will thwart your whole development process later on. Instead, I will show you how to configure your Eclipse run configuration since this will be needed for the glare effect anyway.

In Eclipse, go to your run configuration and open the tab “Target”. Choose “Automatic” for the option “Deployment Target Selection Mode” and select your new virtual device. Also, in the field “Additional Emulator Command Line Options” at the bottom pass these values (where <absolutePathToSkin> had been changed accordingly):

-scale 0.5 -onion-alpha 100 -onion <absolutePathToSkin>/overlay.png

Hit “Run” and watch the console output on startup. The Emulator will tell you if it cannot find the onion file. If everything went right, you should see your Android application within a beautiful Emulator window by now.

Writing an article like the one you have just read takes me quite an amount of my personal time.
Way too often, I invest this time in different interests and decide against another blog post.
On the other hand, you can motivate me with your feedback, your thoughts and your ideas.
Please leave a comment below or flattr this post if you think it's worth it.

I installed the skins as you explained and they work fine but I have noticed that when I ran the emulator with one of these skins and I rotate the virtual device from portrait to landscape, the skin is changed properly using the proper set of images but the app itself running on the emulator doesn not rotate accordingly.

I have tested this using my own applications and also Google applications like the browser. If I use one of the pre-defined skins, the rotation works for the apps as well.

I’m not sure if this strange behaviour is caused by changing the skin and I’d like to know your opinion.

Hey Mickey, as you can see on the first screenshot of this post, rotation worked fine for me. I just double-checked this with the maps app as you can see here. Sorry, I’ve got no idea why rotation doesn’t work out for you. And this does not occur with one of the default skins?

[...] On Android, we enhanced the application a bit further. Based on the names of the blog authors we built a mash-up and integrated each blog entry with the related speaker’s profile of the existing conference app. The generator produced the needed Java code and we happily deployed it on the “gorgeous” (as Peter said) Android Emulator. [...]

Thanks Heiko for your effort, the great skins and description. Unfortunately the field “Additional Emulator Command Line Options” is not displayed on the respective tab. So starting the emulator brings up a rather … large skin … as you also mentioned in your text.

I’m working with android SDK r10 on windows. Any idea what I’m doing wrong?

Hey Hans, sorry for answering that late (been on vacation). On the respective ADT tab in Eclipse, I had to scroll down the first time it appeared. Also, the AVD manager allows you to set a scale factor on startup on the launch dialog (“scale display to real size”). Hope one of these tips can help you.

Hi,
Great work these skins. They worked fine for me untill the last update to 12.0.0.v201106281929-138431. The problem I have is when I use the skin with the “-scale 0.5″ argument well I get a really weird color screen with colors saturated. If I remove the “-scale 0.5″ I get the normal black phone (so everything is right) but I of course I can’t use it like that cos it’s too big. Anybody else had the same problem?
I am on Ubuntu 10.04.3 LTS, 32 bits, eclipse 3.6
Is there a way to solve it? thks a lot in advance

update: in case some one has the same problem after an SDK update:
I have changed the argument from -scale 0.5 to scale 0.49, I know it’s ridiculous but after 0.5 the resolution becomes inadecuate. Another option is -scale auto but then I get a smaller emulator image.

Hi. Could you please give me some reference on how to create skins? I know the part with the PNGs, but how do you find out what values to set for x and y on the layout file? Thank you very much! Also, your skins are awesome, pure eye-candy .

I am having similar orientation problem similar to Mickey above. I created two AVD’s with this skins with API’s 8 and 10 respectively. I can change the orientation of the window and applications do change orientation except for the stock home launcher. I have two other AVD’s with stock skins and APIs 8 and 14 respectively and home launcher changes orientation with no problem. Weird. I am using the latest SDK and Mac OSX 10.7.3. Any suggestion? I like these skins a lot and would like to keep using them but since I develop app widgets, home rotation is important for me.

Adding to my post above. After removing the DPad support, Keyboard list support and Keyboard support properties (all three were set to ‘no’) and wiping user data, home launcher orientation does work for me. Thanks.

Leave a Reply

Heiko Behrens

is a programmer, author, and public speaker with more than a decade of commercial software development, technical writing, and on-stage presentation experience. As an active committer at Eclipse and as an involved participant in numerous other open source projects, he has in-depth experience in a broad range of technologies. His startup BeamApp, still in stealth mode, is focussed on mobile application development, both native cross-platform and web-based.