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.
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.
# 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.
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.
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.
- Download Android Emulator skins for Nexus S and Nexus One
- Fork the skin set on GitHub
- More beautiful graphics by Alexander Gillis on DeviantArt