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.
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.
To get started creating conforming 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.
![]() | 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
|
Menu icons are graphical elements placed in the pop-up menu shown to users when they press the Menu button. They are drawn in a flat-front perspective. Elements in a menu icon must not be visualized in 3D or perspective.
![]() | Figure 4. Safeframe and corner-rounding for menu icons. Icon size is 48x48. |
Menu icons are flat and pictured face on. A slight deboss and some other effects, which are shown below, are used to create depth.
![]() | Figure 5. Light, effects, and shadows for launcher icons.
|
Color palette
| Step by step
|
Status bar icons are used to represent notifications from your application in the status bar. Graphically, they are very similar to menu icons, but are smaller and higher in contrast.
![]() | Figure 6. Safeframe and corner-rounding for status bar icons. Icon size is 25x25. |
Status bar icons are slightly debossed, high in contrast, and pictured face-on to enhance clarity at small sizes.
![]() | Figure 7. Light, effects, and shadows for launcher icons.
|
Color paletteOnly status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.
| Step by step
|
Tab icons are graphical elements used to represent individual tabs in a multi-tab interface. Each tab icon has two states: unselected and selected.
![]() | Figure 8. Safeframe and fill gradient for unselected tab icons. Icon size is 32x32. |
![]() | Figure 9. Safeframe and fill gradient for tab icons in selected state. Icon size is 32x32. |
Unselected tab icons look just like the selected tab icons, but with a fainter inner shadow, and the same front part gradient as the dialog icons.
![]() | Figure 10. Light, effects, and shadows for unselected tab icons.
|
Step by step
|
The selected tab icons have the same fill gradient and effects as the menu icon, but with no outer glow.
![]() | Figure 11. Light, effects, and shadows for selected tab icons.
|
Color palette
| Step by step
|
Dialog icons are shown in pop-up dialog boxes that prompt the user for interaction. They use a light gradient and inner shadow in order to stand out against a dark background.
![]() | Figure 12. Safeframe and fill gradient for dialog icons. Icon size is 32x32. |
Dialog icons are flat and pictured face-on. In order to stand out against a dark background, they are built up using a light gradient and inner shadow.
![]() | Figure 13. Light, effects, and shadows for dialog icons.
|
Step by step
|
List view icons look a lot like dialog icons, but they use an inner shadow effect where the light source is above the object. They are also designed to be used only in a list view. Examples include the Android Market application home screen and the driving directions screen in the Maps application.
![]() | Figure 14. Safeframe and fill gradient for list view icons. Icon size is 32x32. |
List view icons are flat and pictured face-on with an inner shadow. Built up by a light gradient and inner shadow, they stand out well on a dark background.
![]() | Figure 15. Light, effects, and shadows for list view icons.
|
Step by step
|
Below are some "do and don't" guidelines to consider when creating icons for your application. By following the guidelines, you can ensure that your icons will work well with other parts of the Android platform UI and will meet the expectations of your application's users.
Do...
| Don’t...
|
![]() |
The Android Icon Templates Pack is a collection of template designs, filters, and settings that make it easier for you to create icons that conform to the general specifications given in this document. We recommend downloading the template pack archive before you get started with your icon design.
The icon templates are provided in Adobe Photoshop and Adobe Illustrator file formats, which preserves the layers and design treatments we used when creating the standard icons for the Android platform. You can load the template files into any compatible image-editing program, although your ability to work directly with the layers and treatments may vary based on the program you are using.
You can obtain the Icon Templates Pack archive using the link below:
Download the Icon Templates Pack »
Shown below are examples of launcher icons used by Android applications. The icons are provided for your reference only — please do not reuse these icons in your applications..
![]() Alarm Clock | ![]() Browser | ![]() Calculator | ![]() Calendar | ![]() Camcorder | ![]() Camera | ![]() Contacts |
![]() Dialer | ![]() Email | ![]() Gallery | ![]() Generic application | ![]() Gmail | ![]() Google Talk | ![]() IM |
![]() Maps | ![]() Market | ![]() Messaging | ![]() Music | ![]() Settings | ![]() Voice Dialer | ![]() Voice Search |
![]() YouTube |
Shown below are standard menu icons that are included in the Android platform (as of Android 1.5). You can reference any of these icon resources from your application as needed, but make sure that the action you assign to the icon is consistent with that listed. Note that this is not a complete list of icons and that the actual appearance of standard icons may change across platform versions.
To reference one of the icons from your code, use android.R.drawable.<icon_resource_identifier>
. For example, you can call a menu item's setIcon()
method and pass the resource name:
.setIcon(android.R.drawable.ic_menu_more);
.
You could reference the same icon from a layout file using android:icon="@android:drawable/ic_menu_more">
.
To determine the resource ID for an icon listed below, hover over the icon or simply look at image filenames, which use the format "<icon_resource_identifier>.png".
![]() Add | ![]() Call | ![]() Camera | ![]() Clear / Close / Cancel / Discard | ![]() Compass | ![]() Delete | ![]() Directions |
![]() Edit | ![]() Gallery | ![]() Help | ![]() Info / details | ![]() Map mode | ![]() My Location | ![]() More |
![]() Preferences | ![]() Rotate | ![]() Save | ![]() Send | ![]() Search | ![]() Share | ![]() Upload |
![]() View | ![]() Zoom |
Shown below are standard status bar icons included in the Android platform (as of Android 1.5). You can reference any of these icon resources from your application as needed, but make sure that the meaning of the icon is consistent with the standard meaning listed. Note that this is not a complete list of icons and that the actual appearance of standard icons may change across platform versions.
To reference one of the icons from your code, use android.R.drawable.<icon_resource_identifier>
. For example, you can construct a simple notification that references one of the icons like this:
new Notification(R.drawable.stat_notify_calendar, "sample text", System.currentTimeMillis());
To determine the resource ID for an icon listed below, hover over the icon or simply look at the image filename, which use the format "<icon_resource_identifier>.png".
![]() Bluetooth | ![]() Email | ![]() IM | ![]() Voicemail | ![]() Warning | ![]() Call | ![]() Call forward |
![]() Call on hold | ![]() Missed call |
联系客服