Making Android Dialog Icons

Android developers must follow the strict design guidelines when making icons for their Android projects. Icon Design Guidelines for Dialog Icons specify image resolutions and provide guidelines for choosing the color palette and visual styling of icons used in pop-up dialogs 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 screens employed in the many devices running Android, the guidelines specify three different icon sizes for low-, mid- and high-resolution displays. These resolutions are specified as 24×24 pixels for low-resolution screens (ldpi), 32×32 pixels for medium-resolution displays (mdpi), and 48×48 pixels for high-resolution displays (hdpi).

When it goes to visual styling, Android dialog icons are flat, face-on images designed with the use of a light gradient and inner shadow. These features help dialog icons stand out against a dark background. No
isometric or 3D style is allowed in order to maintain a uniform look across Android-compatible applications created 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 exact colors for icon’s overlay. The gradient overlay is rendered at 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 space from that point and up to the top of the overlay 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 shift from the main picture is 1px, while the size of the shadow is 0px (which means that the shadow is exactly the size of the main shape itself).

Creating Android-style dialog icons is a fairly easy, step-by-step process. You can create your icons in a raster 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 perfect way, as you will end up drawing each of the three icon sizes separately.

To save time drawing the three sizes (ldpi, mdpi and hdpi), a vector tool is recommended. You can create the main image of the icon in your favorite 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 easy: 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.

Don’t have time or skills to design the icons? 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 different icons designed in strict accordance with the Dialog Icons Design Guidelines. This royalty-free collection is supplied in the form of PNG files with alpha-channel, and offers PSD source images. Scalable AI and SVG vector sources are also available. You can view and order the collection at the company’s Web site.

Android Dialog Icons

Leave a Reply

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