Designing Dialog Icons for Android Apps

Android developers must meet the stringent guidelines when designing icons for their Android projects. Icon Design Guidelines for Dialog Icons specify icon sizes and provide guidelines for choosing the color palette and visual styling of icons used in pop-up dialogs and interactive prompts.

The Android OS can run on a wide range of hardware platforms equipped with screens of different pixel densities. To accommodate the variety of displays used in the many devices running Android, the guidelines describe three separate icon sizes for low-, mid- and high-resolution screens. These sizes are defined as 24×24 pixels for low-resolution displays (ldpi), 32×32 pixels for medium-resolution ones (mdpi), and 48×48 pixels for high-definition displays (hdpi).

Style wise, Android dialog icons are flat, face-on graphics showing a light gradient and inner shadow. These visual features allow dialog icons stand out against a dark background. No
isometric projection or 3D styles are allowed in order to maintain a uniform look among Android-compatible apps developed by multiple vendors.

Android Dialog Icons Design

1. Dialog icons have a 1 pixel safeframe
2. Inner shadow: black, 25% opacity, angle -90°,
distance 1px, size 0px
3. Front part: gradient overlay, angle 90°
bottom: r 223 ; g 223 ; b 223,
top: r 249 ; g 249 ; b 249,
bottom color location: 0%,
top color location: 75%

The Design Guidelines define exact colors for icons’ overlay. The gradient overlay is rendered at an angle of 90 degrees. The gradient starts at the bottom as 233, 233, 233 (an R,G,B color), and goes up to 249, 249, 249 (R,G,B) at 75% to the top. The remaining space from that point up is filled with a single color of 249, 249, 249 (R,G,B).

Android Dialog Icons

The inner shadow is added black at 25% opacity (controlled via the alpha-channel) at an angle of -90 degrees. The distance from the main picture is 1px, while the size of the shadow is 0px (meaning the shadow is exactly the size of the main shape itself).

Designing Android-style dialog icons is a straightforward process. You can create your icons in a graphic editor such as Adobe Photoshop easily by downloading the Icon Templates Pack for Android 2.3 from the Android Web site. However, a raster editor may not be the best way, as you will have to draw each of the three icon resolutions separately.

To save time producing the three sizes (ldpi, mdpi and hdpi), a vector tool is advised. You can create the basic shape of the icon in a vector editor such as Adobe Illustrator and export the shape into Adobe Photoshop, rendering the vector source into the required reaolution (24×24, 32×32, or 48×48 pixels correspondingly). The rest is simple: add an overlay gradient in a separate layer, and specify the appropriate inner shadow in yet another layer. Save the image as a PSD file for future editing, and export it as a PNG file with transparency enabled to add your newly created icon into your Android app.

Get yourself a ready-made icon set instead. The extensive library of Android Dialog Icons by Aha-Soft http://www.aha-soft.com/stock-icons/android-dialog-icons.htm provides 86 unique images drawn in strict accordance with the Dialog Icons Design Guidelines. This royalty-free set is supplied in the form of PNG files with semi-transparency, and offers PSD source images. Scalable AI and SVG vector sources are also available. You can preview and purchase the set at the company’s Web site.

Android Dialog Icons

Leave a Reply

Your email address will not be published. Required fields are marked *