Recently we took on a client project which entailed building an Android app. The client delivered to us a set of sixteen 30x30 pixel PNG icons for use in the app. The icons displayed well on low-density screen devices, such as the Samsung Moment, but they were not large enough to accurately retain detail on higher density screen based devices, e.g. HTC G1 and the Nexus One. The solution was to redraw the icons in vector format and size them for the various screen densities.
Android uses a number of resource directory qualifiers for controlling which density-specific icon will be displayed for each device. In this case I focused on creating icons for low-density (ldpi), medium-density (mdpi), and high-density (hdpi) screens. Effectively, this means three specific sizes of each icon are needed—36x36 pixel, 48x48 pixel, and 72x72 pixel icons. It is worth noting that the new icon document resolution should remain at 72 pixels/inch for all icons, including high-density screen icons (don’t be fooled by the android density numbers).
The Process
The process began by importing all sixteen icons onto a single document in Adobe Fireworks. I used Fireworks’ vector tools to retrace each icon. Rather than using the merging tools on the vector paths, I used Rogie King’s Alpha converted vector groups technique to preserve a high amount of editing for the icons. The new vector paths can be seen in the icons below.
After vectorizing all sixteen of the original icons, I then set out to resize them. The Android developer docs contain useful guidelines for creating menu icons with consistent visual weight across all devices.
To maintain pixel perfect appearance, tweaks will often need to be made when vectors are resized up or down. The alpha converted vector groups helped facilitate the tweaking process. The icons below are sized for their respective screen densities.
After all the icons are resized and exported as transparent PNG images, they must be placed in their respective folder in the resources directory—drawable-ldpi, drawable-mdpi, drawable-hdpi. The filenames must remain the same for each icon, but be stored in the mentioned density-specific resource directories. Android devices will load the proper resources according to the screen density of the device.
Below are a few ‘before and after’ views of a few icons that went through the process. The icons appear much crisper, have sharper edges, and are now fully transparent. The end result provides a much more professional looking Android App, whereas the icons enhance the menu navigation by providing the user with a clearer interpretation of each graphic symbol.
