---
title: Designing Menu Icons for Android Devices
teaser:
tags: design,android
author: Phil LaPier
published_on: 2011-03-30
---

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](http://developer.android.com/guide/practices/screens_support.html#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](http://methodandcraft.com/videos/fireworks-icon-technique) technique to
preserve a high amount of editing for the icons. The new vector paths can be
seen in the icons below.

![''](http://images.thoughtbot.com/ui/android/vector.png)

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](http://developer.android.com/guide/practices/ui_guidelines/icon_design_menu.html)
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.

![''](http://images.thoughtbot.com/ui/android/icon-sizes.png)

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.

![''](http://images.thoughtbot.com/ui/android/android-icons.png)