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.

Overview

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).

Details of the Emulator

These skins come with a glare effect above the actual screen, highlighted hardware buttons, smooth corners and a subtile drop shadow.

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.

# activate the glare overlay
-onion-alpha 100 -onion <absolutePathToSkin>/overlay.png

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.

~/dev/android-sdk-mac_86/platforms/android-7/skins/NEXUS-S
c:\android-sdk-windows\platforms\android-9\skins\NEXUS-S

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.

ADV Manager

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.

Eclipse Run Configuration

Change your Eclipse run configuration to scale your emulator window and activate the glare effect.

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.

Have fun!

Links

Support my Work

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.

Comments

  1. Mustafa says:

    Good job! These would be even better without the normal window border. Can we do anything about that???

  2. Arialia says:

    Thanks very good job :)

  3. ol_v_er says:

    Thanks for those skins there are really great!

  4. Raghavendra says:

    Thanks for those skins.. these are superb …

  5. Mickey says:

    Thanks Heiko (and Alexander) for your great job.

    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.

    Thanks.

  6. 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?

  7. [...] 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. [...]

  8. Hans says:

    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?

  9. 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.

  10. danny says:

    thank you so much for the effort. good work!

  11. Eran says:

    Gr8 job! works like a charm. thanks

  12. Sebastian says:

    Thanks, great work! I just encountered a problem because I am running Eclipse on a 64 bit Windows 7 machine.

    It won’t run when the Android SDK is installed in the default location (C:\Program Files (x86)\…), but instead give ma an error message about an “invalid command-line parameter”.

    You can fix this by replacing “Program Files (x86)” with its DOS equivalent name “Progra~2″.

    Source: http://ideanotion.net/android-sdk-invalid-command-line-parameter-files-error/

  13. valllllll2000 says:

    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

  14. valllllll2000 says:

    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.

  15. Alessandro says:

    Thanks, great work. Now I can simulate perfectly my nexus s :) Thanks VALLLLLLL2000 for the solution of your problem. I had the same problem with the scale factor!!! with -scale 0.49 it’s OK ;)

  16. hanan says:

    hey, for sorry it didn’t work with me.. i don’t know why

    but i follow the steps exactly but when open the AVD to create new emulator with new skin i didn’t found the skins i just added in the folder skins

    can u tell me why ??

  17. devdanke says:

    Thank you Heiko and everyone else who made useful comments!
    These skins make Android development more fun:-)

  18. Marian-Mina Mihai says:

    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 :D .

  19. I haven’t found any manual or “offical” tutorial either. I am measuring the graphics in Photoshop and poke with the values in the layout file.

  20. Ulrich says:

    Great work! Thanks a lot!

  21. C0br4 says:

    Like someone stated before, this skin breaks the rotation ability of the emulator. I’m always using the latest ADT.

  22. Bruno says:

    Wünderschon, danke.

  23. April says:

    These are great! Thank you! Any plans on making a Galaxy Nexus skin?

  24. Hey April,

    at the moment I am not actively working on those, sorry.

  25. Heimdall says:

    I have HTC Nexus One. I like the look, however… The trackball and the search soft button (magnifying glass) don’t seem to work. Also, side buttons are not implemented (power, volume).

    April, I checked http://innovator.samsungmobile.com/down/cnts/toolSDK.list.do?platformId=1&nacode= and found nothing for you, but you might want to check it periodically. (That’s where I found my wife’s Galaxy Ace.) Or just search the net, that’s how I found this blog looking for my phone.

  26. Tal says:

    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.

  27. Tal says:

    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.

  28. Bharat says:

    Hi.. I wanted to ask if I created a project using the SPen SDK and ran it on this emulator.. whether it would work ?
    Thanks Heiko! :D

  29. Haven’t tried the SDK but since these skins don’t add any additional hardware emulation I guess there’s nothing more than a better look in your case. Let me know how it turned out.

  30. Carl says:

    Thanks for the great skin!

    The glow effect doesn’t work for me on the search button (magnifying glass). Any hint what to do?

  31. Mark Lapasa says:

    I find myself download these skins or recommending it 2-3 times a month since this blog was published. Great work.

    For anyone who can’t get the keyboard to work in ADT 20+

    http://stackoverflow.com/questions/11955115/android-emulator-doesnt-take-keyboard-input-on-custom-avd-skins-sdk-tools-rev/12008131

  32. Thank you for the kudos and your stackoverflow question, Mark :)

Leave a Reply