Android User Interface Design: Icon Design

Just as iOS apps should emulate the look and feel of the iOS platform, professional-grade Android applications should be designed to integrate well with the rest of the Android platform. Today, we diverge slightly from our developer-centric tutorials and provide a basic introduction to designing icons appropriate to the Android platform.

The Android development team provides a set of Icon Design Guidelines for application developers and UI designers. We do not feel that a quick Android icon design discussion strays too far off topic. At various industry conferences, the Android team has recommended that Android developers hire professional graphic designers to design their application graphics and icons. While this is likely the optimal scenario, we have found that the mobile app developer often wears a number of hats and, therefore, sometimes these graphical tasks fall to the less graphically inclined (ourselves included). Therefore, we think this topic is worthy of a quick tutorial.

Icon Design Tools

You can design icons for the Android platform using a number of different graphical design tools. We recommend you find one that supports the .PSD file format (Adobe Photoshop’s native file format) as well as the PNG format (ideal for most mobile graphics). We use Adobe Creative Suite products, like Photoshop and Illustrator, which support these file formats. The Adobe suite of applications is what we are familiar with, but there are many other programs available that support these formats as well. Find one, and stick to it!

Step 1: Create Compatible Icons

Android applications can use the alternative resource file hierarchy to provide resources (including graphics) for different types of devices. Android application graphics resources (called drawables) are organized into a resource directory hierarchy using special labels. Most notably for icon design, you can provide alternative versions of icons for specific devices with different screen densities.

For example, icons stored in a directory labeled ldpi would be designed to suit low density device screens. Conversely, icons stored in a resource directory labeled hdpi would be designed to suit high density screen devices. There are four main categories of dpi-specific devices:

The ldpi label can be used to specify icon resources for low-density screens (~120dpi).
The mdpi label can be used to specify icon resources for medium-density screens (~160dpi).
The hdpi label can be used to specify icon resources for high-density screens (~240dpi).
The xhdpi label can be used to specify icon resources for extra high-density screens (~320dpi).

Note: Each alternative version of an icon file (stored in its specific dpi directory) must have the same name as its alternatives in the other directories.

Step 2: Download the Latest Icon Pack

You could figure out all the different versions of an icon you need to create for your specific application, or you could use the handy Android Icon Template Pack provided on the Android Developer website to help you generate the appropriate files.

We recommend taking a look at the Template Pack and seeing if it works for you. The Android Team releases a new version every once in a while, so check the website for the latest revision, which, as of October 2011, is on Android Icon Templates Pack, v4.0 (zip, 1.5MB).

Download the zip file and extract it onto your computer. It’s got a README as well as a number of directories which contain Photoshop (.PSD) file templates for each sized icon graphic you would need to create in different circumstances.

Step 3: Explore the Icon Template Pack

The Android Icon Templates Pack is organized into the directories required for different types of icons. Icons are used for a variety of purposes. You will not need all icons for every application. Some are used only with specific types of user interface controls. The types of icons supported in the Templates Pack include:

Launcher icons are perhaps the most common icon you’ll want to create. These are shown on places like the Application listing and Home screens and clicked to launch your application.
Menu icons are shown when the user presses the Menu button in your application.
Action Bar icons are shown on the Action Bar in your application (formerly the Options menu items).
Dialog icons are shown on the top left corner of a Dialog control, next to the dialog prompt.
List icons are shown on ListView controls that have icons and text controls.
Tab icons are shown on TabView controls that have icons and text labels.
Status Bar icons are shown when a notification associated with the application occurs.

Step 4: Identify the Necessary Icon Types

You next need to determine the types of icons appropriate for your specific application. For example, your simple application may have two screens, each with a ListView control. Therefore, you might need one set of launcher icons and several sets of list icons.

Each “set” of icons should have a single filename that is shared across all versions of that icon for different screen types. Icon filenames should be lowercase and contain only letters, numbers, and underscores. The Android Development website recommends that you name your icons with the prefix “ic_” followed by the type, another underscore, and finally the descriptive name. For example, "ic_list_songs" or "ic_tab_highscores" are suitable names.

Step 5: Creating Launcher Icons

Let’s look at a quick example of how you might create launcher icons for your Android application. Within the Android Icon Templates Pack, find the ic_launcher_template sub-dir. It has four subdirectories, each with a PSD file of the appropriate icon configuration. Load each PSD file in the graphics program of your choice, design the icon using the template parameters, and save it (ideally as a PNG file) by the name ic_launcher.png under its directory, such as "drawable_hdpi". Once you have created all the appropriate versions of the ic_launcher.png file, transfer them to the /res/drawable-* equivalent resource directory in your Android project files (such as within Eclipse). This will include the resource files as part of your application package. That’s it!

Step 6: Supporting Multiple SDKs

You may have noticed through various versions of Android that the design guidelines for icons change. What are you to do if you want to provide the correctly styled graphics for each of the major revisions of the guidelines (1.0, 2.0, 2.3, and now 4.0)? The easy answer is to just provide graphics in an appropriately named resource directory. Resource qualifiers can also be applied at the API Level, so you can always append the appropriate API level to the end of the resource directory. For instance, you could have drawable_hdpi_v14 to store drawable resources only applicable to Ice Cream Sandwich. You'll see some of this naming style in the template pack downloads.

Conclusion

Designing your Android applications using the style guidelines provided by the Android team gives your application a professional look and feel. Icons are one of the easiest ways to make your application appear fully integrated with the Android platform. The Android Development team provides a set of file templates for the quick creation of icons for various types of user interface controls using the proper specifications to support different types of Android device screens.

About the Authors

Mobile developers Lauren Darcey and Shane Conder have coauthored several books on Android development: an in-depth programming book entitled Android Wireless Application Development, Second Edition and Sams Teach Yourself Android Application Development in 24 Hours, Second Edition. When not writing, they spend their time developing mobile software at their company and providing consulting services. They can be reached at via email to [email protected], via their blog at androidbook.blogspot.com, and on Twitter @androidwireless.