From 59e644e399e9a8dce48f28c34b5ed66974c41bd4 Mon Sep 17 00:00:00 2001
From: Dirk Dougherty Creating a unified look and feel throughout a user interface adds value to
your product. Streamlining the graphic style will also make the UI seem more
-professional to the user.
In this document
@@ -23,13 +22,14 @@ application can use the standard icons by referencing them as resources.
See also
+Older versions
+
+
+
+
This document shows you how to create icons for various parts -of your application’s user interface that fit the style set by the Android UI -team. Following these guidelines will help you to create a polished and unified -experience for the user.
+This document provides information to help you create icons for various parts +of your application’s user interface that match the general styles used by the +Android 2.x framework. Following these guidelines will help you to create a +polished and unified experience for the user.
-To get started creating conforming icons more quickly, you can download +
To get started creating your icons more quickly, you can download the Android Icon Templates Pack. For more information, see Using the Android Icon Template Pack.
-A launcher icon is the graphic that represents your application on an Android -device’s Home screen. It is a simplified 3D icon with a fixed perspective. The -required perspective is shown in Figure 1.
+Android is designed to run on a variety of devices that offer a range of +screen sizes and resolutions. When you design the icons for your application, +it's important keep in mind that your application may be installed on any of +those devices. As described in the Supporting Multiple +Screens document, the Android platform makes it straightforward for you to +provide icons in such a way that they will be displayed properly on any device, +regardless of the device's screen size or resolution.
-In general, the recommended approach is to create a separate set of icons for +each of the three generalized screen densities listed in Table 1, below, then +store them in density-specific resource directories in your application. When +your application runs, the Android platform will check the characteristics of +the device screen and load icons from the appropriate density-specific +resources. For more information about how to store density-specific resources in +your application, see Resource +directory qualifiers for screen size and density.
-|
- |
-
-
-
- Figure 1. Perspective angles for launcher icons (90° is -vertical). -
-
-
-
-Figure 2. Rounded corners for launcher icons. - |
-
Launcher icons are simplified 3D icons using light and shadows for -definition. A light source is placed slightly to the left in front of the icon, -and therefore the shadow expands to the right and back.
- -|
- |
-
-
-
-Figure 3. Light, effects, and shadows for launcher icons. -
-
-
|
-
-
-Launcher icon color palette- -
|
-
-
-
-Step by step+The baseline screen density for Android devices is medium
+(
For tips on how to create and manage icon sets for multiple densities, see +Tips for Designers. + + +Table 1. Summary of finished icon +dimensions for each of the three generalized screen densities, by +icon type. + +
Launcher Icon+ +A Launcher icon is a graphic that represents your application on the device’s +Home screen and in the Launcher window. + +The user opens the Launcher by touching the icon at the bottom of the Home +screen. The Launcher opens and exposes the icons for all of the installed +applications, which are arranged in a grid. The user selects an application and +opens it by touching the Launcher icon or by means of any hardware navigation +controls available, such as a trackball or d-pad. + +The user can also drag an icon out of the Launcher window and onto the Home +screen itself, for more convenient access to the application. In this case, the +system displays your application's Launcher icon against the Home screen +wallpaper, rendering it at the same dimensions as it is rendered inside the +Launcher. + +The system manages the scaling of all Launcher icons so that they rendered at +a uniform height and width. The actual pixel dimensions of the rendered Launcher +icons on any given device varies, based on the size and pixel-density +characteristics of the device's screen. To ensure the best possible rendering +for your icons, supply versions of the icons that are designed for low, medium, +and high density screens. For information, see Providing Density-Specific Icon Sets, above, or Tips for Designers, below. + +Style+ +The launcher icons that you create should follow the general style principles +below. The guidelines aren't meant to restrict what you can do with your icons, +but rather they are meant to emphasize the common approaches that your icons can +share with others on the device. Figure 1, at right, provides examples. + +
+
+
++ Figure 1. Illustration of Launcher icon style. +Clean and contemporary: + +
Simple and iconic: +
Tactile and textured: +
Forward-facing and top-lit: +
To look at more examples of the Launcher icons used by built-in Android +applications, see Standard Launcher Icons in the +Icons Appendix of this document. + + + +Do's and Don'ts+ +Below are some "do and don't" examples to consider when creating icons for +your application. + + +
+
+
++Figure 2. Side-by-side examples of "do's and don'ts" for +Android launcher icons. +Materials and colors+ +Launcher icons should make use of tactile, top-lit, textured materials. Even +if your icon is just a simple shape, you should try to render in a way that +makes it appear to be sculpted from some real-world material. + +The Launcher icons for the platform's default applications use the set of +materials shown in Figure 3, below. Your icons can use these materials or you +can create new materials. + +Android launcher icons usually consist of a smaller shape within a +larger base shape and combine one neutral and one primary color. Icons may +use a combination of neutral colors but should maintain a fairly high level of +contrast. Icons should not use more than one primary color per icon, if +possible. + +Launcher icons should use a limited color palette that includes a range +of neutral and primary colors. The icons should not be over-saturated. + +The recommended color palette to use for Launcher icons is shown in Figure 4. +You can use elements of the palette for both the base color and the highlight +color. You can use the colors of the palette in conjunction with a +white-to-black vertical linear gradient overlay. This creates the impression +that the icon is lit from above and keeps the color less saturated. + + + +
+
+
++Figure 3. Example materials that you can use to create +your icons. +
+
+
+
++Figure 4. Examples of materials combined with base +and highlight colors from the recommended palette. +When you combine the materials above with a color highlight from the
+recommended pallete, you can create materials combinations such as those shown
+in Figure 5. To get you started, the icons pack
+includes a Photoshop template file (
+
+
+
++Figure 5. Recommended color palette for icons. +Size and positioning+ +Launcher icons should use a variety of shapes and forms and those must be +scaled and positioned to create consistent visual weight. + +Launcher icons should use a variety of shapes and forms and those must be +scaled and positioned inside the asset to create consistent visual weight with +other + +Figure 6 illustrates various ways of positioning the icon inside the asset. +As detailed in the table below, you should size the icons smaller than the +actual bounds of the asset, to create a consistent visual weight and to +allow for the inclusion of shadows. If your icon is square or nearly square, it +should be scaled even smaller. + + +
Using the Launcher Icon Template+ +Included in the Android Icon Templates Pack 2.0 is a template containing +palettes for default icon materials and colors. The template is provided in .psd +format for Adobe Photoshop or similar raster image editor. + +To get started, first download the Android Icon +Templates Pack 2.0 ». + +Once you've downloaded the pack, unzip it and open the file
+ After you create your icon, you can add a shadow effect according to the +specification below, as appropriate for the size of image you are creating. + + +
When the shadow is added and the icon is complete, export it as a PNG file +with transparency enabled, ensuring that you size the icon at 72 x 72px for +high-density screens and 48 x 48px for medium density screens. For more +information about why you should provide different Launcher assets for high-, +medium, and low-density screens, see Supporting Multiple +Screens. + + +Menu iconMenu icons are graphical elements placed in the pop-up menu shown to users @@ -222,7 +606,7 @@ primary palette and the same effects. For more information, see the menu icon color palette. |
-
Figure 4. Safeframe and corner-rounding for menu + Figure 7. Safeframe and corner-rounding for menu icons. Icon size is 48x48. |
@@ -267,7 +651,7 @@ effects, which are shown below, are used to create depth.
- Figure 5. Light, effects, and shadows for launcher icons. +Figure 8. Light, effects, and shadows for launcher icons.
"Do's and don'ts"+ +Below are some "do and don't" examples to consider when creating status bar creating icons for +your application. + + +Status bar icon@@ -334,7 +726,7 @@ smaller and higher in contrast.
|
-
Figure 6. Safeframe and corner-rounding for status bar + Figure 9. Safeframe and corner-rounding for status bar icons. Icon size is 25x25. |
@@ -377,7 +769,7 @@ light, effects, and shadows for launcher icons."/>
- Figure 7. Light, effects, and shadows for launcher icons. +Figure 10. Light, effects, and shadows for status bar icons.
"Do's and don'ts"+ +Below are some "do and don't" examples to consider when creating status bar creating icons for +your application. + + +Tab iconTab icons are graphical elements used to represent individual tabs in a @@ -477,7 +879,7 @@ unselected tab icon structure." /> |
-
Figure 8. Safeframe and fill gradient for unselected tab + Figure 11. Safeframe and fill gradient for unselected tab icons. Icon size is 32x32. |
@@ -489,7 +891,7 @@ selected tab icon structure." />
-
Figure 9. Safeframe and fill gradient for tab icons in + Figure 12. Safeframe and fill gradient for tab icons in selected state. Icon size is 32x32. |
@@ -511,7 +913,7 @@ of light, effects, and shadows for unselected tab icons."/>
- Figure 10. Light, effects, and shadows for unselected + Figure 13. Light, effects, and shadows for unselected tab icons.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||