Drawing Android Dialog Icons

Android developers must follow the stringent guidelines when designing icons for their mobile apps. Icon Design Guidelines for Dialog Icons specify icon resolutions and provide guidelines for choosing the color palette and visual styling of icons used in pop-up dialog boxes and interactive prompts.

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

Style wise, Android dialog icons are flat, face-on graphics designed with the use of a light gradient and inner shadow. These visual features help dialog icons to stand out against a dark background. No
isometric projection or 3D styles are allowed in order to maintain a uniform look among all Android applications 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 specify a gradient for icons? overlay. The gradient overlay is laid out from bottom to the top at an angle of 90 degrees. The gradient starts from 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 space from that point up is filled with a solid 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 -90 degrees. The shift from the main picture is 1px, while the size of the shadow is 0px (which means the shadow is the size of the main image itself).

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

To save time drawing the three sizes (ldpi, mdpi and hdpi), a vector editor is recommended. You can draw the basic shape of the icon in a vector editor such as Adobe Illustrator and export the image 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 add the correct inner shadow in yet another layer. Save the icon as a PSD file for future editing, and save it as a PNG file with transparency enabled to use the icon in your Android app.

To save time designing icons for your Android app, you may choose 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 offers 86 unique icons drawn in strict accordance with the Dialog Icons Design Guidelines. This royalty-free collection is provided in the form of PNG files with alpha-channel, and offers PSD source images. Scalable AI and SVG vector sources are 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 *