Making Dialog Icons for Android Apps

Developers making Android apps must follow the stringent guidelines when making 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 variety of hardware platforms equipped with screens of different pixel densities. To accommodate the wide range of displays employed in the many devices running Android, the guidelines describe three different icon sizes for low-, mid- and high-resolution displays. These sizes are specified as 24×24 pixels for low-resolution displays (ldpi), 32×32 pixels for medium-resolution ones (mdpi), and 48×48 pixels for high-resolution displays (hdpi).

Style wise, Android dialog icons are flat, face-on graphics showing a light gradient and inner shadow. These features help dialog icons stand out against a dark background. No
isometric or 3D style is permitted in order to maintain a uniform look across all Android apps developed by different 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 exact colors for icons’ overlay. The gradient overlay is rendered 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 remaining 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 rendered black at 25% opacity (controlled via the alpha-channel) at -90 degrees. The distance from the main picture is 1px, while the size of the shadow is 0px (which means that the shadow is the size of the main image itself).

Creating Android-style dialog icons is a fairly easy, step-by-step process. You can design 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, a raster editor may not be the best way, as you will have to draw each of the three icon sizes separately.

To save time drawing the three sizes (ldpi, mdpi and hdpi), a vector editor is advised. You can create the main image of the icon in your favorite vector editor such as Adobe Illustrator and export the image into Adobe Photoshop, rendering the vector source into the size required (24×24, 32×32, or 48×48 pixels). The rest is easy: add an overlay gradient in a separate layer, and specify the correct inner shadow in yet another layer. Save the image 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.

Get yourself a ready-made collection instead. The extensive library of Android Dialog Icons by Aha-Soft http://www.aha-soft.com/stock-icons/android-dialog-icons.htm offers 86 different icons designed in strict accordance with the Dialog Icons Design Guidelines. This royalty-free set is supplied in the form of PNG files with alpha-channel, and offers PSD source images. In addition, scalable AI and SVG vector sources are available as well. You can preview and order 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 *