In this document
-
-
- Launcher icon -
- Menu icon -
- Status bar icon -
- Tab icon -
- Dialog icon -
- List view icon - -
- Tips for Designers
- Using the Icon Templates Pack - -
- Icon appendix - - - +
- Providing Density-Specific Icon Sets +
- Tips for Designers
Older versions
+Topics
-
-
- Icon Design -Guidelines, Android 1.0 +
- Launcher Icons +
- Menu Icons +
- Status Bar Icons +
- Tab Icons +
- Dialog Icons +
- List View Icons
Downloads
-
+
- Android Icon +Templates Pack, v2.3 »
- Android Icon Templates Pack, v2.0 »
- Android Icon
@@ -72,9 +64,62 @@ 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.
+
The following documents discuss detailed guidelines for the common types of +icons used throughout Android applications:
+ +-
+
- Launcher Icons +
- A Launcher icon is a graphic that represents your application on the + device's Home screen and in the Launcher window. +
- Menu Icons +
- Menu icons are graphical elements placed in the options menu shown to + users when they press the Menu button. +
- Status Bar Icons +
- Status bar icons are used to represent notifications from your + application in the status bar. +
- Tab Icons +
- Tab icons are graphical elements used to represent individual tabs in a + multi-tab interface. +
- Dialog Icons +
- Dialog icons are shown in pop-up dialog boxes that prompt the user for + interaction. +
- List View Icons +
- List view icons are used with {@link android.widget.ListView} to + graphically represent list items. An example is the Settings application. +
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.
+the Android Icon Templates Pack. + + + + + +Using the Android Icon Templates Pack
+ +The Android Icon Templates Pack is a collection of template designs, +textures, and layer styles that make it easier for you to create icons that +conform to the guidelines given in this document. We recommend downloading the +template pack archive before you start designing your icons.
+ +The icon templates are provided in the Adobe Photoshop file format (.psd), +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 latest Icon Templates Pack archive using the link below: +
+ +Download the Icon Templates +Pack for Android 2.3 » + +
For previous versions of the Icon Templates Pack, see the Downloads +section in the box at the top-right corner of this page.
+ + +Providing Density-Specific Icon Sets
@@ -89,7 +134,7 @@ 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 +each of the three generalized screen densities listed in Table 1. 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 @@ -98,59 +143,27 @@ your application, see Resource directory qualifiers for screen size and density.
-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:-
-
- 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 defaultres/drawable/directory),
- - High-density assets go in a
res/drawable-hdpi/directory, -and
- - Low-density assets go in a
res/drawable-ldpi/-directory.
-
- - Medium-density assets go in a
- 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.
+Tips for Designers. -Table 1. Summary of +
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 - @@ -159,14 +172,14 @@ 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 @@ -175,1057 +188,113 @@ Generalized Screen DensitiesMenu -+ 36 x 36 px -+ 48 x 48 px -+ 72 x 72 px - Status Bar + Status Bar (Android 2.3 and later) -- 24 x 24 px + + 12w x 19h px -
+ (preferred, width may vary)- 32 x 32 px + + 16w x 25h px -
+ (preferred, width may vary)- 48 x 48 px + + 24w x 38h px
+ (preferred, width may vary)+ ++ Status Bar (Android 2.2 and below) + ++ 19 x 19 px + + ++ 25 x 25 px + ++ 38 x 38 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.
- --- -
- - Figure 1. Illustration of Launcher icon style.
-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. -
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. -
-
- - - -- - -- --
-
- Icon dimensions for high-density (
hdpi) screens:
- - Full Asset: 72 x 72 px -
- Icon: 60 x 60 px -
- Square Icon: 56 x 56 px -
-
-
- -
-- -- - --
-
- Icon Dimensions for medium-density (
mdpi) screens:
- - Full Asset: 48 x 48 px -
- Icon: 40 x 40 px -
- Square Icon: 38 x 38 px -
-
-
- -
-- - -- - --
-
- Icon Dimensions for low-density (
ldpi) screens:
- - Full Asset: 36 x 36 px -
- Icon: 30 x 30 px -
- Square Icon: 28 x 28 px -
-
-
- -
-
- Figure - 6. Icon sizing and positioning inside the bounds of the - icon asset.
-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.psdin 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 icon
- -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.
- -As described in Providing Density-Specific Icon -Sets, above, you should create separate icon sets for low-, normal, and -high-density screens. This ensures that your icons will display properly across -the range of devices on which your application can be installed. See Table 1 for a listing of the recommended finished icon -sizes for each density. Also, see Tips for Designers -for suggestions on how to work with multiple sets of icons.
- -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 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 -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 7. Safeframe and corner-rounding for menu -icons. Icon size is 48x48.
-Light, effects, and shadows
- -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 8. Light, effects, and shadows for menu icons.
----
-1. Front part: Use fill gradient from primary color palette 2. Inner shadow: black | 20 % opacity
angle 90° | distance 2px
size 2px3. Outer glow: white | 55% opacity
spread 10% | size 3px5. Inner bevel: depth 1% | direction down size 0px
angle 90° | altitude 10°
highlight white 70% opacity
shadow black 25% opacity-
- -- -- - - -Color palette
- --
- -- - -
White -
r 255 | g 255 | b 255
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 0 | g 0 | b 0
Used for inner shadow and bevel shadow.- - -Step by step
- --
-
- 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 8. -
- Export the icon at 48x48 as a PNG file with transparency enabled. -
"Do's and don'ts"
- -Below are some "do and don't" examples to consider when creating menu icons for -your application.
- - -
-
-
-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.
- -As described in Providing Density-Specific Icon -Sets, above, you should create separate icon sets for low-, normal, and -high-density screens. This ensures that your icons will display properly across -the range of devices on which your application can be installed. See Table 1 for a listing of the recommended finished icon -sizes for each density. Also, see Tips for Designers -for suggestions on how to work with multiple sets of icons.
- -Structure
- --
-
- Rounded corners must always be applied to the base shape and to the details -of a status bar icon shown Figure 9. - -
- 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 9. 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 10. Light, effects, and shadows for status bar 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% opacity3. 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-
- - -- -- - - -Color palette
- -Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.
- --
- -- - -
White -
r 255 | g 255 | b 255
Used for details within the icons and bevel highlight.- - -
Grey gradient -
1: r 169 | g 169 | b 169
2: r 126 | g 126 | b 126
Used for disabled details within the icon.- - -
Fill gradient -
1: 1 r 105 | g 105 | b 105
2: r 10 | g 10 | b 10
Used as color fill.- - -
Black -
r 0 | g 0 | b 0
Used for bevel shadow.- - -Step by step
- --
-
- 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 9. -
- Add light, effects, and shadows as specified in Figure 10. -
- Export the icon at 25x25 as a PNG file with transparency enabled. -
"Do's and don'ts"
- -Below are some "do and don't" examples to consider when creating status bar icons for -your application.
- - -
-
-
-
-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.
- -As described in Providing Density-Specific Icon -Sets, above, you should create separate icon sets for low-, normal, and -high-density screens. This ensures that your icons will display properly across -the range of devices on which your application can be installed. See Table 1 for a listing of the recommended finished icon -sizes for each density. Also, see Tips for Designers -for suggestions on how to work with multiple sets of icons.
- -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 11. Safeframe and fill gradient for unselected tab -icons. Icon size is 32x32.
-- -- -
-- ---Figure 12. 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 13. 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-
- -- -- - -Step by step
- --
-
- 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 13 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 14. 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 2px3. Inner bevel: depth 1% | direction down | size 0px | angle 90° |
altitude 10°
highlight white 70% opacity
shadow black 25% opacity-
- - -- -- - - -Color palette
- --
- -- - -Fill gradient -
1: r 163 | g 163 | b 163
2: r 120 | g 120 | b 120
Used as color fill on unselected tab icons.- - -Step by step
- --
-
- 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 14 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.
- -As described in Providing Density-Specific Icon -Sets, above, you should create separate icon sets for low-, normal, and -high-density screens. This ensures that your icons will display properly across -the range of devices on which your application can be installed. See Table 1 for a listing of the recommended finished icon -sizes for each density. Also, see Tips for Designers -for suggestions on how to work with multiple sets of icons.
-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 15. 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 16. 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-
- - -- -- - -Step by step
- --
-
- 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 16 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 {@link android.widget.ListView}. Examples include the Android -Market application home screen and the driving directions screen in the Maps -application.
- -As described in Providing Density-Specific Icon -Sets, above, you should create separate icon sets for low-, normal, and -high-density screens. This ensures that your icons will display properly across -the range of devices on which your application can be installed. See Table 1 for a listing of the recommended finished icon -sizes for each density. Also, see Tips for Designers -for suggestions on how to work with multiple sets of icons.
- -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 17. 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 18. 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. -
- -- -- - -Step by step
- --
-
- 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 -of 32x32 px on a transparent background. -
Tips for Designers
+Tips for Designers
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.
+Adobe Photoshop or a similar raster and vector image-editing program. -Use common naming conventions for icon assets
+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 @@ -1254,7 +323,7 @@ common prefix for each icon type. For example:
Status bar icons -ic_stat_sysoric_stat_notifyic_stat_notifyic_stat_notify_msg.png@@ -1273,12 +342,12 @@ common prefix for each icon type. For example: doing so is for your convenience only. - Set up a working space that organizes files for multiple densities
+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:
+Supporting multiple screen densities means you must create multiple versions +of the same icon. 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/... @@ -1314,148 +383,57 @@ application: finished_asset.png-Create medium-density assets first
-Since medium density is the baseline for Android, begin your designing work -by creating the
+mdpiassets. 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.Use vector shapes where possible
-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_productiondirectory. 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.Many image-editing programs such as Adobe Photoshop allow you to use a +combination of vector shapes and raster layers and effects. When possible, +use vector shapes so that if the need arises, assets can be scaled up without +loss of detail and edge crispness.
-From the
+mdpiworking files, save individual flattened assets to -the corresponding density-specific resource directory (in this case, -mdpi/) in your working space.Using vectors also makes it easy to align edges and corners to pixel +boundaries at smaller resolutions. -
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 theldpiand -hdpidirectories. If any of the working files use a -density-specific suffix, rename the suffix to match the intended density.Start with large artboards
-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 -
+hdpiasset, scale the image by 150%. To create anldpi-asset, scale the image down by 75%. To scale the images, follow these steps:Because you will need to create assets for different screen densities, as +shown in Table 1, it is best to start your icon +designs on large artboards with dimensions that are multiples of the target icon +sizes. For example, launcher +icons are 72, 48, or 36 pixels wide, depending on screen density. If you +initially draw launcher icons on an 864x864 artboard, it will be easier and +cleaner to tweak the icons when you scale the artboard down to the target +sizes for final asset creation.
--
-
- 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
hdpiassets and "75" forldpiassets.
- - 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. -
It's also beneficial to add guide lines (also known as guides) to your large +artboard for the recommended safe margins at the highest target density. +Continuing with the example above, per the guidelines, +launcher icon content should be 60x60 pixels (56x56 for square icons) within the +full 72x72 asset, or a safe margin of 6 pixels on each side. On an 864x864 +artboard, this corresponds to horizontal and vertical guide lines 72 pixels from +each side of the artboard.
-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
+When 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 +layer, those layers will need to be redrawn manually to appear crisp at higher +densities. For example if a 60x60 circle was painted as a bitmap for
-mdpiit will need to be repainted as a 90x90 circle forhdpi.When scaling a nine-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.
+When saving image assets, remove unnecessary metadata
-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 nine-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 nine-patch asset (with tick marks), be sure to save the asset -in PNG format with a filename that includes the
- - -.9.pngsuffix. 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:
+To help keep each image asset as small as possible, make sure to remove any +unnecessary headers from the file, such as Adobe Fireworks metadata or Adobe +Photoshop headers. To remove the Photoshop header, follow these steps:
- Under the File menu, choose the Save for Web & @@ -1466,250 +444,24 @@ Transparency box (if the image uses transparency)
- Select Save.
Make sure that corresponding assets for different densities use the same -filenames
+It is also useful to use PNG file size optimization tools such as OptiPNG or Pngcrush. -
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 screen characteristics -of the device. For this reason, make sure that the set of assets in each -directory is consistent and that the files do not use density-specific suffixes. -For more information about density-specific resources and how the system uses -them to meet the needs of different devices, see 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 +screen characteristics of the device. For this reason, make sure that the set of +assets in each directory is consistent and that the files do not use +density-specific suffixes.
+ +For more information about density-specific resources +and how the system uses them to meet the needs of different devices, see Supporting Multiple Screens.
-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.. - -
-
-
-Standard menu icons
- -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.
- - --
- - -- - -- - - -
- 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- - -
- ZoomStandard status bar icons
- -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.
- - --
- diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_1.html b/docs/html/guide/practices/ui_guidelines/icon_design_1.html new file mode 100644 index 0000000000000..183facf18db81 --- /dev/null +++ b/docs/html/guide/practices/ui_guidelines/icon_design_1.html @@ -0,0 +1,9 @@ + + + +- - -- - - -
- Bluetooth- - - -
- Email- - - -
- IM- - - -
- Voicemail- - - -
- Warning- - - -
- Call- - -
- Call forward- - -- - - -
- Call on hold- - -
- Missed callRedirecting... + + +click here if you are not redirected. + + diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_1.jd b/docs/html/guide/practices/ui_guidelines/icon_design_1.jd deleted file mode 100644 index 995cfea6cca52..0000000000000 --- a/docs/html/guide/practices/ui_guidelines/icon_design_1.jd +++ /dev/null @@ -1,1205 +0,0 @@ -page.title=Icon Design Guidelines, Android 1.0 -@jd:body - --- -- --Quickview
- --
-
- You can use several types of icons in an Android application. -
- Your icons should follow the specification in this document. -
- A set of standard icons is provided by the Android platform. Your -application can use the standard icons by referencing them as resources. -
In this document
- --
-
- Launcher icon -
- Menu icon -
- Status bar icon -
- Tab icon -
- Dialog icon -
- List view icon - -
- General guidelines -
- Using the Icon Templates Pack -
- Icon appendix
-
-
-
- Launcher icons -
- Menu icons -
- Status bar icons -
-
-
Downloads
- - - -See also
- - - - -Newer versions
- - - -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% opacity5. Side part: Use medium gradient from color palette -
- -- -- - - -Launcher icon color palette
- --
- -- - -
White -
r 255 | g 255 | b 255
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 0 | g 0 | b 0
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 icon
- -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.
-Light, effects, and shadows
- -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 2px3. Outer glow: white | 55% opacity
spread 10% | size 3px5. Inner bevel: depth 1% | direction down size 0px
angle 90° | altitude 10°
highlight white 70% opacity
shadow black 25% opacity-
- - -- -- - - -Color palette
- --
- -- - -White -
r 255 | g 255 | b 255
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 0 | g 0 | b 0
Used for inner shadow and bevel shadow.- - -Step by step
- --
-
- 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% opacity3. 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-
- - -- -- - - -Color palette
- -Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.
- --
- -- - -White -
r 255 | g 255 | b 255
Used for details within the icons and bevel highlight.- - -Grey gradient -
1: r 169 | g 169 | b 169
2: r 126 | g 126 | b 126
Used for disabled details within the icon.- - -Fill gradient -
1: 1 r 105 | g 105 | b 105
2: r 10 | g 10 | b 10
Used as color fill.- - -Black -
r 0 | g 0 | b 0
Used for bevel shadow.- - -Step by step
- --
-
- 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. -
- Export the icon at 25x25 as a PNG file with transparency enabled. -
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-
- -- -- - -Step by step
- --
-
- 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 2px3. Inner bevel: depth 1% | direction down | size 0px | angle 90° |
altitude 10°
highlight white 70% opacity
shadow black 25% opacity-
- - -- -- - - -Color palette
- --
- -- - -Fill gradient -
1: r 163 | g 163 | b 163
2: r 120 | g 120 | b 120
Used as color fill on unselected tab icons.- - -Step by step
- --
-
- 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-
- - -- -- - -Step by step
- --
-
- 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. -
- - -- -- - -Step by step
- --
-
- 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- - -- -
- YouTubeStandard menu icons
- -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- - -
- ZoomStandard 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".
- - --
- - diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_dialog.jd b/docs/html/guide/practices/ui_guidelines/icon_design_dialog.jd new file mode 100644 index 0000000000000..f78bd864e4e7a --- /dev/null +++ b/docs/html/guide/practices/ui_guidelines/icon_design_dialog.jd @@ -0,0 +1,164 @@ +page.title=Dialog Icons +parent.title=Icon Design Guidelines +parent.link=icon_design.html +@jd:body + +- - -- - - -
- Bluetooth- - - -
- Email- - - -
- IM- - - -
- Voicemail- - - -
- Warning- - - -
- Call- - -
- Call forward- - -- - - -
- Call on hold- - -
- Missed call+ ++ + + +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.
+ +As described in Providing +Density-Specific Icon Sets, you should create separate icon sets for low-, +medium-, and high-density screens. This ensures that your icons will display +properly across the range of devices on which your application can be installed. +See Table 1 for a listing of the recommended finished icon sizes for each +density. Also, see Tips for Designers +for suggestions on how to work with multiple sets of icons.
+ + +Table 1. Summary of finished dialog +icon dimensions for each of the three generalized screen densities.
+ ++ +
+ + + ++ + ++ +Low density screen (ldpi) ++ +Medium density screen (mdpi) ++ +High density screen (hdpi) + + + + ++ 24 x 24 px + ++ 32 x 32 px + ++ 48 x 48 px + +Final art must be exported as a transparent PNG file. Do not include +a background color.
+ +Templates for creating icons in Adobe Photoshop are available in the Icon +Templates Pack.
+ +All Android Versions
+ +The following guidelines describe how to design dialog icons for all versions +of the Android platform.
+ +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. + + +
+
+ + ++ ++ +
++ +++Figure 1. 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 2. 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+
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd b/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd new file mode 100644 index 0000000000000..cb04b552f56b3 --- /dev/null +++ b/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd @@ -0,0 +1,520 @@ +page.title=Launcher Icons +parent.title=Icon Design Guidelines +parent.link=icon_design.html +@jd:body + ++ ++ + +Step by step
+ +-
+
- 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 2 for the proper filter. +
- Export the icon at 32x32 as a PNG file with transparency enabled. +
++ + ++ ++In this document
+ +-
+
- Application Icons in Android Market +
- Android 2.0 and Later
+
-
+
- Style +
- Size +
- Materials and colors +
- Effects +
- Do's and don'ts +
- Example icons +
+ - Android 1.6 and Earlier +
See also
+ + + +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. 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.
+ +As described in Providing +Density-Specific Icon Sets, you should create separate icons for low-, +medium-, and high-density screens. This ensures that your icons will display +properly across the range of devices on which your application can be installed. +See Tips for Designers for +suggestions on how to work with multiple sets of icons.
+ + + +Application Icons in Android Market
+ +If you are publishing +your application on Android Market, you will also need to provide a 512x512 +pixel, high-resolution application icon in the developer console at upload-time. +This icon will be used in various locations in Android Market and does +not replace your launcher icon.
+ +For tips and recommendations on creating high-resolution launcher icons that +can easily be scaled up to 512x512, see + +Tips for Designers.
+ +For information and specifications about high-resolution application +icons in Android Market, see the following article:
+ ++ Graphic Assets for your Application (Android Market Help) » + + + + +
Android 2.0 and Later
+ +Starting with Android 2.0, launcher icons should be front-facing, instead of +at a three-quarter perspective. The following guidelines describe how to design +launcher icons for Android 2.0 (API Level 5) and later.
+ +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. Example launcher icons for Android 2.0 and + greater. +
+Clean and contemporary:
+ +-
+
- Launcher icons should be modern and sometimes quirky; 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. +
Note: Android applies separate text labels +using the application name when displaying launcher icons, so you should avoid +embedding text in your icon and instead focus on designing a distinct and +memorable icon.
+ + + +Size and positioning
+ +Launcher icons should use a variety of shapes and forms that are scaled and +positioned inside the asset to create consistent visual weight with other +icons.
+ +Figure 2 illustrates various ways of positioning the icon inside the +asset. You should size the icons smaller than the actual bounds of the +asset to create a consistent visual weight and to allow for shadows. If +your icon is square or nearly square, it should be scaled even smaller.
+ +In order to indicate the recommended size for the icon, each example in +Figure 2 includes three different guide rectangles:
+ +-
+
- The red box is the bounding box for the full asset. +
- The blue box is the recommended bounding box for the actual icon. +The icon box is sized smaller than the full asset box so that there is space to +include shadows and allow for special icon treatments. +
- The orange box is the recommended bounding box for the actual icon when +the content is square. The box for square icons is smaller than that for other +icons to establish a consistent visual weight across the two types. +
+
+ + + + ++ + ++ +-
+
- Launcher icon dimensions for high-density (
hdpi) screens:
+ - Full Asset: 72 x 72 px +
- Icon: 60 x 60 px +
- Square Icon: 56 x 56 px +
-
+
+ +
++ ++ + +-
+
- Launcher icon dimensions for medium-density (
mdpi) screens:
+ - Full Asset: 48 x 48 px +
- Icon: 40 x 40 px +
- Square Icon: 38 x 38 px +
-
+
+ +
++ + ++ + +-
+
- Launcher icon dimensions for low-density (
ldpi) screens:
+ - Full Asset: 36 x 36 px +
- Icon: 30 x 30 px +
- Square Icon: 28 x 28 px +
-
+
+ +
++ + ++ + +Figure 2. + Launcher icon sizing and positioning inside the bounds of the + icon asset.
+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.
+ +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 3. +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. Recommended color palette for icons.
+ +When you combine the materials in Figure 4 with a color highlight from the +recommended palette above, you can create materials combinations such as those +shown in Figure 5. To get you started, the +Icon Templates Pack +includes a Photoshop file (
+ +ic_launcher_template/example_materials.psd) +that provides all of the default materials, colors, and gradients.+ +
+ + + ++ + ++ +
++Figure 4. Example materials that you can use to create +your icons.
++ +
++Figure 5. Examples of materials combined with base +and highlight colors from the recommended palette.
+Effects
+ +Launcher icons are flat and the perspective is straight-on, rather than at an +angle. A drop shadow is used to create a sense of depth. Launcher icons can use +varying textures and lighting effects, but must be lit directly from above +(straight down).
+ +In order to maintain consistency, all launcher icons should use the same +drop shadow effect, as shown in Figure 6.
+ ++
+ + + ++ ++ +
++ +++Figure 6. Style, light and effects for launcher icons.
+++Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.
++
+1. Lighting: Top-lit, using appropriate lighting details 2. Drop shadow: #000000, 75% opacity
angle 90°
distance 1px
size 3px3. Textures: Tactile, appear to use real-world materials (monochromatic noise in example image) 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 7. Side-by-side examples of "do's and don'ts" for +Android launcher icons.
+ + + + + +Example icons
+ +Shown below are examples of high-density launcher icons used by +Android applications. The icons are provided for your reference only — +please do not reuse these icons in your applications..
+ +
+
+
+
+Android 1.6 and earlier
+ +The following guidelines describe how to design launcher icons for Android +1.6 (API Level 4) and earlier. Launcher icons for Android 1.6 and below are +simplified 3D icons with a fixed perspective. The required perspective is shown +in Figure 8.
+ +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 8. + +
- 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 PNG file +using a raster image editor such as Adobe Photoshop. Do not include a background +color. + +
- Templates for creating icons in Adobe Photoshop are available in the Icon +Templates Pack. + +
+
+ ++ ++ +
++ +++Figure 8. Rounded corners and 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° 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 9. 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% opacity5. Side part: Use medium gradient from color palette +
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_list.jd b/docs/html/guide/practices/ui_guidelines/icon_design_list.jd new file mode 100644 index 0000000000000..7bf34cc57d388 --- /dev/null +++ b/docs/html/guide/practices/ui_guidelines/icon_design_list.jd @@ -0,0 +1,163 @@ +page.title=List View Icons +parent.title=Icon Design Guidelines +parent.link=icon_design.html +@jd:body + ++ ++ + + +Launcher icon color palette
+ ++
+ ++ + +White +
r 255 | g 255 | b 255
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 0 | g 0 | b 0
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. +
+ ++ + + +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 {@link android.widget.ListView}. Examples include the Settings +application.
+ +As described in Providing +Density-Specific Icon Sets, you should create separate icon sets for low-, +medium-, and high-density screens. This ensures that your icons will display +properly across the range of devices on which your application can be installed. +See Table 1 for a listing of the recommended finished icon sizes for each +density. Also, see Tips for Designers +for suggestions on how to work with multiple sets of icons.
+ + +Table 1. Summary of finished list view +icon dimensions for each of the three generalized screen densities.
+ ++ +
+ + + ++ + ++ +Low density screen (ldpi) ++ +Medium density screen (mdpi) ++ +High density screen (hdpi) + + + + ++ 24 x 24 px + ++ 32 x 32 px + ++ 48 x 48 px + +Final art must be exported as a transparent PNG file. Do not include +a background color.
+ +Templates for creating icons in Adobe Photoshop are available in the Icon +Templates Pack.
+ +All Android Versions
+ +The following guidelines describe how to design dialog icons for all versions +of the Android platform.
+ +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. + + +
+
+ ++ ++ +
++ +++Figure 1. 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 2. 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. +
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_menu.jd b/docs/html/guide/practices/ui_guidelines/icon_design_menu.jd new file mode 100644 index 0000000000000..2029def3f164a --- /dev/null +++ b/docs/html/guide/practices/ui_guidelines/icon_design_menu.jd @@ -0,0 +1,349 @@ +page.title=Menu Icons +parent.title=Icon Design Guidelines +parent.link=icon_design.html +@jd:body + ++ ++ + +Step by step
+ +-
+
- Add the effects seen in Figure 2 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. +
+ ++ + + +Menu icons are graphical elements placed in the options menu shown to users +when they press the Menu button. They are drawn in a flat-front perspective and +in greyscale. Elements in a menu icon must not be visualized in 3D or +perspective.
+ +As described in Providing +Density-Specific Icon Sets, you should create separate icon sets for low-, +medium-, and high-density screens. This ensures that your icons will display +properly across the range of devices on which your application can be installed. +See Tips for Designers +for suggestions on how to work with multiple sets of icons.
+ +Final art must be exported as a transparent PNG file. Do not include +a background color.
+ +Templates for creating icons in Adobe Photoshop are available in the Icon +Templates Pack.
+ + +Caution: The style and content sizing of +menu icons have changed in Android 2.3 compared to +previous versions: +
+ + + +
+1. Icons have a larger safe frame; icon content is smaller within the full +asset. Final asset sizes have not changed. +
+2. The color palette is slightly lighter. +
+3. No outer glow effects are applied. +
+4. Menu icons can now be rendered on either dark or light backgrounds. + +Android 2.3 and Later
+ +The following guidelines describe how to design menu icons for Android +2.3 (API Level 9) and later.
+ +Size and positioning
+ +Menu icons can use a variety of shapes and forms and must be scaled and +positioned inside the asset to create consistent visual weight with other +icons.
+ +Figure 1 illustrates various ways of positioning the icon inside the +asset. You should size the icons smaller than the actual bounds of the +asset, to create a consistent visual weight. If your icon is square or +nearly square, it should be scaled even smaller.
+ +In order to indicate the recommended size for the icon, each example in +Figure 1 includes three different guide rectangles:
+ +-
+
- The red box is the bounding box for the full asset. +
- The blue box is the recommended bounding box for the actual icon. +The icon box is sized smaller than the full asset box to allow for +varying icon shapes while maintaining a consistent visual weight. +
- The orange box is the recommended bounding box for the actual icon when +the content is square. The box for square icons is smaller than that for other +icons to establish a consistent visual weight across the two types. +
+
+ + + + ++ + ++ +-
+
- Menu icon dimensions for high-density (
hdpi) screens:
+ - Full Asset: 72 x 72 px +
- Icon: 48 x 48 px +
- Square Icon: 44 x 44 px +
-
+
+ +
++ ++ + +-
+
- Menu icon dimensions for medium-density (
mdpi) screens:
+ - Full Asset: 48 x 48 px +
- Icon: 32 x 32 px +
- Square Icon: 30 x 30 px +
-
+
+ +
++ + ++ + +-
+
- Menu icon dimensions for low-density (
ldpi) screens:
+ - Full Asset: 36 x 36 px +
- Icon: 24 x 24 px +
- Square Icon: 22 x 22 px +
-
+
+ +
++ + ++ + +Figure 1. + Menu icon sizing and positioning inside the bounds of the + icon asset.
+Style, colors, and effects
+ +Menu icons are flat, pictured face on, and greyscale. A slight deboss and +some other effects, which are shown below, are used to create depth. Menu icons +should include rounded corners, but only when logically appropriate.
+ +In order to maintain consistency, all menu icons must use the same +color palette and effects, as shown in Figure 2.
+ + + ++
+ + + + ++ ++ +
++ +++Figure 2. Style, light and effects for menu icons.
+++Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.
++
+1. Corner rounding: 2 pixel corner radius, when appropriate 2. Fill gradient: 90°, from #8C8C8Cto#B2B2B23. Inner shadow: #000000, 20% opacity
angle 90°
distance 2px
size 2px4. Inner bevel: depth 1%
direction down
size 0px
angle 90°
altitude 10°
highlight#ffffff, 70% opacity
shadow#000000, 25% opacityDo's and don'ts
+ +Below are some "do and don't" examples to consider when creating menu icons for +your application.
+ + +
+
+
+
+
+Example icons
+ +Shown below are standard high-density menu icons that are used in the Android +platform.
+ +Warning: Because these resources can change +between platform versions, you should not reference these icons using the +Android platform resource IDs (i.e. menu icons under +
+ +android.R.drawable). If you want to 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 grid below is not intended to +be complete.
+
+
+
+
+Android 2.2 and Earlier
+ +The following guidelines describe how to design menu icons for Android 2.2 +(API Level 4) and earlier. Menu icons in Android 2.2 and below 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 3. Safeframe and corner-rounding for menu +icons. Icon size is 48x48.
+Light, effects, and shadows
+ +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 4. 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 2px3. Outer glow: white | 55% opacity
spread 10% | size 3px5. Inner bevel: depth 1% | direction down size 0px
angle 90° | altitude 10°
highlight white 70% opacity
shadow black 25% opacity+
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_status_bar.jd b/docs/html/guide/practices/ui_guidelines/icon_design_status_bar.jd new file mode 100644 index 0000000000000..1fc352859c086 --- /dev/null +++ b/docs/html/guide/practices/ui_guidelines/icon_design_status_bar.jd @@ -0,0 +1,330 @@ +page.title=Status Bar Icons +parent.title=Icon Design Guidelines +parent.link=icon_design.html +@jd:body + ++ ++ + + +Color palette
+ ++
+ ++ + +White +
r 255 | g 255 | b 255
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 0 | g 0 | b 0
Used for inner shadow and bevel shadow.+ + +Step by step
+ +-
+
- 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 4. +
- Export the icon at 48x48 as a PNG file with transparency enabled. +
+ ++ + + +Status bar icons are used to represent notifications from your application in +the status bar.
+ +As described in Providing +Density-Specific Icon Sets, you should create separate icon sets for low-, +medium-, and high-density screens. This ensures that your icons will display +properly across the range of devices on which your application can be installed. +See Tips for Designers for +suggestions on how to work with multiple sets of icons.
+ +Final art must be exported as a transparent PNG file. Do not include +a background color.
+ +Templates for creating icons in Adobe Photoshop are available in the Icon +Templates Pack.
+ + +Warning: + +The style and dimensions of status bar icons have changed drastically in +Android 2.3 compared to previous versions. To +provide support for all Android versions, developers should: +
+ + + +
+1. Place status bar icons for Android 2.3 and higher in the +drawable-hdpi-v9,drawable-mdpi-v9, anddrawable-ldpi-v9directories. +
+2. Place status bar icons for previous versions in +drawable-hdpi,drawable-mdpi, anddrawable-ldpidirectories. + +Android 2.3 and Later
+ +The following guidelines describe how to design status bar icons for Android +2.3 (API Level 9) and later.
+ +Size and positioning
+ +Status bar icons should use simple shapes and forms and those must be +scaled and positioned inside the final asset.
+ +Figure 1 illustrates various ways of positioning the icon inside the +asset. You should size the icons smaller than the actual bounds of the +asset. Status bar icons may vary in width, but only +minimally.
+ +In order to indicate the recommended size for the icon, each example in +Figure 1 includes two different guide rectangles:
+ +-
+
- The red box is the bounding box for the full asset. +
- The blue box is the recommended bounding box for the actual icon. +The icon box is sized smaller vertically than the full asset box to allow for +varying icon shapes while maintaining a consistent visual weight. +
+
+ + + + ++ + ++ +-
+
- Status bar icon dimensions for high-density (
hdpi) screens:
+ - Full Asset: 24w x 38h px (preferred, width may vary) +
- Icon: 24w x 24h px (preferred, width may vary) +
-
+
+ +
++ ++ + +-
+
- Status bar icon dimensions for medium-density (
mdpi) screens:
+ - Full Asset: 16w x 25 px (preferred, width may vary) +
- Icon: 16w x 16w px (preferred, width may vary) +
-
+
+ +
++ + ++ + +-
+
- Status bar icon dimensions for low-density (
ldpi) screens:
+ - Full Asset: 12w x 19h px (preferred, width may vary) +
- Icon: 12w x 12h px (preferred, width may vary) +
-
+
+ +
++ + ++ + +Figure 1. + Status bar icon sizing and positioning inside the bounds of the + icon asset.
+Style, colors, and effects
+ +Status bar icons are flat, matte, and pictured face-on.
+ + ++
+ + + + ++ ++ +
++ +++Figure 2. Style and effects for status icons.
+++Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.
++
+1. Fill gradient: 90°, from #828282to#9191912. Inner shadow: #FFFFFF, 10% opacity
angle 90°
distance 1px
size 0px3. Inner content: Inner content should subtract from the outer shape and consist purely of transparent pixels. Do's and don'ts
+ +Below are some "do and don't" examples to consider when creating status bar icons for +your application.
+ + +
+
+
+
+
+Example icons
+ +Shown below are standard high-density status bar icons that are used in +the Android platform.
+ +Warning: Because these resources can change +between platform versions, you should not reference these icons using the +Android platform resource IDs (i.e. status bar icons under +
+ +android.R.drawable). If you want to 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 grid below is not intended to +be complete.
+
+
+
+Android 2.2 and Earlier
+ +The following guidelines describe how to design status bar icons for Android +2.2 (API Level 8) and earlier.
+ +Structure
+ +-
+
- Rounded corners must always be applied to the base shape and to the details +of a status bar icon shown Figure 3. + +
- 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 3. 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 4. Light, effects, and shadows for status bar 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% opacity3. 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+
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd b/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd new file mode 100644 index 0000000000000..1f96c3e3622c1 --- /dev/null +++ b/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd @@ -0,0 +1,454 @@ +page.title=Tab Icons +parent.title=Icon Design Guidelines +parent.link=icon_design.html +@jd:body + ++ ++ + + +Color palette
+ +Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.
+ ++
+ ++ + +White +
r 255 | g 255 | b 255
Used for details within the icons and bevel highlight.+ + +Grey gradient +
1: r 169 | g 169 | b 169
2: r 126 | g 126 | b 126
Used for disabled details within the icon.+ + +Fill gradient +
1: 1 r 105 | g 105 | b 105
2: r 10 | g 10 | b 10
Used as color fill.+ + +Black +
r 0 | g 0 | b 0
Used for bevel shadow.+ + +Step by step
+ +-
+
- 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 3. +
- Add light, effects, and shadows as specified in Figure 4. +
- Export the icon at 25x25 as a PNG file with transparency enabled. +
++ + + ++ ++In this document
+ + + +See also
+ + + +Tab icons are graphical elements used to represent individual tabs in a +multi-tab interface. Each tab icon has two states: unselected and selected.
+ +As described in Providing +Density-Specific Icon Sets, you should create separate icon sets for low-, +medium-, and high-density screens. This ensures that your icons will display +properly across the range of devices on which your application can be installed. +See Tips for Designers +for suggestions on how to work with multiple sets of icons.
+ +Final art must be exported as a transparent PNG file. Do not include +a background color.
+ +Templates for creating icons in Adobe Photoshop are available in the Icon +Templates Pack.
+ + + +Warning: + +The style of tab icons has changed drastically in +Android 2.0 compared to previous versions. To +provide support for all Android versions, developers should: +
+ + +
+1. Place tab icons for Android 2.0 and higher in the +drawable-hdpi-v5,drawable-mdpi-v5, anddrawable-ldpi-v5directories. +
+2. Place tab icons for previous versions in +drawable-hdpi,drawable-mdpi, anddrawable-ldpidirectories. +
+3. Setandroid:targetSdkVersionto 5 or higher in the +<uses-sdk> +in the application manifest. +This will inform the system that it should render tabs using the new tab style. + +Providing Icons for Two Tab States
+ +Tab icons should have two states: unselected and selected. To provide icons +with multiple states, developers must create a +state +list drawable for each an icon, which is an XML file that lists which image +to use for the different UI states.
+ +For example, for a tab widget with tabs named 'Friends' and 'Coworkers', +you can use a directory structure similar to the one below:
+ +res/... + drawable/... + ic_tab_friends.xml + ic_tab_coworkers.xml + drawable-ldpi/... + ic_tab_friends_selected.png + ic_tab_friends_unselected.png + ic_tab_coworkers_selected.png + ic_tab_coworkers_unselected.png + drawable-mdpi/... + ic_tab_friends_selected.png + ic_tab_friends_unselected.png + ic_tab_coworkers_selected.png + ic_tab_coworkers_unselected.png + drawable-hdpi/... + ... + drawable-ldpi-v5/... + ... + drawable-mdpi-v5/... + ... + drawable-hdpi-v5/... + ...
+ +The contents of the XML files listed above should reference the corresponding +selected and unselected icon drawables. For example, below is the code +for
+ +ic_tab_friends.xml:+<?xml version="1.0" encoding="utf-8"?> +<selector xmlns:android="http://schemas.android.com/apk/res/android"> + <!-- selected state --> + <item android:drawable="@drawable/ic_tab_friends_selected" + android:state_selected="true" + android:state_pressed="false" /> + <!-- unselected state (default) --> + <item android:drawable="@drawable/ic_tab_friends_unselected" /> +</selector> +
+ + + + +Android 2.0 and Later
+ +The following guidelines describe how to design tab icons for Android +2.0 (API Level 5) and later.
+ +Size and positioning
+ +Tab icons should use simple shapes and forms and those must be +scaled and positioned inside the final asset.
+ +Figure 1 illustrates various ways of positioning the icon inside the +asset. You should size the icons smaller than the actual bounds of the +asset.
+ +In order to indicate the recommended size for the icon, each example in +Figure 1 includes three different guide rectangles:
+ +-
+
- The red box is the bounding box for the full asset. +
- The blue box is the recommended bounding box for the actual icon. +The icon box is sized smaller than the full asset box to allow for +special icon treatments. +
- The orange box is the recommended bounding box for the actual icon when +the content is square. The box for square icons is smaller than that for other +icons to establish a consistent visual weight across the two types. +
+
+ + + + ++ + ++ +-
+
- Tab icon dimensions for high-density (
hdpi) screens:
+ - Full Asset: 48 x 48 px +
- Icon: 42 x 42 px +
-
+
+ +
++ ++ + +-
+
- Tab icon dimensions for medium-density (
mdpi) screens:
+ - Full Asset: 32 x 32 px +
- Icon: 28 x 28 px +
-
+
+ +
++ + ++ + +-
+
- Tab icon dimensions for low-density (
ldpi) screens:
+ - Full Asset: 24 x 24 px +
- Icon: 22 x 22 px +
-
+
+ +
++ + ++ + +Figure 1. + Tab icon sizing and positioning inside the bounds of the + icon asset.
+Style, colors, and effects
+ +Tab icons are flat, matte, and pictured face-on.
+ +Tab icons should have two states: selected and unselected.
+ ++
+ ++ ++ +
++ +++Figure 2. Style and effects for unselected tab icons.
+++Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.
++
+1. Fill color: #8080802. Inner content: Inner content should subtract from the outer shape and consist purely of transparent pixels. +
+ + + ++ ++ +
++ +++Figure 3. Style and effects for selected tab icons.
+++Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.
++
+1. Fill color: #FFFFFF2. Inner content: Inner content should subtract from the outer shape and consist purely of transparent pixels. 3. Outer glow: #000000, 25% opacity
size 3pxDo's and don'ts
+ +Below are some "do and don't" examples to consider when creating tab icons for +your application.
+ + +
+
+
+
+
+Example icons
+ +Shown below are standard high-density tab icons that are used in +the Android platform.
+ +Warning: +Because these resources can change between platform versions, you +should not reference the system's copy of the resources. If you want to +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 grid below is not intended to be complete.
+ +
+
+
+
+Android 1.6 and Earlier
+ +The following guidelines describe how to design tab icons for Android +1.6 (API Level 4) and earlier.
+ +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. + +
+
+ ++ ++ +
++ +++Figure 3. Safeframe and fill gradient for unselected tab +icons. Icon size is 32x32.
++ ++ +
++ +++Figure 4. 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 5. 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+
+ ++ ++ + +Step by step
+ +-
+
- 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 5 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 6. 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 2px3. Inner bevel: depth 1% | direction down | size 0px | angle 90° |
altitude 10°
highlight white 70% opacity
shadow black 25% opacity+
diff --git a/docs/html/guide/practices/ui_guidelines/index.jd b/docs/html/guide/practices/ui_guidelines/index.jd index ea3551d7c3b68..cb34d2ea32b06 100644 --- a/docs/html/guide/practices/ui_guidelines/index.jd +++ b/docs/html/guide/practices/ui_guidelines/index.jd @@ -12,7 +12,7 @@ these guidelines as we release them.+ ++ + + +Color palette
+ ++
+ ++ + +Fill gradient +
1: r 163 | g 163 | b 163
2: r 120 | g 120 | b 120
Used as color fill on unselected tab icons.+ + +Step by step
+ +-
+
- 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 6 for the selected state filter. +
- Export the icon at 32x32 as a PNG file with transparency enabled. +
- Icon Design Guidelines and Android Icon Templates Pack +href="{@docRoot}shareables/icon_templates-v2.3.zip">Android Icon Templates Pack »
- Your applications need a wide variety of icons, from a launcher icon to icons in menus, dialogs, tabs, the status bar, and lists. The Icon Guidelines diff --git a/docs/html/images/icon_design/IconGraphic_Colors.png b/docs/html/images/icon_design/IconGraphic_Colors.png index f70eefc5c5f81..7723add89b56a 100644 Binary files a/docs/html/images/icon_design/IconGraphic_Colors.png and b/docs/html/images/icon_design/IconGraphic_Colors.png differ diff --git a/docs/html/images/icon_design/do_dont_statusicons.png b/docs/html/images/icon_design/do_dont_statusicons.png index 20c67375d3238..731a202c80aee 100644 Binary files a/docs/html/images/icon_design/do_dont_statusicons.png and b/docs/html/images/icon_design/do_dont_statusicons.png differ diff --git a/docs/html/images/icon_design/do_dont_tabicons.png b/docs/html/images/icon_design/do_dont_tabicons.png new file mode 100644 index 0000000000000..06171b3c1eec5 Binary files /dev/null and b/docs/html/images/icon_design/do_dont_tabicons.png differ diff --git a/docs/html/images/icon_design/launcher_size_hdpi.png b/docs/html/images/icon_design/launcher_size_hdpi.png new file mode 100644 index 0000000000000..e3f747f5f9897 Binary files /dev/null and b/docs/html/images/icon_design/launcher_size_hdpi.png differ diff --git a/docs/html/images/icon_design/launcher_size_ldpi.png b/docs/html/images/icon_design/launcher_size_ldpi.png new file mode 100644 index 0000000000000..91e87da4327b0 Binary files /dev/null and b/docs/html/images/icon_design/launcher_size_ldpi.png differ diff --git a/docs/html/images/icon_design/launcher_size_mdpi.png b/docs/html/images/icon_design/launcher_size_mdpi.png new file mode 100644 index 0000000000000..e8da9412626bd Binary files /dev/null and b/docs/html/images/icon_design/launcher_size_mdpi.png differ diff --git a/docs/html/images/icon_design/launcher_structure.png b/docs/html/images/icon_design/launcher_structure.png index 53e4d9a971ca7..b48173abd84f0 100644 Binary files a/docs/html/images/icon_design/launcher_structure.png and b/docs/html/images/icon_design/launcher_structure.png differ diff --git a/docs/html/images/icon_design/launcher_style.png b/docs/html/images/icon_design/launcher_style.png new file mode 100644 index 0000000000000..c4d2c6b5d251f Binary files /dev/null and b/docs/html/images/icon_design/launcher_style.png differ diff --git a/docs/html/images/icon_design/menu_size_hdpi.png b/docs/html/images/icon_design/menu_size_hdpi.png new file mode 100644 index 0000000000000..597bbffd6648a Binary files /dev/null and b/docs/html/images/icon_design/menu_size_hdpi.png differ diff --git a/docs/html/images/icon_design/menu_size_ldpi.png b/docs/html/images/icon_design/menu_size_ldpi.png new file mode 100644 index 0000000000000..6b521e13bb854 Binary files /dev/null and b/docs/html/images/icon_design/menu_size_ldpi.png differ diff --git a/docs/html/images/icon_design/menu_size_mdpi.png b/docs/html/images/icon_design/menu_size_mdpi.png new file mode 100644 index 0000000000000..9552991501557 Binary files /dev/null and b/docs/html/images/icon_design/menu_size_mdpi.png differ diff --git a/docs/html/images/icon_design/menu_standard.png b/docs/html/images/icon_design/menu_standard.png new file mode 100644 index 0000000000000..e50b74aed4919 Binary files /dev/null and b/docs/html/images/icon_design/menu_standard.png differ diff --git a/docs/html/images/icon_design/menu_style.png b/docs/html/images/icon_design/menu_style.png new file mode 100644 index 0000000000000..030495a9a9185 Binary files /dev/null and b/docs/html/images/icon_design/menu_style.png differ diff --git a/docs/html/images/icon_design/statusbar_size_hdpi.png b/docs/html/images/icon_design/statusbar_size_hdpi.png new file mode 100644 index 0000000000000..caa4047b54ecc Binary files /dev/null and b/docs/html/images/icon_design/statusbar_size_hdpi.png differ diff --git a/docs/html/images/icon_design/statusbar_size_ldpi.png b/docs/html/images/icon_design/statusbar_size_ldpi.png new file mode 100644 index 0000000000000..1fe5c251f600a Binary files /dev/null and b/docs/html/images/icon_design/statusbar_size_ldpi.png differ diff --git a/docs/html/images/icon_design/statusbar_size_mdpi.png b/docs/html/images/icon_design/statusbar_size_mdpi.png new file mode 100644 index 0000000000000..626ff60755a7f Binary files /dev/null and b/docs/html/images/icon_design/statusbar_size_mdpi.png differ diff --git a/docs/html/images/icon_design/statusbar_standard.png b/docs/html/images/icon_design/statusbar_standard.png new file mode 100644 index 0000000000000..260e8e95ed18c Binary files /dev/null and b/docs/html/images/icon_design/statusbar_standard.png differ diff --git a/docs/html/images/icon_design/statusbar_style.png b/docs/html/images/icon_design/statusbar_style.png new file mode 100644 index 0000000000000..3beb6ad0f9d9e Binary files /dev/null and b/docs/html/images/icon_design/statusbar_style.png differ diff --git a/docs/html/images/icon_design/tab_size_hdpi.png b/docs/html/images/icon_design/tab_size_hdpi.png new file mode 100644 index 0000000000000..0e3a5c1eadc68 Binary files /dev/null and b/docs/html/images/icon_design/tab_size_hdpi.png differ diff --git a/docs/html/images/icon_design/tab_size_ldpi.png b/docs/html/images/icon_design/tab_size_ldpi.png new file mode 100644 index 0000000000000..cb361ca0d3b4e Binary files /dev/null and b/docs/html/images/icon_design/tab_size_ldpi.png differ diff --git a/docs/html/images/icon_design/tab_size_mdpi.png b/docs/html/images/icon_design/tab_size_mdpi.png new file mode 100644 index 0000000000000..557b4917c8c69 Binary files /dev/null and b/docs/html/images/icon_design/tab_size_mdpi.png differ diff --git a/docs/html/images/icon_design/tab_standard.png b/docs/html/images/icon_design/tab_standard.png new file mode 100644 index 0000000000000..7f07297392753 Binary files /dev/null and b/docs/html/images/icon_design/tab_standard.png differ diff --git a/docs/html/images/icon_design/tab_style_selected.png b/docs/html/images/icon_design/tab_style_selected.png new file mode 100644 index 0000000000000..e6f383e5b7117 Binary files /dev/null and b/docs/html/images/icon_design/tab_style_selected.png differ diff --git a/docs/html/images/icon_design/tab_style_unselected.png b/docs/html/images/icon_design/tab_style_unselected.png new file mode 100644 index 0000000000000..426e7c9f34814 Binary files /dev/null and b/docs/html/images/icon_design/tab_style_unselected.png differ diff --git a/docs/html/shareables/icon_templates-v2.3.zip b/docs/html/shareables/icon_templates-v2.3.zip new file mode 100644 index 0000000000000..58d90aeb66227 Binary files /dev/null and b/docs/html/shareables/icon_templates-v2.3.zip differ