-
-
-Launcher icon color palette
-
-
-
- |
-White
r 0 | g 0 | b 0
Used for highlights on edges. |
-
-
-
- |
-Light gradient
1: r 0 | g 0 | b 0
2: r 217 | g 217 | b 217
Used on the front (lit) part of the icon. |
-
-
-
- |
-Medium gradient
1: r 190 | g 190 | b 190
2: r 115 | g 115 | b 115
Used on the side (shaded) part of the icon. |
-
-
-
- |
-Dark gradient
1: r 100 | g 100 | b 100
2: r 25 | g 25 | b 25
Used on details and parts in the shade of the icon. |
-
-
-
- |
-Black
r 255 | g 255 | b 255
Used as base color in shadows. |
-
-
-
-
- |
-
-
-
-Step by step
+The baseline screen density for Android devices is medium
+(mdpi). For this reason, a recommended approach to creating icon
+sets for multiple screen densities is to:
- - Create the basic shapes with a tool like Adobe Illustrator, using the
-angles described in Launcher icon: structure.
-The shapes and effects must fit within a 250x250 pixel artboard.
- - Add depth to shapes by extruding them and create the rounded corners as
-described for the launcher icon structure.
- - Add details and colors. Gradients should be treated as if there is a light
-source placed slightly to the left in front of the icon.
- - Create the shadows with the correct angle and blur effect.
- - Import the icon into a tool like Adobe Photoshop and scale to fit an image
-size of 48x48 px on a transparent background.
- - Export the icon at 48x48 as a PNG file with transparency enabled.
+- Design the icons for the baseline density first (see Table 1 for the actual
+pixel dimensions at which to design the icons).
+- Place the icons in the application's default drawable resources, then run
+the application on an Android Virtual Device (AVD) or an HVGA device such as the
+T-Mobile G1.
+- Test and adjust your baseline icons as needed.
+- When you are satisfied with the icons you've developed at the baseline
+density, create scaled copies for the other densities.
+
+
+- Scale the baseline icons up 150% to create the high-density assets.
+- Scale the baseline icons down 75% to create the low-density assets.
+
+
+- Place the icons in density-specific resource directories in your
+application. For example:
+
+- Medium-density assets go in a
res/drawable-mdpi/
+directory (or in the default res/drawable/ directory),
+- High-density assets go in a
res/drawable-hdpi/ directory,
+and
+- Low-density assets go in a
res/drawable-ldpi/
+directory.
+
+- Test and adjust the high- and low-density icons if needed
+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.
+
+
+
+
+| Icon Type | Standard Asset Sizes (in Pixels), for
+Generalized Screen Densities |
+
+ |
+
+ Low density screen (ldpi)
+ |
+
+ Medium density screen (mdpi)
+ |
+
+ High density screen (hdpi)
+ |
+
+
+
+ |
+ Launcher
+ |
+
+ 36 x 36 px
+ |
+
+
+ 48 x 48 px
+ |
+
+ 72 x 72 px
+ |
+
+
+
+ |
+ Menu
+ |
+
+ 36 x 36 px
+ |
+
+
+ 48 x 48 px
+ |
+
+ 72 x 72 px
+ |
+
+
+
+ |
+ Status Bar
+ |
+
+ 24 x 24 px
+ |
+
+
+ 32 x 32 px
+ |
+
+ 48 x 48 px
+ |
+
+
+ |
+ Tab
+ |
+
+ 24 x 24 px
+ |
+
+
+ 32 x 32 px
+ |
+
+ 48 x 48 px
+ |
+
+
+ |
+ Dialog
+ |
+
+ 24 x 24 px
+ |
+
+
+ 32 x 32 px
+ |
+
+ 48 x 48 px
+ |
+
+
+ |
+ List View
+ |
+
+ 24 x 24 px
+ |
+
+
+ 32 x 32 px
+ |
+
+ 48 x 48 px
+ |
+
+
+
+
+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.
+
+
+
+Clean and contemporary:
+
+
+ - Launcher icons should be current and sometimes quirky, but they should not
+appear aged or ragged. You should avoid overused symbolic metaphors whenever
+possible.
+
+
+Simple and iconic:
+
+ - Android Launcher icons are caricatural in nature; your icons should be
+highly simplified and exaggerated, so that they are appropriate for use at small
+sizes. Your icons should not be overly complicated.
+ - Try featuring a single part of an application as a symbolic
+representation of the whole (for example, the Music icon features a speaker).
+
+ - Consider using natural outlines and shapes, both geometric and organic,
+with a realistic (but never photorealistic) rendering.
+ - Your icons should not present a cropped view of a larger
+image.
+
+
+Tactile and textured:
+
+ - Icons should feature non-glossy, textured material. See
+ Materials and colors, below, for more
+ information.
+
+
+Forward-facing and top-lit:
+
+ - New for Android 2.0 and later platforms: Android Launcher
+icons should be forward-facing, with very little perspective, and they
+should be top-lit.
+
+
+Additionally, note all icons will have separate text labels, so rather than
+working to include embedded text in the design of of your icons, focus your
+efforts on the icon's visual distinctiveness and memorability instead.
+
+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.
+
+
+
+
+
+
+Android Launcher icons are...
+
+
+- Modern, minimal, matte, tactile, and textured
+- Forward-facing and top-lit, whole, limited in color
+palette
+
+ |
+
+
+Android Launcher icons are not...
+
+
+- Antique, over-complicated, glossy, flat vector
+- Rotated, Cropped, Over-Saturated
+
+ |
+
+
+
+
+
+ 
+
+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 (Launcher-icon-template.psd)
+that provides all of the default materials, colors, and gradients.
+
+
+ 
+
+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.
+
+
+
+- The bounding box for the full asset is shown in red.
+- The recommended bounding box for the actual icon itself is shown in blue.
+The icon box is sized smaller than the full asset box so that there is space to
+include shadows and special icon treatments.
+- The recommended bounding box for an icon that is square is shown in orange.
+The box for square icons is smaller than that for other icons to establish a
+consistent visual weight across the two types.
+
+
+
+
+
+
+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
+Launcher-icon-template.psd in Adobe Photoshop or similar raster
+image editing program. Notice the palettes for materials and colors. You can
+use as the template as a starting point for creating your Launcher icons.
+
+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.
+
+
+
+
+
+
+ 
+ |
+
+ Shadow for WVGA (high density) sreens:
+
+ - Effect: Drop Shadow
+ - Color: #000000
+ - Blend Mode: Multiply
+ - Opacity: 75%
+ - Angle: 90°
+ - Distance: 2px
+ - Spread: 0%
+ - Size: 5px
+
+
+
+ |
+
+
+
+ 
+ |
+
+
+ Shadow for HVGA (medium density) sreens:
+
+ - Effect: Drop Shadow
+ - Color: #000000
+ - Blend Mode: Multiply
+ - Opacity: 75%
+ - Angle: 90°
+ - Distance: 1px
+ - Spread: 0%
+ - Size: 3px
+
+
+
|
+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 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.
Menu icons should include rounded corners, but only when logically
-appropriate. For example, in Figure 3 the logical place for rounded corners is
+appropriate. For example, in Figure 7 the logical place for rounded corners is
the roof and not the rest of the building.
All dimensions specified on this page are based on a 48x48 pixel artboard
@@ -247,7 +631,7 @@ icon structure." />
|
- 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.
| 1. | Front part: | Use fill gradient from primary color palette |
@@ -315,7 +699,7 @@ effects, which are shown below, are used to create depth.
Create the basic shapes using a tool like Adobe Illustrator.
Import the shape into a tool like Adobe Photoshop and scale to fit an image
of 48x48 px on a transparent background. Mind the safeframe.
-Add the effects seen as described in Figure 5.
+Add the effects seen as described in Figure 8.
Export the icon at 48x48 as a PNG file with transparency enabled.
@@ -323,6 +707,14 @@ of 48x48 px on a transparent background. Mind the safeframe.
+
+
+ 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.
- Rounded corners must always be applied to the base shape and to the details
-of a status bar icon shown Figure 7.
+of a status bar icon shown Figure 9.
- All dimensions specified are based on a 25x25 pixel artboard size with a 2
pixel safeframe.
@@ -356,7 +748,7 @@ status bar icon structure." />
|
- 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.
| 1. | Front part: | Use fill gradient from primary color palette |
@@ -432,8 +824,8 @@ light, effects, and shadows for launcher icons."/>
In a tool like Adobe Photoshop, create the base shape within a 25x25 px
image on a transparent background. Mind the safeframe, and keep the upper and
lower 2 pixels free.
-Add rounded corners as specified in Figure 6.
-Add light, effects, and shadows as specified in Figure 7.
+Add rounded corners as specified in Figure 9.
+Add light, effects, and shadows as specified in Figure 10.
Export the icon at 25x25 as a PNG file with transparency enabled.
@@ -442,6 +834,16 @@ lower 2 pixels free.
+ "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 icon
Tab 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.
@@ -536,7 +938,7 @@ tab icons.
Create the basic shapes using a tool like Adobe Illustrator.
Import the shape to a tool like Adobe Photoshop and scale to fit an image of
32x32 px on a transparent background.
-Add the effects seen in Figure 10 for the unselected state filter.
+Add the effects seen in Figure 13 for the unselected state filter.
Export the icon at 32x32 as a PNG file with transparency enabled.
@@ -557,7 +959,7 @@ light, effects, and shadows for selected tab icons."/>
- Figure 11. Light, effects, and shadows for selected tab
+ Figure 14. Light, effects, and shadows for selected tab
icons.
@@ -595,7 +997,7 @@ icons.
Create the basic shape using a tool like Adobe Illustrator.
Import the shape into a tool like Adobe Photoshop and scale to fit a 32x32
px artboard with a transparent background.
-Add the effects seen in Figure 11 for the selected state filter.
+Add the effects seen in Figure 14 for the selected state filter.
Export the icon at 32x32 as a PNG file with transparency enabled.
@@ -635,7 +1037,7 @@ icon structure." />
- Figure 12. Safeframe and fill gradient for dialog icons.
+ Figure 15. Safeframe and fill gradient for dialog icons.
Icon size is 32x32.
|
@@ -656,7 +1058,7 @@ effects, and shadows for dialog icons."/>
- Figure 13. Light, effects, and shadows for dialog
+ Figure 16. Light, effects, and shadows for dialog
icons.
@@ -680,7 +1082,7 @@ icons.
Create the basic shapes using a tool like Adobe Illustrator.
Import the shape into a tool like Adobe Photoshop and scale to fit an image
of 32x32 px on a transparent background.
-Add the effects seen in Figure 13 for the proper filter.
+Add the effects seen in Figure 16 for the proper filter.
Export the icon at 32x32 as a PNG file with transparency enabled.
@@ -693,8 +1095,9 @@ of 32x32 px on a transparent background.
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.
+used only in a {@link android.widget.ListView}. Examples include the Android
+Market application home screen and the driving directions screen in the Maps
+application.
Structure
@@ -720,7 +1123,7 @@ view icon structure." />
- Figure 14. Safeframe and fill gradient for list view
+ Figure 17. Safeframe and fill gradient for list view
icons. Icon size is 32x32.
|
@@ -741,7 +1144,7 @@ of light, effects, and shadows for list view icons."/>
- Figure 15. Light, effects, and shadows for list view
+ Figure 18. Light, effects, and shadows for list view
icons.
@@ -762,7 +1165,7 @@ icons.
-- Add the effects seen in Figure 15 for the proper filter.
+- Add the effects seen in Figure 18 for the proper filter.
- Export the icon at 32x32 as a PNG file with transparency enabled.
- Create the basic shapes using a tool like Adobe Illustrator.
- Import the shape into a tool like Adobe Photoshop and scale to fit an image
@@ -773,48 +1176,266 @@ of 32x32 px on a transparent background.
+ Tips for Designers
- General guidelines
+ Here are some tips that you might find useful as you develop icons or other
+drawable assets for your application. The tips assume that you are using
+Photoshop or similar raster image-editing program.
- 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.
+ Use common naming conventions for icon assets
-
+Try to name files so that related assets will group together inside a
+directory when they are sorted alphabetically. In particular, it helps to use a
+common prefix for each icon type. For example:
+
+
-
-
-Do...
-
-
-- Use a normal perspective. The depth of an object should be realistic.
-- Keep it simple! By overdoing an icon, it loses it purpose and
-readability.
-- Use colors only when necessary. Mind that the base of a launcher icon should
-be grey and feel solid.
-- Use the correct angles for the specific icon types.
-
- |
-
-
-Don’t...
-
-
-- Use open elements like text alone as icons. Instead place those elements on
-a base shape.
-- Use colors for your status bar notifications. Those are reserved for
-specific phone-only functions.
-
- |
+Asset Type |
+Prefix |
+Example |
-
-
- |
+Icons |
+ic_ |
+ic_star.png |
+
+
+| Launcher icons |
+ic_launcher |
+ic_launcher_calendar.png |
+
+
+| Menu icons |
+ic_menu |
+ic_menu_archive.png |
+
+
+| Status bar icons |
+ic_stat_sys or ic_stat_notify |
+ic_stat_notify_msg.png |
+
+
+| Tab icons |
+ic_tab |
+ic_tab_recent.png |
+
+
+| Dialog icons |
+ic_dialog |
+ic_dialog_info.png |
+
+Note that you are not required to use a shared prefix of any type —
+doing so is for your convenience only.
+
+
+Set up a working space that organizes files for multiple densities
+
+Developing multiple sets of assets for different screen densities means
+creating multiple copies of files. To help keep the multiple copies of files
+safe and easier to find, we recommend creating a directory structure in your
+working space that organizes asset files per resolution. For example:
+
+assets/...
+ ldpi/...
+ _pre_production/...
+ working_file.psd
+ finished_asset.png
+ mdpi/...
+ _pre_production/...
+ working_file.psd
+ finished_asset.png
+ hdpi/...
+ _pre_production/...
+ working_file.psd
+ finished_asset.png
+
+This structure parallels the density-specific structure in which you will
+ultimately store the finished assets in your application's resources. Because
+the structure in your working space is similar to that of the application, you
+can quickly determine which assets should be copied to each application
+resources directory. Separating assets by density also helps you detect any
+variances in filenames across densities, which is important because
+corresponding assets for different densities must share the same filename.
+
+For comparison, here's the resources directory structure of a typical
+application:
+
+res/...
+ drawable-ldpi/...
+ finished_asset.png
+ drawable-mdpi/...
+ finished_asset.png
+ drawable-hdpi/...
+ finished_asset.png
+
+
+Create medium-density assets first
+
+Since medium density is the baseline for Android, begin your designing work
+by creating the mdpi assets. See Table
+1, above, for the actual pixel dimensions of various icon types. When
+possible, use vector art or paths within Photoshop layers so that it will be
+easier to scale the assets up or down later.
+
+For each discreet asset, or set of like assets that share the same bounding
+box dimensions, create a working Photoshop file and save it in the
+_pre_production directory. For example:
+ic_tabs_phone_mdpi.psd. This will make it easier to locate and edit
+individual assets if changes are required. It's also helpful to use a
+density-specific suffix in the filename for the working file, to avoid confusion
+when editing the files. For example: _mdpi.psd.
+
+From the mdpi working files, save individual flattened assets to
+the corresponding density-specific resource directory (in this case,
+mdpi/) in your working space.
+
+
+Create high- and low-density assets from the medium-density sources
+
+When you are finished working with your medium-density assets, copy the
+working files from the your workspace's mdpi/_pre_production
+directory to the corresponding locations in the ldpi and
+hdpi directories. If any of the working files use a
+density-specific suffix, rename the suffix to match the intended density.
+
+Next, open each working file in the high- and low-density directories and
+scale the image up or down to match the intended density. To create an
+hdpi asset, scale the image by 150%. To create an ldpi
+asset, scale the image down by 75%. To scale the images, follow these steps:
+
+
+- Open the working file in Photoshop or similar program.
+- Under the Image menu, choose Image Size.
+- On the Image Size panel, change the Width pop up menu to "percent."
+- Change the Width value to "150" for
hdpi assets and "75" for ldpi assets.
+- Select the Scale Styles checkbox.
+- Select the Constrain Proportions checkbox.
+- Select the Resample Image checkbox and set the pop up menu to "Bicubic (Best for smooth gradients)."
+- Click OK.
+
+
+After you scale each image, save it to the target density-specific resource
+directory.
+
+If you are scaling a nine-patch image, see the section below for notes on how
+to handle the tick marks at the edge of the image.
+
+
+After scaling, redraw bitmap layers as needed
+
+If you scaled an image up from a bitmap layer, rather than from a vector
+layer, those layers may need to be redrawn manually to accommodate the higher
+density. For example if a 60x60 circle was painted as a bitmap for
+mdpi it will need to be repainted as a 90x90 circle for
+hdpi.
+
+
+When scaling a 9-patch image, crop tick marks before scaling and replace
+them after
+
+Nine-patch images include tick marks at the outer edge of the image. When you
+scale a nine-patch image, the tick marks are also scaled, which produces an
+inaccurate result. The recommended way to handle the scaling of nine-patch
+images is to remove the tick marks from the source image before scaling and then
+manually replace the tick marks at the proper size after scaling.
+
+To more easily determine the tick marks after the working file has been
+scaled to a new resolution, first create a temporary duplicate flattened image
+which includes the tick marks:
+
+
+- Under the Select menu choose All.
+- Under the Edit menu choose
+Copy Merged.
+- Under the File menu choose New and then
+click OK on the new panel.
+- Under the Edit choose Paste.
+
+
+After creating the temporary copy, go back to the working file and crop
+the tick marks out of the working file before scaling the image:
+
+- Under the Image menu, choose the
+Canvas Size command.
+- On the Canvas Size panel, subtract 2 pixels from the Width and
+Height values.
+- Set the Anchor to "Center."
+- Click OK
+
+
+Scale the working file to the target density. With the working file scaled
+and the canvas enlarged so that the tick marks can be repainted:
+
+
+- Under the Image menu, choose the
+Canvas Size command.
+- On the Canvas Size panel, add 2 pixels to the Width
+and Height values.
+- Set the Anchor to "Center."
+- Click OK.
+
+
+To determine tick marks, go back to duplicate flattened image and scale it to
+the target resolution.
+
+Copy the scaled duplicate flattened image into a new layer in the working
+file to use as reference. Create a new layer in which to paint new tick marks at
+the single pixel outer edge of the image. Note tickmarks must be 100% opaque
+black, without transparency, and all other areas of the tick mark region must be
+100% transparent, otherwise the system will not interpret the 9-patch image
+correctly.
+
+Using the scaled duplicate flattened image as reference paint new tick marks
+in the new layer that align with the reference layer. Note round up pixels for
+tick marks. Any pixels that are partially opaque in the reference layer should
+be fully opaqe in the new layer.
+
+
+Adjust stroke and drop shadow after scaling an image
+
+While it is desirable to scale layer styles for the most part (such as for
+Gradient Overlay or Inner Glow), you may need to manually reset the Stroke and
+Drop Shadow in the scaled image to 1 px before saving, especially when scaling
+to hdpi.
+
+ Save nine-patch images with the appropriate filename suffix
+
+If an asset is a 9-patch asset (with tick marks), be sure to save the asset
+in PNG format with a filename that includes the .9.png suffix. If
+the filename does not use the suffix, the system won't recognize the image as a
+nine-patch asset and won't resize it as intended.
+
+
+When saving image assets, remove the Photoshop header
+
+To help keep each image asset as small as possible, make sure to remove the
+Photoshop headers from the file. To remove the Photoshop header, follow these
+steps:
+
+
+- Under the File menu, choose the Save for Web &
+Devices command
+- On the "Save for Web & Devices" panel, set the Preset pop-up to
+"PNG-24," set the pop-up under Presets to "PNG-24" as well, and select the
+Transparency box (if the image uses transparency)
+- Select Save.
+
+
+Make sure that corresponding assets for different densities use the same
+filenames
+
+Corresponding icon asset files for each density must use the same filename,
+but be stored in density-specific resource directories. This allows the system
+to look up and load the proper resource according to the resource requested by
+the application and the screen characteristics of the device. For this reason,
+make sure that the set of assets in each density-specific is consistent and do
+not use density-specific suffixes in the filenames. For more information about
+how to manage density-specific resources, see Supporting Multiple
+Screens.
+
Using the Android Icon Templates Pack
The Android Icon Templates Pack is a collection of template designs, filters,
@@ -831,7 +1452,7 @@ 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
+href="{@docRoot}shareables/icon_templates-v2.0.zip">Download the Icon Templates
Pack »
@@ -843,148 +1464,20 @@ Pack »
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.
+Shown below are standard menu icons that are used in the Android
+system. Because these resources can change between platform versions, you
+should not reference the system's copy of the resources. If you want
+use any icons or other internal drawable resources, you should store a
+local copy of those icons or drawables in your application resources,
+then reference the local copy from your application code. In that way, you can
+maintain control over the appearance of your icons, even if the system's
+copy changes. Note that the list below is not intended to be complete.
-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 {@link android.view.MenuItem#setIcon(android.graphics.drawable.Drawable) 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".
@@ -1115,24 +1608,14 @@ simply look at image filenames, which use the format
Standard status bar icons
-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".
+Shown below are standard status bar icons that are used in the Android
+platform. Because these resources can change between platform versions, you
+should not reference the system's copy of the resources. If you want
+use any icons or other internal drawable resources, you should store a
+local copy of those icons or drawables in your application resources,
+then reference the local copy from your application code. In that way, you can
+maintain control over the appearance of your icons, even if the system's
+copy changes. Note that the list below is not intended to be complete.
@@ -1187,4 +1670,3 @@ or simply look at the image filename, which use the format
-
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_1.jd b/docs/html/guide/practices/ui_guidelines/icon_design_1.jd
new file mode 100644
index 0000000000000..039f301f8effe
--- /dev/null
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_1.jd
@@ -0,0 +1,1200 @@
+page.title=Icon Design Guidelines, Android 1.0
+@jd:body
+
+
+
+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.
+
+Launcher icon
+
+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.
+
+Structure
+
+
+- The base of a launcher icon can face either the top view or the front
+view.
+
+- The majority of a launcher icon’s surface should be created using the
+launcher icon color palette. To add emphasis, use
+one or more bright accent colors to highlight specific characteristics.
+
+- All launcher icons must be created with rounded corners to make them look
+friendly and simple—as shown in Figure 2.
+
+- All dimensions specified are based on a 250x250 pixel artboard size
+in a vector graphics editor like Adobe Illustrator, where the icon fits within
+the artboard boundaries.
+
+- Final art must be scaled down and exported as a transparent 48x48 px
+PNG file using a raster image editor such as Adobe Photoshop.
+
+- Templates for creating launcher icons in Adobe Illustrator and Photoshop are
+available in the Icon Templates Pack.
+
+
+
+
+
+ 
+ |
+
+
+ Figure 1. Perspective angles for launcher icons (90° is
+vertical).
+
+
+ | 1. | 92° |
+ | 2. | 92° |
+ | 3. | 173° |
+ | 4. | 171° |
+ | 5. | 49° |
+ | 6. | 171° |
+ | 7. | 64° |
+ | 8. | 97° |
+ | 9. | 75° |
+ | 10. | 93° |
+ | 11. | 169° |
+
+
+
+ Figure 2. Rounded corners for launcher icons.
+ |
+
+
+
+Light, effects, and shadows
+
+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.
+
+
+ | 1. | Edge highlight: | white |
+ | 2. | Icon shadow: | black | 20px blur
50% opacity | angle 67° |
+ | 3. | Front part: | Use light gradient from color palette |
+ | 4. | Detail shadow: | black | 10px blur
75% opacity |
+ | 5. | Side part: | Use medium gradient from color palette |
+
+
+ |
+
+
+
+
+
+
+
+Launcher icon color palette
+
+
+
+ |
+White
r 0 | g 0 | b 0
Used for highlights on edges. |
+
+
+
+ |
+Light gradient
1: r 0 | g 0 | b 0
2: r 217 | g 217 | b 217
Used on the front (lit) part of the icon. |
+
+
+
+ |
+Medium gradient
1: r 190 | g 190 | b 190
2: r 115 | g 115 | b 115
Used on the side (shaded) part of the icon. |
+
+
+
+ |
+Dark gradient
1: r 100 | g 100 | b 100
2: r 25 | g 25 | b 25
Used on details and parts in the shade of the icon. |
+
+
+
+ |
+Black
r 255 | g 255 | b 255
Used as base color in shadows. |
+
+
+
+
+ |
+
+
+
+Step by step
+
+
+ - Create the basic shapes with a tool like Adobe Illustrator, using the
+angles described in Launcher icon: structure.
+The shapes and effects must fit within a 250x250 pixel artboard.
+ - Add depth to shapes by extruding them and create the rounded corners as
+described for the launcher icon structure.
+ - Add details and colors. Gradients should be treated as if there is a light
+source placed slightly to the left in front of the icon.
+ - Create the shadows with the correct angle and blur effect.
+ - Import the icon into a tool like Adobe Photoshop and scale to fit an image
+size of 48x48 px on a transparent background.
+ - Export the icon at 48x48 as a PNG file with transparency enabled.
+
+
+ |
+
+
+
+
+
+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.
+
+Structure
+
+
+- In order to maintain consistency, all menu icons must use the same
+primary palette and the same effects. For more information, see the
+menu icon color palette.
+
+- Menu icons should include rounded corners, but only when logically
+appropriate. For example, in Figure 3 the logical place for rounded corners is
+the roof and not the rest of the building.
+
+- All dimensions specified on this page are based on a 48x48 pixel artboard
+size with a 6 pixel safeframe.
+
+- The menu icon effect (the outer glow) described in Light, effects, and shadows can overlap the 6px safeframe,
+but only when necessary. The base shape must always stay inside the
+safeframe.
+
+- Final art must be exported as a transparent PNG file.
+
+- Templates for creating menu icons in Adobe Photoshop are available in the
+Icon Templates Pack.
+
+
+
+
+
+ 
+ |
+
+
+ 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.
+
+
+ | 1. | Front part: | Use fill gradient from primary color palette |
+ | 2. | Inner shadow: | black | 20 % opacity
angle 90° | distance 2px
size 2px |
+ | 3. | Outer glow: | white | 55% opacity
spread 10% | size 3px |
+ | 5. | Inner bevel: | depth 1% | direction down size 0px
angle 90° | altitude 10°
highlight white 70% opacity
shadow black 25% opacity |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+ |
+White
r 0 | g 0 | b 0
Used for outer glow and bevel highlight. |
+
+
+
+ |
+Fill gradient
1: r 163 | g 163 | b 163
2: r 120 | g 120 | b 120
Used as color fill. |
+
+
+
+ |
+Black
r 255 | g 255 | b 255
Used for inner shadow and bevel shadow. |
+
+
+
+
+ |
+
+
+
+
+
+
+- Create the basic shapes using a tool like Adobe Illustrator.
+- Import the shape into a tool like Adobe Photoshop and scale to fit an image
+of 48x48 px on a transparent background. Mind the safeframe.
+- Add the effects seen as described in Figure 5.
+- Export the icon at 48x48 as a PNG file with transparency enabled.
+
+
+ |
+
+
+
+
+Status bar icon
+
+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.
+
+Structure
+
+
+- Rounded corners must always be applied to the base shape and to the details
+of a status bar icon shown Figure 7.
+
+- All dimensions specified are based on a 25x25 pixel artboard size with a 2
+pixel safeframe.
+
+- Status bar icons can overlap the safeframe to the left and right when
+necessary, but must not overlap the safeframe at the top and bottom.
+
+- Final art must be exported as a transparent PNG file.
+
+- Templates for creating status bar icons using Adobe Photoshop are available
+in the Icon Templates Pack.
+
+
+
+
+
+ 
+ |
+
+
+ Figure 6. Safeframe and corner-rounding for status bar
+icons. Icon size is 25x25.
+ |
+
+
+
+
+Light, effects, and shadows
+
+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.
+
+
+ | 1. | Front part: | Use fill gradient from primary color palette |
+ | 2. | Inner bevel: | depth 100% | direction down
size 0px | angle 90° |
altitude 30°
highlight white 75% opacity
shadow black 75% opacity |
+ | 3. | Detail: | white |
+ | 4. | Disabled detail: | grey gradient from palette
+ inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° |
altitude 42° | highlight white 70% | no shadow |
+
+
+ |
+
+
+
+
+
+
+Tab icon
+
+Tab icons are graphical elements used to represent individual tabs in a
+multi-tab interface. Each tab icon has two states: unselected and selected.
+
+Structure
+
+
+- Unselected tab icons have the same fill gradient and effects as menu icons,
+but with no outer glow.
+
+- Selected tab icons look just like unselected tab icons, but with a fainter
+inner shadow, and have the same front part gradient as dialog icons.
+
+- Tab icons have a 1 px safeframe which should only be overlapped for the edge
+of the anti-alias of a round shape.
+
+- All dimensions specified on this page are based on a 32x32 px artboard size.
+Keep 1 px of padding around the bounding box inside the Photoshop template.
+
+- Final art must be exported as a 32x32 px transparent PNG
+file.
+
+- Templates for creating tab icons in Adobe Photoshop are available in the
+Icon Templates Pack.
+
+
+
+
+
+ 
+ |
+
+
+ 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 icon
+
+Light, effects, and shadows
+
+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.
+
+
+ | 1. | Front part: | gradient overlay | angle 90°
bottom color: r 223 | g 223 | b 223
top color: r 249 | g 249 | b 249
bottom color location: 0%
top color location: 75% |
+ | 2. | Inner shadow: | black | 10 % opacity | angle 90° distance 2px | size 2px |
+ | 3. | Inner bevel: | depth 1% | direction down | size 0px | angle 90° | altitude 10°
highlight white 70% opacity
shadow black 25% opacity |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+- Create the basic shapes using a tool like Adobe Illustrator.
+- Import the shape to a tool like Adobe Photoshop and scale to fit an image of
+32x32 px on a transparent background.
+- Add the effects seen in Figure 10 for the unselected state filter.
+- Export the icon at 32x32 as a PNG file with transparency enabled.
+
+
+ |
+
+
+
+Selected tab icon
+
+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.
+
+
+ | 1. | Front part: | Use fill gradient from color palette. |
+ | 2. | Inner shadow: | black | 20% opacity |
angle 90° | distance 2px |
size 2px |
+ | 3. | Inner bevel: | depth 1% | direction down | size 0px | angle 90° |
altitude 10°
highlight white 70% opacity
shadow black 25% opacity |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+ |
+Fill gradient
1: r 163 | g 163 | b 163
2: r 120 | g 120 | b 120
Used as color fill on unselected tab icons. |
+
+
+
+
+ |
+
+
+
+
+
+
+- Create the basic shape using a tool like Adobe Illustrator.
+- Import the shape into a tool like Adobe Photoshop and scale to fit a 32x32
+px artboard with a transparent background.
+- Add the effects seen in Figure 11 for the selected state filter.
+- Export the icon at 32x32 as a PNG file with transparency enabled.
+
+
+ |
+
+
+
+
+Dialog icon
+
+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.
+
+Structure
+
+
+- Dialog icons have a 1 pixel safeframe. The base shape must fit within the
+safeframe, but the anti-alias of a round shape can overlap the safeframe.
+
+- All dimensions specified on this page are based on a 32x32 pixel artboard size
+in Adobe Photoshop. Keep 1 pixel of padding around the bounding box inside the
+Photoshop template.
+
+- Final art must be exported as a transparent PNG file.
+
+- Templates for creating dialog icons in Adobe Photoshop are available in the
+Icon Templates Pack.
+
+
+
+
+
+ 
+ |
+
+
+ Figure 12. Safeframe and fill gradient for dialog icons.
+Icon size is 32x32.
+ |
+
+
+
+
+Light, effects, and shadows
+
+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.
+
+
+ | 1. | 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% |
+ | 2. | Inner shadow: | black | 25% opacity |
angle -90° | distance 1px | size 0px |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+- Create the basic shapes using a tool like Adobe Illustrator.
+- Import the shape into a tool like Adobe Photoshop and scale to fit an image
+of 32x32 px on a transparent background.
+- Add the effects seen in Figure 13 for the proper filter.
+- Export the icon at 32x32 as a PNG file with transparency enabled.
+
+
+ |
+
+
+
+
+List view icon
+
+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.
+
+Structure
+
+
+- A list view icon normally has a 1 px safeframe, but it is OK to use the
+safeframe area for the edge of the anti-alias of a round shape.
+
+- All dimensions specified are based on a 32x32 pixel artboard size in
+Photoshop. Keep 1 pixel of padding around the bounding box inside the template.
+
+
+- Final art must be exported as a transparent PNG file.
+
+- Templates for creating list view icons in Adobe Photoshop are available in
+the Icon Templates Pack.
+
+
+
+
+
+ 
+ |
+
+
+ Figure 14. Safeframe and fill gradient for list view
+icons. Icon size is 32x32.
+ |
+
+
+
+Light, effects, and shadows
+
+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.
+
+
+ | 1. | Inner shadow: | black | 57 % opacity | angle 120° | blend mode normal | distance 1px | size 1px | |
+ | 2. | Background: | black | standard system color
These icons are displayed in list views only. |
+ | Note: The list view icon sits on 32x32 px artboard in Photoshop, without a safeframe. |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+- Add the effects seen in Figure 15 for the proper filter.
+- Export the icon at 32x32 as a PNG file with transparency enabled.
+- Create the basic shapes using a tool like Adobe Illustrator.
+- Import the shape into a tool like Adobe Photoshop and scale to fit an image
+of 32x32 px on a transparent background.
+
+
+ |
+
+
+
+
+General guidelines
+
+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...
+
+
+- Use a normal perspective. The depth of an object should be realistic.
+- Keep it simple! By overdoing an icon, it loses it purpose and
+readability.
+- Use colors only when necessary. Mind that the base of a launcher icon should
+be grey and feel solid.
+- Use the correct angles for the specific icon types.
+
+ |
+
+
+Don’t...
+
+
+- Use open elements like text alone as icons. Instead place those elements on
+a base shape.
+- Use colors for your status bar notifications. Those are reserved for
+specific phone-only functions.
+
+ |
+
+
+|
+
+ |
+
+
+Using the Android Icon Templates Pack
+
+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 »
+
+
+ Icon appendix
+
+Standard launcher icons
+
+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 {@link android.view.MenuItem#setIcon(android.graphics.drawable.Drawable) 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 |
+
+
+
+
+
+Standard status bar icons
+
+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 |
+
+
+
+
+
diff --git a/docs/html/images/icon_design/IconGraphic_AccentColor.png b/docs/html/images/icon_design/IconGraphic_AccentColor.png
new file mode 100644
index 0000000000000..93ebf8d8e8e99
Binary files /dev/null and b/docs/html/images/icon_design/IconGraphic_AccentColor.png differ
diff --git a/docs/html/images/icon_design/IconGraphic_Colors.png b/docs/html/images/icon_design/IconGraphic_Colors.png
new file mode 100644
index 0000000000000..f70eefc5c5f81
Binary files /dev/null and b/docs/html/images/icon_design/IconGraphic_Colors.png differ
diff --git a/docs/html/images/icon_design/IconGraphic_DosDonts.png b/docs/html/images/icon_design/IconGraphic_DosDonts.png
new file mode 100644
index 0000000000000..db27ec1642cd4
Binary files /dev/null and b/docs/html/images/icon_design/IconGraphic_DosDonts.png differ
diff --git a/docs/html/images/icon_design/IconGraphic_Icons.png b/docs/html/images/icon_design/IconGraphic_Icons.png
new file mode 100644
index 0000000000000..ff17062c59c03
Binary files /dev/null and b/docs/html/images/icon_design/IconGraphic_Icons.png differ
diff --git a/docs/html/images/icon_design/IconGraphic_Icons_i.png b/docs/html/images/icon_design/IconGraphic_Icons_i.png
new file mode 100644
index 0000000000000..f389e14113c73
Binary files /dev/null and b/docs/html/images/icon_design/IconGraphic_Icons_i.png differ
diff --git a/docs/html/images/icon_design/IconGraphic_Materials.png b/docs/html/images/icon_design/IconGraphic_Materials.png
new file mode 100644
index 0000000000000..52bb173499235
Binary files /dev/null and b/docs/html/images/icon_design/IconGraphic_Materials.png differ
diff --git a/docs/html/images/icon_design/IconGraphic_OpticalSize_l.png b/docs/html/images/icon_design/IconGraphic_OpticalSize_l.png
new file mode 100644
index 0000000000000..1572ced137584
Binary files /dev/null and b/docs/html/images/icon_design/IconGraphic_OpticalSize_l.png differ
diff --git a/docs/html/images/icon_design/IconGraphic_OpticalSize_ldpi.png b/docs/html/images/icon_design/IconGraphic_OpticalSize_ldpi.png
new file mode 100644
index 0000000000000..4f6fdaa783ab9
Binary files /dev/null and b/docs/html/images/icon_design/IconGraphic_OpticalSize_ldpi.png differ
diff --git a/docs/html/images/icon_design/IconGraphic_OpticalSize_s.png b/docs/html/images/icon_design/IconGraphic_OpticalSize_s.png
new file mode 100644
index 0000000000000..99704d2c385a1
Binary files /dev/null and b/docs/html/images/icon_design/IconGraphic_OpticalSize_s.png differ
diff --git a/docs/html/images/icon_design/IconGraphic_Shadow_HVGA.png b/docs/html/images/icon_design/IconGraphic_Shadow_HVGA.png
new file mode 100644
index 0000000000000..0a7380b5b112a
Binary files /dev/null and b/docs/html/images/icon_design/IconGraphic_Shadow_HVGA.png differ
diff --git a/docs/html/images/icon_design/IconGraphic_Shadow_WVGA.png b/docs/html/images/icon_design/IconGraphic_Shadow_WVGA.png
new file mode 100644
index 0000000000000..0e9375ba29b35
Binary files /dev/null and b/docs/html/images/icon_design/IconGraphic_Shadow_WVGA.png differ
diff --git a/docs/html/images/icon_design/do_dont_menuicons.png b/docs/html/images/icon_design/do_dont_menuicons.png
new file mode 100644
index 0000000000000..b53db96dde1db
Binary files /dev/null and b/docs/html/images/icon_design/do_dont_menuicons.png differ
diff --git a/docs/html/images/icon_design/do_dont_statusicons.png b/docs/html/images/icon_design/do_dont_statusicons.png
new file mode 100644
index 0000000000000..20c67375d3238
Binary files /dev/null and b/docs/html/images/icon_design/do_dont_statusicons.png differ
diff --git a/docs/html/shareables/icon_templates-v2.0.zip b/docs/html/shareables/icon_templates-v2.0.zip
new file mode 100644
index 0000000000000..1c4b4988d2df0
Binary files /dev/null and b/docs/html/shareables/icon_templates-v2.0.zip differ
| | | |
+ 
+
+
+
+ 
