From 59e644e399e9a8dce48f28c34b5ed66974c41bd4 Mon Sep 17 00:00:00 2001 From: Dirk Dougherty Date: Wed, 24 Mar 2010 17:45:02 -0700 Subject: doc change: cherry pick c87f7a658ea586a5271fabc6e0516a2ddf6f from master --- .../guide/practices/ui_guidelines/icon_design.jd | 1132 ++++++++++++------ .../guide/practices/ui_guidelines/icon_design_1.jd | 1200 ++++++++++++++++++++ 2 files changed, 2007 insertions(+), 325 deletions(-) create mode 100644 docs/html/guide/practices/ui_guidelines/icon_design_1.jd (limited to 'docs/html/guide/practices/ui_guidelines') diff --git a/docs/html/guide/practices/ui_guidelines/icon_design.jd b/docs/html/guide/practices/ui_guidelines/icon_design.jd index e5a1b5e..9dd3d5f 100644 --- a/docs/html/guide/practices/ui_guidelines/icon_design.jd +++ b/docs/html/guide/practices/ui_guidelines/icon_design.jd @@ -1,4 +1,4 @@ -page.title=Icon Design Guidelines +page.title=Icon Design Guidelines, Android 2.0 @jd:body
@@ -8,9 +8,8 @@ page.title=Icon Design Guidelines

In this document

@@ -23,13 +22,14 @@ application can use the standard icons by referencing them as resources.
  • Dialog icon
  • List view icon
    • -
  • General guidelines
    • +
  • Tips for Designers
  • Using the Icon Templates Pack
    • +
  • Icon appendix
      -
    1. Launcher icons
      2. -
    2. Menu icons
      3. -
    3. Status bar icons
      4. +
    4. Standard Launcher icons
      5. +
    5. Standard Menu icons
      6. +
    6. Standard Status bar icons
    • @@ -38,176 +38,560 @@ application can use the standard icons by referencing them as resources.

    See also

      +
    1. Supporting Multiple +Screens
      2. +
    2. Android Icon +Templates Pack, v2.0 »
      3. +
    + +

    Older versions

    + +
      +
    1. Icon Design +Guidelines, Android 1.0
    2. Android Icon -Templates Pack »
      3. +Templates Pack, v1.0 »
    +

    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.

    +professional to users.

    -

    This document shows you how to create icons for various parts -of your application’s user interface that fit the style set by the Android UI -team. Following these guidelines will help you to create a polished and unified -experience for the user.

    +

    This document provides information to help you create icons for various parts +of your application’s user interface that match the general styles used by the +Android 2.x framework. Following these guidelines will help you to create a +polished and unified experience for the user.

    -

    To get started creating conforming icons more quickly, you can download +

    To get started creating your icons more quickly, you can download the Android Icon Templates Pack. For more information, see Using the Android Icon Template Pack.

    -

    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.

    +

    Providing Density-Specific Icon Sets

    + +

    Android is designed to run on a variety of devices that offer a range of +screen sizes and resolutions. When you design the icons for your application, +it's important keep in mind that your application may be installed on any of +those devices. As described in the Supporting Multiple +Screens document, the Android platform makes it straightforward for you to +provide icons in such a way that they will be displayed properly on any device, +regardless of the device's screen size or resolution.

    -

    Structure

    +

    In general, the recommended approach is to create a separate set of icons for +each of the three generalized screen densities listed in Table 1, below, then +store them in density-specific resource directories in your application. When +your application runs, the Android platform will check the characteristics of +the device screen and load icons from the appropriate density-specific +resources. For more information about how to store density-specific resources in +your application, see Resource +directory qualifiers for screen size and density.

    +

    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:

    + +
      +
    1. Design the icons for the baseline density first (see Table 1 for the actual +pixel dimensions at which to design the icons).
      2. +
    2. 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.
      3. +
    3. Test and adjust your baseline icons as needed.
      4. +
    4. When you are satisfied with the icons you've developed at the baseline +density, create scaled copies for the other densities.
      5. + + + +
    5. Place the icons in density-specific resource directories in your +application. For example:
        -
      • The base of a launcher icon can face either the top view or the front -view.
        • +
      • Medium-density assets go in a res/drawable-mdpi/ +directory (or in the default res/drawable/ directory),
        • +
      • High-density assets go in a res/drawable-hdpi/ directory, +and
        • +
      • Low-density assets go in a res/drawable-ldpi/ +directory.
        • +
      6. +
    6. Test and adjust the high- and low-density icons if needed
      7. +
    + +

    For tips on how to create and manage icon sets for multiple densities, see +Tips for Designers.

    + + +

    Table 1. Summary of finished icon +dimensions for each of the three generalized screen densities, by +icon type.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Icon TypeStandard Asset Sizes (in Pixels), for +Generalized Screen Densities
    + Low density screen (ldpi) + + Medium density screen (mdpi) + + High density screen (hdpi) +
    + Launcher + + 36 x 36 px + + 48 x 48 px + + 72 x 72 px +
    + Menu + + 36 x 36 px + + 48 x 48 px + + 72 x 72 px +
    + Status Bar + + 24 x 24 px + + 32 x 32 px + + 48 x 48 px +
    + Tab + + 24 x 24 px + + 32 x 32 px + + 48 x 48 px +
    + Dialog + + 24 x 24 px + + 32 x 32 px + + 48 x 48 px +
    + List View + + 24 x 24 px + + 32 x 32 px + + 48 x 48 px +
    + +

    Launcher Icon

    + +

    A Launcher icon is a graphic that represents your application on the device’s +Home screen and in the Launcher window.

    + +

    The user opens the Launcher by touching the icon at the bottom of the Home +screen. The Launcher opens and exposes the icons for all of the installed +applications, which are arranged in a grid. The user selects an application and +opens it by touching the Launcher icon or by means of any hardware navigation +controls available, such as a trackball or d-pad.

    + +

    The user can also drag an icon out of the Launcher window and onto the Home +screen itself, for more convenient access to the application. In this case, the +system displays your application's Launcher icon against the Home screen +wallpaper, rendering it at the same dimensions as it is rendered inside the +Launcher.

    + +

    The system manages the scaling of all Launcher icons so that they rendered at +a uniform height and width. The actual pixel dimensions of the rendered Launcher +icons on any given device varies, based on the size and pixel-density +characteristics of the device's screen. To ensure the best possible rendering +for your icons, supply versions of the icons that are designed for low, medium, +and high density screens. For information, see Providing Density-Specific Icon Sets, above, or Tips for Designers, below.

    + +

    Style

    + +

    The launcher icons that you create should follow the general style principles +below. The guidelines aren't meant to restrict what you can do with your icons, +but rather they are meant to emphasize the common approaches that your icons can +share with others on the device. Figure 1, at right, provides examples.

    + +
    + +

    + Figure 1. Illustration of Launcher icon style.

    +
    -
  • 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.
    • +

    Clean and contemporary:

    -
  • 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.
    • +

    Simple and iconic:

    + -
  • Final art must be scaled down and exported as a transparent 48x48 px -PNG file using a raster image editor such as Adobe Photoshop.
    • +

    Tactile and textured:

    + -
  • Templates for creating launcher icons in Adobe Illustrator and Photoshop are -available in the Icon Templates Pack.
    • +

    Forward-facing and top-lit:

    + - +Additionally, note all icons will have separate text labels, so rather than +working to include embedded text in the design of of your icons, focus your +efforts on the icon's visual distinctiveness and memorability instead.

    + +

    To look at more examples of the Launcher icons used by built-in Android +applications, see Standard Launcher Icons in the +Icons Appendix of this document.

    + + + +

    Do's and Don'ts

    + +

    Below are some "do and don't" examples to consider when creating icons for +your application.

    + + +
    - - +
    - A view of -launcher icon corners and perspective angles + + +

    Android Launcher icons are...

    + +
      +
    • Modern, minimal, matte, tactile, and textured
      • +
    • Forward-facing and top-lit, whole, limited in color +palette
      • +
    		 -
    -

    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.

    -
    +    		 + +

    Android Launcher icons are not...

    + +
      +
    • Antique, over-complicated, glossy, flat vector
      • +
    • Rotated, Cropped, Over-Saturated
      • +
    -

    Light, effects, and shadows

    +
    +Side-by-side examples +of good/bad icon design. +

    +Figure 2. Side-by-side examples of "do's and don'ts" for +Android launcher icons.

    +
    + +

    Materials and colors

    -

    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.

    +

    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.

    + + + + +
    - - -
    - A view of -light, effects, and shadows for launcher icons. + + +
      +
    1. Icon dimensions for high-density (hdpi) screens:
      2. +
        +
      1. Full Asset: 72 x 72 px
        2. +
      2. Icon: 60 x 60 px
        3. +
      3. Square Icon: 56 x 56 px
        4. +
      + +
    		 -
    -

    Figure 3. Light, effects, and shadows for launcher icons.

    -
    - - - - - - -
    1.Edge highlight:white
    2.Icon shadow:black | 20px blur
    50% opacity | angle 67°
    3.Front part:Use light gradient from color palette
    4.Detail shadow:black | 10px blur
    75% opacity
    5. Side part:Use medium gradient from color palette
    -
    -
    +    		 +
    + + +
      +
    1. Icon Dimensions for medium-density (mdpi) screens:
      2. +
        +
      1. Full Asset: 48 x 48 px
        2. +
      2. Icon: 40 x 40 px
        3. +
      3. Square Icon: 38 x 38 px
        4. +
      + +
    + - + + - -

    Launcher icon color palette

    + - - - - - - - - - - - +

    Using the Launcher Icon Template

    -
    + +
    + +
      +
    1. Icon Dimensions for low-density (ldpi) screens:
      2. +
        +
      1. Full Asset: 36 x 36 px
        2. +
      2. Icon: 30 x 30 px
        3. +
      3. Square Icon: 28 x 28 px
        4. +
      + +
    +    		 + - - - - +

    Figure + 6. Icon sizing and positioning inside the bounds of the + icon asset.

    + - - - - +
    Color palette, whiteWhite
    r 0 | g 0 | b 0
    Used for highlights on edges.
    Color palette, light gradientLight gradient
    1:  r 0 | g 0 | b 0
    2:  r 217 | g 217 | b 217
    Used on the front (lit) part of the icon.
    -
    Color palette, medium gradienMedium gradient
    1:  r 190 | g 190 | b 190
    2:  r 115 | g 115 | b 115
    Used on the side (shaded) part of the icon.
    Color palette, dark gradientDark 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.
    Color palette, blackBlack
    r 255 | g 255 | b 255
    Used as base color in shadows.
    +

    Included in the Android Icon Templates Pack 2.0 is a template containing +palettes for default icon materials and colors. The template is provided in .psd +format for Adobe Photoshop or similar raster image editor.

    - +

    To get started, first download the Android Icon +Templates Pack 2.0 ».

    - +

    Once you've downloaded the pack, unzip it and open the file +Launcher-icon-template.psd in Adobe Photoshop or similar raster +image editing program. Notice the palettes for materials and colors. You can +use as the template as a starting point for creating your Launcher icons.

    -

    Step by step

    +

    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.

    -
      -
    1. 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.
      2. -
    2. Add depth to shapes by extruding them and create the rounded corners as -described for the launcher icon structure.
      3. -
    3. 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.
      4. -
    4. Create the shadows with the correct angle and blur effect.
      5. -
    5. Import the icon into a tool like Adobe Photoshop and scale to fit an image -size of 48x48 px on a transparent background.
      6. -
    6. Export the icon at 48x48 as a PNG file with transparency enabled.
      7. + + + + + + + + + +
      + + +

      Shadow for WVGA (high density) sreens:

      +
        +
      1. Effect: Drop Shadow
        2. +
      2. Color: #000000
        3. +
      3. Blend Mode: Multiply
        4. +
      4. Opacity: 75%
        5. +
      5. Angle: 90°
        6. +
      6. Distance: 2px
        7. +
      7. Spread: 0%
        8. +
      8. Size: 5px
        9. +
      + +
      + + +

      Shadow for HVGA (medium density) sreens:

      +
        +
      1. Effect: Drop Shadow
        2. +
      2. Color: #000000
        3. +
      3. Blend Mode: Multiply
        4. +
      4. Opacity: 75%
        5. +
      5. Angle: 90°
        6. +
      6. Distance: 1px
        7. +
      7. Spread: 0%
        8. +
      8. Size: 3px
        9. +
      + +
      +

      When the shadow is added and the icon is complete, export it as a PNG file +with transparency enabled, ensuring that you size the icon at 72 x 72px for +high-density screens and 48 x 48px for medium density screens. For more +information about why you should provide different Launcher assets for high-, +medium, and low-density screens, see Supporting Multiple +Screens.

      + + +

      Menu icons are graphical elements placed in the pop-up menu shown to users @@ -222,7 +606,7 @@ primary palette and the same effects. For more information, see the menu icon color palette.

    7. Menu icons should include rounded corners, but only when logically -appropriate. For example, in Figure 3 the logical place for rounded corners is +appropriate. For example, in Figure 7 the logical place for rounded corners is the roof and not the rest of the building.
    8. All dimensions specified on this page are based on a 48x48 pixel artboard @@ -247,7 +631,7 @@ icon structure." />
      -

      Figure 4. Safeframe and corner-rounding for menu +

      Figure 7. Safeframe and corner-rounding for menu icons. Icon size is 48x48.

      @@ -267,7 +651,7 @@ effects, which are shown below, are used to create depth.

      -

      Figure 5. Light, effects, and shadows for launcher icons.

      +

      Figure 8. Light, effects, and shadows for launcher icons.

      @@ -315,7 +699,7 @@ effects, which are shown below, are used to create depth.

    9. Create the basic shapes using a tool like Adobe Illustrator.
    10. 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.
      11. -
    11. Add the effects seen as described in Figure 5.
      12. +
    12. Add the effects seen as described in Figure 8.
    13. Export the icon at 48x48 as a PNG file with transparency enabled.
      14. @@ -323,6 +707,14 @@ of 48x48 px on a transparent background. Mind the safeframe.
      1.Front part:Use fill gradient from primary color palette
      +

      "Do's and don'ts"

      + +

      Below are some "do and don't" examples to consider when creating status bar creating icons for +your application.

      + + + +

      Status bar icon

      @@ -334,7 +726,7 @@ smaller and higher in contrast.

      • Rounded corners must always be applied to the base shape and to the details -of a status bar icon shown Figure 7.
        • +of a status bar icon shown Figure 9.
      • All dimensions specified are based on a 25x25 pixel artboard size with a 2 pixel safeframe.
        • @@ -356,7 +748,7 @@ status bar icon structure." />
        -

        Figure 6. Safeframe and corner-rounding for status bar +

        Figure 9. Safeframe and corner-rounding for status bar icons. Icon size is 25x25.

        @@ -377,7 +769,7 @@ light, effects, and shadows for launcher icons."/>
        -

        Figure 7. Light, effects, and shadows for launcher icons.

        +

        Figure 10. Light, effects, and shadows for status bar icons.

        @@ -432,8 +824,8 @@ light, effects, and shadows for launcher icons."/>
      • In a tool like Adobe Photoshop, create the base shape within a 25x25 px image on a transparent background. Mind the safeframe, and keep the upper and lower 2 pixels free.
        • -
      • Add rounded corners as specified in Figure 6.
        • -
      • Add light, effects, and shadows as specified in Figure 7.
        • +
      • Add rounded corners as specified in Figure 9.
        • +
      • Add light, effects, and shadows as specified in Figure 10.
      • Export the icon at 25x25 as a PNG file with transparency enabled.
        • @@ -442,6 +834,16 @@ lower 2 pixels free.
        1.Front part:Use fill gradient from primary color palette
        +

        "Do's and don'ts"

        + +

        Below are some "do and don't" examples to consider when creating status bar creating icons for +your application.

        + + + + + +

        Tab icon

        Tab icons are graphical elements used to represent individual tabs in a @@ -477,7 +879,7 @@ unselected tab icon structure." />

        -

        Figure 8. Safeframe and fill gradient for unselected tab +

        Figure 11. Safeframe and fill gradient for unselected tab icons. Icon size is 32x32.

        @@ -489,7 +891,7 @@ selected tab icon structure." />
        -

        Figure 9. Safeframe and fill gradient for tab icons in +

        Figure 12. Safeframe and fill gradient for tab icons in selected state. Icon size is 32x32.

        @@ -511,7 +913,7 @@ of light, effects, and shadows for unselected tab icons."/>
        -

        Figure 10. Light, effects, and shadows for unselected +

        Figure 13. Light, effects, and shadows for unselected tab icons.

        @@ -536,7 +938,7 @@ tab icons.

      • Create the basic shapes using a tool like Adobe Illustrator.
      • Import the shape to a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background.
        • -
      • Add the effects seen in Figure 10 for the unselected state filter.
        • +
      • Add the effects seen in Figure 13 for the unselected state filter.
      • Export the icon at 32x32 as a PNG file with transparency enabled.
        • @@ -557,7 +959,7 @@ light, effects, and shadows for selected tab icons."/>
        -

        Figure 11. Light, effects, and shadows for selected tab +

        Figure 14. Light, effects, and shadows for selected tab icons.

        @@ -595,7 +997,7 @@ icons.

      • Create the basic shape using a tool like Adobe Illustrator.
      • Import the shape into a tool like Adobe Photoshop and scale to fit a 32x32 px artboard with a transparent background.
        • -
      • Add the effects seen in Figure 11 for the selected state filter.
        • +
      • Add the effects seen in Figure 14 for the selected state filter.
      • Export the icon at 32x32 as a PNG file with transparency enabled.
        • @@ -635,7 +1037,7 @@ icon structure." /> @@ -656,7 +1058,7 @@ effects, and shadows for dialog icons."/>
        -

        Figure 12. Safeframe and fill gradient for dialog icons. +

        Figure 15. Safeframe and fill gradient for dialog icons. Icon size is 32x32.
        -

        Figure 13. Light, effects, and shadows for dialog +

        Figure 16. Light, effects, and shadows for dialog icons.

        @@ -680,7 +1082,7 @@ icons.

      • Create the basic shapes using a tool like Adobe Illustrator.
      • Import the shape into a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background.
        • -
      • Add the effects seen in Figure 13 for the proper filter.
        • +
      • Add the effects seen in Figure 16 for the proper filter.
      • Export the icon at 32x32 as a PNG file with transparency enabled.
        • @@ -693,8 +1095,9 @@ of 32x32 px on a transparent background.

        List view icons look a lot like dialog icons, but they use an inner shadow effect where the light source is above the object. They are also designed to be -used only in a list view. Examples include the Android Market application home -screen and the driving directions screen in the Maps application.

        +used only in a {@link android.widget.ListView}. Examples include the Android +Market application home screen and the driving directions screen in the Maps +application.

        Structure

        @@ -720,7 +1123,7 @@ view icon structure." /> @@ -741,7 +1144,7 @@ of light, effects, and shadows for list view icons."/> - - - +

        Note that you are not required to use a shared prefix of any type — +doing so is for your convenience only.

        + + +

        Set up a working space that organizes files for multiple densities

        + +

        Developing multiple sets of assets for different screen densities means +creating multiple copies of files. To help keep the multiple copies of files +safe and easier to find, we recommend creating a directory structure in your +working space that organizes asset files per resolution. For example:

        + +
        assets/...
+    ldpi/...
+        _pre_production/...
+            working_file.psd
+        finished_asset.png
+    mdpi/...
+        _pre_production/...
+            working_file.psd
+        finished_asset.png
+    hdpi/...
+        _pre_production/...
+            working_file.psd
+        finished_asset.png
        + +

        This structure parallels the density-specific structure in which you will +ultimately store the finished assets in your application's resources. Because +the structure in your working space is similar to that of the application, you +can quickly determine which assets should be copied to each application +resources directory. Separating assets by density also helps you detect any +variances in filenames across densities, which is important because +corresponding assets for different densities must share the same filename.

        + +

        For comparison, here's the resources directory structure of a typical +application:

        + +
        res/...
+    drawable-ldpi/...
+        finished_asset.png
+    drawable-mdpi/...
+        finished_asset.png
+    drawable-hdpi/...
+        finished_asset.png
        + + +

        Create medium-density assets first

        + +

        Since medium density is the baseline for Android, begin your designing work +by creating the mdpi assets. See Table +1, above, for the actual pixel dimensions of various icon types. When +possible, use vector art or paths within Photoshop layers so that it will be +easier to scale the assets up or down later.

        + +

        For each discreet asset, or set of like assets that share the same bounding +box dimensions, create a working Photoshop file and save it in the +_pre_production directory. For example: +ic_tabs_phone_mdpi.psd. This will make it easier to locate and edit +individual assets if changes are required. It's also helpful to use a +density-specific suffix in the filename for the working file, to avoid confusion +when editing the files. For example: _mdpi.psd.

        + +

        From the mdpi working files, save individual flattened assets to +the corresponding density-specific resource directory (in this case, +mdpi/) in your working space.

        + + +

        Create high- and low-density assets from the medium-density sources

        + +

        When you are finished working with your medium-density assets, copy the +working files from the your workspace's mdpi/_pre_production +directory to the corresponding locations in the ldpi and +hdpi directories. If any of the working files use a +density-specific suffix, rename the suffix to match the intended density.

        + +

        Next, open each working file in the high- and low-density directories and +scale the image up or down to match the intended density. To create an +hdpi asset, scale the image by 150%. To create an ldpi +asset, scale the image down by 75%. To scale the images, follow these steps:

        +
          +
        1. Open the working file in Photoshop or similar program.
          2. +
        2. Under the Image menu, choose Image Size.
          3. +
        3. On the Image Size panel, change the Width pop up menu to "percent."
          4. +
        4. Change the Width value to "150" for hdpi assets and "75" for ldpi assets.
          5. +
        5. Select the Scale Styles checkbox.
          6. +
        6. Select the Constrain Proportions checkbox.
          7. +
        7. Select the Resample Image checkbox and set the pop up menu to "Bicubic (Best for smooth gradients)."
          8. +
        8. Click OK.
          9. +
        - - +

        After you scale each image, save it to the target density-specific resource +directory.

        - +

        If you are scaling a nine-patch image, see the section below for notes on how +to handle the tick marks at the edge of the image.

        - +

        After scaling, redraw bitmap layers as needed

        +

        If you scaled an image up from a bitmap layer, rather than from a vector +layer, those layers may need to be redrawn manually to accommodate the higher +density. For example if a 60x60 circle was painted as a bitmap for +mdpi it will need to be repainted as a 90x90 circle for +hdpi.

        - +

        When scaling a 9-patch image, crop tick marks before scaling and replace +them after

        - +

        Nine-patch images include tick marks at the outer edge of the image. When you +scale a nine-patch image, the tick marks are also scaled, which produces an +inaccurate result. The recommended way to handle the scaling of nine-patch +images is to remove the tick marks from the source image before scaling and then +manually replace the tick marks at the proper size after scaling.

        - - +

        To more easily determine the tick marks after the working file has been +scaled to a new resolution, first create a temporary duplicate flattened image +which includes the tick marks:

        - +
          +
        1. Under the Select menu choose All.
          2. +
        2. Under the Edit menu choose +Copy Merged.
          3. +
        3. Under the File menu choose New and then +click OK on the new panel.
          4. +
        4. Under the Edit choose Paste.
          5. +
        +

        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:

        +
          +
        1. Under the Image menu, choose the +Canvas Size command.
          2. +
        2. On the Canvas Size panel, subtract 2 pixels from the Width and +Height values.
          3. +
        3. Set the Anchor to "Center."
          4. +
        4. Click OK
          5. +
        - +

        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:

        +
          +
        1. Under the Image menu, choose the +Canvas Size command.
          2. +
        2. On the Canvas Size panel, add 2 pixels to the Width +and Height values.
          3. +
        3. Set the Anchor to "Center."
          4. +
        4. Click OK.
          5. +
        - +

        To determine tick marks, go back to duplicate flattened image and scale it to +the target resolution.

        +

        Copy the scaled duplicate flattened image into a new layer in the working +file to use as reference. Create a new layer in which to paint new tick marks at +the single pixel outer edge of the image. Note tickmarks must be 100% opaque +black, without transparency, and all other areas of the tick mark region must be +100% transparent, otherwise the system will not interpret the 9-patch image +correctly.

        - +

        Using the scaled duplicate flattened image as reference paint new tick marks +in the new layer that align with the reference layer. Note round up pixels for +tick marks. Any pixels that are partially opaque in the reference layer should +be fully opaqe in the new layer.

        - +

        Adjust stroke and drop shadow after scaling an image

        +

        While it is desirable to scale layer styles for the most part (such as for +Gradient Overlay or Inner Glow), you may need to manually reset the Stroke and +Drop Shadow in the scaled image to 1 px before saving, especially when scaling +to hdpi. -

        +

        Save nine-patch images with the appropriate filename suffix

        +

        If an asset is a 9-patch asset (with tick marks), be sure to save the asset +in PNG format with a filename that includes the .9.png suffix. If +the filename does not use the suffix, the system won't recognize the image as a +nine-patch asset and won't resize it as intended.

        - - - +

        When saving image assets, remove the Photoshop header

        - +

        To help keep each image asset as small as possible, make sure to remove the +Photoshop headers from the file. To remove the Photoshop header, follow these +steps:

        +
          +
        1. Under the File menu, choose the Save for Web & +Devices command
          2. +
        2. On the "Save for Web & Devices" panel, set the Preset pop-up to +"PNG-24," set the pop-up under Presets to "PNG-24" as well, and select the +Transparency box (if the image uses transparency)
          3. +
        3. Select Save.
          4. +
        - +

        Make sure that corresponding assets for different densities use the same +filenames

        +

        Corresponding icon asset files for each density must use the same filename, +but be stored in density-specific resource directories. This allows the system +to look up and load the proper resource according to the resource requested by +the application and the screen characteristics of the device. For this reason, +make sure that the set of assets in each density-specific is consistent and do +not use density-specific suffixes in the filenames. For more information about +how to manage density-specific resources, see Supporting Multiple +Screens.

        - +

        Using the Android Icon Templates Pack

        +

        The Android Icon Templates Pack is a collection of template designs, filters, +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.. -

        - + - - -
        -

        Figure 14. Safeframe and fill gradient for list view +

        Figure 17. Safeframe and fill gradient for list view icons. Icon size is 32x32.
        -

        Figure 15. Light, effects, and shadows for list view +

        Figure 18. Light, effects, and shadows for list view icons.

        @@ -762,7 +1165,7 @@ icons.

          -
        1. Add the effects seen in Figure 15 for the proper filter.
          2. +
        2. Add the effects seen in Figure 18 for the proper filter.
        3. Export the icon at 32x32 as a PNG file with transparency enabled.
        4. Create the basic shapes using a tool like Adobe Illustrator.
        5. Import the shape into a tool like Adobe Photoshop and scale to fit an image @@ -773,218 +1176,308 @@ of 32x32 px on a transparent background.
        +

        Tips for Designers

        -

        General guidelines

        +

        Here are some tips that you might find useful as you develop icons or other +drawable assets for your application. The tips assume that you are using +Photoshop or similar raster image-editing program.

        -

        Below are some "do and don't" guidelines to consider when creating icons for -your application. By following the guidelines, you can ensure that your icons -will work well with other parts of the Android platform UI and will meet the -expectations of your application's users.

        +

        Use common naming conventions for icon assets

        - - - - +
        +

        Try to name files so that related assets will group together inside a +directory when they are sorted alphabetically. In particular, it helps to use a +common prefix for each icon type. For example:

        -

        Do...

        - -
          -
        • Use a normal perspective. The depth of an object should be realistic.
          • -
        • Keep it simple! By overdoing an icon, it loses it purpose and -readability.
          • -
        • Use colors only when necessary. Mind that the base of a launcher icon should -be grey and feel solid.
          • -
        • Use the correct angles for the specific icon types.
          • -
        -        		 - -

        Don’t...

        - -
          -
        • Use open elements like text alone as icons. Instead place those elements on -a base shape.
          • -
        • Use colors for your status bar notifications. Those are reserved for -specific phone-only functions.
          • -
        -
        + + + + - -
        Asset TypePrefixExample
        -Side-by-side examples -of good/bad icon design. -
        - -

        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.. - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Iconsic_ic_star.png
        Launcher iconsic_launcheric_launcher_calendar.png
        Menu iconsic_menuic_menu_archive.png
        Status bar iconsic_stat_sys or ic_stat_notifyic_stat_notify_msg.png
        Tab iconsic_tabic_tab_recent.png
        Dialog iconsic_dialogic_dialog_info.png
        -

        		 - Android asset -
        Alarm Clock
        		 - Android asset -
        Browser
        		 - Android asset -
        Calculator
        		 - Android asset -
        Calendar
        		 - Android asset -
        Camcorder
        		 - Android asset -
        Camera
        		 - Android asset -
        Contacts
        - Android asset -
        Dialer
        		 - Android asset -
        Email
        		 - Android asset -
        Gallery
        		 - Android asset -
        Generic application
        		 - Android asset -
        Gmail
        		 - Android asset -
        Google Talk
        		 - Android asset -
        IM
        - Android asset -
        Maps
        		 - Android asset -
        Market
        		- Android asset -
        Messaging
        		- Android asset -
        Music
        		 - Android asset -
        Settings
        		 - Android asset -
        Voice Dialer
        		 - Android asset -
        Voice Search
        - Android asset -
        YouTube
        -

        Shown below are standard menu icons that are included in the Android platform -(as of Android 1.5). You can reference any of these icon resources from your -application as needed, but make sure that the action you assign to the icon is -consistent with that listed. Note that this is not a complete list of icons and -that the actual appearance of standard icons may change across platform -versions.

        - -

        To reference one of the icons from your code, use -android.R.drawable.<icon_resource_identifier>. For example, -you can call a menu item's {@link android.view.MenuItem#setIcon(android.graphics.drawable.Drawable) setIcon()} -method and pass the resource name:

        - -

        .setIcon(android.R.drawable.ic_menu_more);. - -

        You could reference the same icon from a layout file using -android:icon="@android:drawable/ic_menu_more">.

        +

        Shown below are standard menu icons that are used in the Android +system. Because these resources can change between platform versions, you +should not reference the system's copy of the resources. If you want +use any icons or other internal drawable resources, you should store a +local copy of those icons or drawables in your application resources, +then reference the local copy from your application code. In that way, you can +maintain control over the appearance of your icons, even if the system's +copy changes. Note that the list below is not intended to be complete.

        -

        To determine the resource ID for an icon listed below, hover over the icon or -simply look at image filenames, which use the format -"<icon_resource_identifier>.png".

        @@ -1115,24 +1608,14 @@ simply look at image filenames, which use the format

        Standard status bar icons

        -

        Shown below are standard status bar icons included in the Android platform -(as of Android 1.5). You can reference any of these icon resources from your -application as needed, but make sure that the meaning of the icon is consistent -with the standard meaning listed. Note that this is not a complete list of icons -and that the actual appearance of standard icons may change across platform -versions.

        - -

        To reference one of the icons from your code, use -android.R.drawable.<icon_resource_identifier>. For example, -you can construct a simple notification that references one of the icons like -this:

        - -

        new Notification(R.drawable.stat_notify_calendar, -"sample text", System.currentTimeMillis());

        - -

        To determine the resource ID for an icon listed below, hover over the icon -or simply look at the image filename, which use the format -"<icon_resource_identifier>.png".

        +

        Shown below are standard status bar icons that are used in the Android +platform. Because these resources can change between platform versions, you +should not reference the system's copy of the resources. If you want +use any icons or other internal drawable resources, you should store a +local copy of those icons or drawables in your application resources, +then reference the local copy from your application code. In that way, you can +maintain control over the appearance of your icons, even if the system's +copy changes. Note that the list below is not intended to be complete.

        @@ -1187,4 +1670,3 @@ or simply look at the image filename, which use the format
        - diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_1.jd b/docs/html/guide/practices/ui_guidelines/icon_design_1.jd new file mode 100644 index 0000000..039f301 --- /dev/null +++ b/docs/html/guide/practices/ui_guidelines/icon_design_1.jd @@ -0,0 +1,1200 @@ +page.title=Icon Design Guidelines, Android 1.0 +@jd:body + +
        +
        + +

        Icon design 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

        + +
          +
        1. Launcher icon
          2. +
        2. Menu icon
          3. +
        3. Status bar icon
          4. +
        4. Tab icon
          5. +
        5. Dialog icon
          6. +
        6. List view icon
          7. + +
        7. General guidelines
          8. +
        8. Using the Icon Templates Pack
          9. +
        9. Icon appendix +
            +
          1. Launcher icons
            2. +
          2. Menu icons
            3. +
          3. Status bar icons
            4. +
          +
          10. + +
        + +

        See also

        + +
          +
        1. Supporting Multiple Screens
          2. +
        2. Android Icon +Templates Pack, v1.0 »
          3. +
        + + +

        Newer versions

        + +
          +
        1. Icon Design Guidelines, Android 2.0
          2. +
        2. Android Icon +Templates Pack, v2.0 »
          3. +
        + +
        +
        + +

        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.
          • +
        + + + + + + +
        + A view of +launcher icon corners and perspective angles + +
        +

        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.

        + + + + + + +
        + A view of +light, effects, and shadows for launcher icons. + +
        +

        Figure 3. Light, effects, and shadows for launcher icons.

        +
        + + + + + + +
        1.Edge highlight:white
        2.Icon shadow:black | 20px blur
        50% opacity | angle 67°
        3.Front part:Use light gradient from color palette
        4.Detail shadow:black | 10px blur
        75% opacity
        5. Side part:Use medium gradient from color palette
        +
        +
        +
        + + + + + + + +
        + +

        Launcher icon color palette

        + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Color palette, whiteWhite
        r 0 | g 0 | b 0
        Used for highlights on edges.
        Color palette, light gradientLight gradient
        1:  r 0 | g 0 | b 0
        2:  r 217 | g 217 | b 217
        Used on the front (lit) part of the icon.
        Color palette, medium gradienMedium gradient
        1:  r 190 | g 190 | b 190
        2:  r 115 | g 115 | b 115
        Used on the side (shaded) part of the icon.
        Color palette, dark gradientDark 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.
        Color palette, blackBlack
        r 255 | g 255 | b 255
        Used as base color in shadows.
        + +        		 + +

        Step by step

        + +
          +
        1. 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.
          2. +
        2. Add depth to shapes by extruding them and create the rounded corners as +described for the launcher icon structure.
          3. +
        3. 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.
          4. +
        4. Create the shadows with the correct angle and blur effect.
          5. +
        5. Import the icon into a tool like Adobe Photoshop and scale to fit an image +size of 48x48 px on a transparent background.
          6. +
        6. Export the icon at 48x48 as a PNG file with transparency enabled.
          7. +
        + +
        + + + +

        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.
          • +
        + + + + + + +
        + A view of menu +icon structure. + +
        +

        Figure 4. Safeframe and corner-rounding for menu +icons. Icon size is 48x48.

        +
        +
        + + + + +

        Menu icons are flat and pictured face on. A slight deboss and some other +effects, which are shown below, are used to create depth.

        + + + + + + +
        + A view of light, effects, and shadows for launcher icons. + +
        +

        Figure 5. Light, effects, and shadows for launcher icons.

        +
        + + + + + +
        1.Front part:Use fill gradient from primary color palette
        2.Inner shadow:black | 20 % opacity
        angle 90° | distance 2px
        size 2px
        3.Outer glow:white | 55% opacity
        spread 10% | size 3px
        5.Inner bevel:depth 1% | direction down size 0px
        angle 90° | altitude 10°
        highlight white 70% opacity
        shadow black 25% opacity
        +
        +
        +
        + + + + + + + +
        + + + + + + + + + + + + + + + + + + + +
        Color palette, whiteWhite
        r 0 | g 0 | b 0
        Used for outer glow and bevel highlight.
        Color palette, medium gradientFill gradient
        1:  r 163 | g 163 | b 163
        2:  r 120 | g 120 | b 120
        Used as color fill.
        Color palette, blackBlack
        r 255 | g 255 | b 255
        Used for inner shadow and bevel shadow.
        + +        		 + + + +
          +
        1. Create the basic shapes using a tool like Adobe Illustrator.
          2. +
        2. 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.
          3. +
        3. Add the effects seen as described in Figure 5.
          4. +
        4. Export the icon at 48x48 as a PNG file with transparency enabled.
          5. +
        + +
        + + +

        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.
          • +
        + + + + + + +
        + A view of +status bar icon structure. + +
        +

        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.

        + + + + + + +
        + A view of +light, effects, and shadows for launcher icons. + +
        +

        Figure 7. Light, effects, and shadows for launcher icons.

        +
        + + + + + +
        1.Front part:Use fill gradient from primary color palette
        2.Inner bevel:depth 100% | direction down
        size 0px | angle 90° |
        altitude 30°
        highlight white 75% opacity
        shadow black 75% opacity
        3.Detail:white
        4.Disabled detail:grey gradient from palette
        + inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° |
        altitude 42° | highlight white 70% | no shadow
        +
        +
        +
        + + + + + + + +
        + + + +

        Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.

        + + + + + + + + + + + + + + + + + + + + + + +
        Color palette, whiteWhite
        r 0 | g 0 | b 0
        Used for details within the icons and bevel highlight.
        Color palette, grey gradientGrey gradient
        1:  r 169 | g 169 | b 169
        2:  r 126 | g 126 | b 126
        Used for disabled details within the icon.
        Color palette, fill gradientFill gradient
        1:  1 r 105 | g 105 | b 105
        2:  r 10 | g 10 | b 10
        Used as color fill.
        Color palette, blackBlack
        r 255 | g 255 | b 255
        Used for bevel shadow.
        + +        		 + + + +
          +
        1. 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.
          2. +
        2. Add rounded corners as specified in Figure 6.
          3. +
        3. Add light, effects, and shadows as specified in Figure 7.
          4. +
        4. Export the icon at 25x25 as a PNG file with transparency enabled.
          5. +
        + +
        + + +

        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.
          • +
        + + + + + + + + + + +
        + A view of +unselected tab icon structure. + +
        +

        Figure 8. Safeframe and fill gradient for unselected tab +icons. Icon size is 32x32.

        +
        +
        + A view of +selected tab icon structure. + +
        +

        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.

        + + + + + + +
        + A view +of light, effects, and shadows for unselected tab 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
        +
        +
        +
        + + + + + + +
        + + + +
          +
        1. Create the basic shapes using a tool like Adobe Illustrator.
          2. +
        2. Import the shape to a tool like Adobe Photoshop and scale to fit an image of +32x32 px on a transparent background.
          3. +
        3. Add the effects seen in Figure 10 for the unselected state filter.
          4. +
        4. Export the icon at 32x32 as a PNG file with transparency enabled.
          5. +
        + +
        + +

        Selected tab icon

        + +

        The selected tab icons have the same fill gradient and effects as the menu +icon, but with no outer glow.

        + + + + + + +
        + A view of +light, effects, and shadows for selected tab icons. + +
        +

        Figure 11. Light, effects, and shadows for selected tab +icons.

        +
        + + + + +
        1.Front part:Use fill gradient from color palette.
        2.Inner shadow:black | 20% opacity |
        angle 90° | distance 2px |
        size 2px
        3.Inner bevel:depth 1% | direction down | size 0px | angle 90° |
        altitude 10°
        highlight white 70% opacity
        shadow black 25% opacity
        +
        +
        +
        + + + + + + + +
        + + + + + + + + + +
        Color palette, fill gradientFill gradient
        1:  r 163 | g 163 | b 163
        2:  r 120 | g 120 | b 120
        Used as color fill on unselected tab icons.
        + +        		 + + + +
          +
        1. Create the basic shape using a tool like Adobe Illustrator.
          2. +
        2. Import the shape into a tool like Adobe Photoshop and scale to fit a 32x32 +px artboard with a transparent background.
          3. +
        3. Add the effects seen in Figure 11 for the selected state filter.
          4. +
        4. Export the icon at 32x32 as a PNG file with transparency enabled.
          5. +
        + +
        + + +

        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.
          • +
        + + + + + + +
        + A view of dialog +icon structure. + +
        +

        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.

        + + + + + + +
        + A view of light, +effects, and shadows for dialog icons. + +
        +

        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
        +
        +
        +
        + + + + + + +
        + + + +
          +
        1. Create the basic shapes using a tool like Adobe Illustrator.
          2. +
        2. Import the shape into a tool like Adobe Photoshop and scale to fit an image +of 32x32 px on a transparent background.
          3. +
        3. Add the effects seen in Figure 13 for the proper filter.
          4. +
        4. Export the icon at 32x32 as a PNG file with transparency enabled.
          5. +
        + +
        + + +

        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.
          • +
        + + + + + + +
        + A view of list +view icon structure. + +
        +

        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.

        + + + + + + +
        + A view +of light, effects, and shadows for list view icons. + +
        +

        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.
        +
        +
        +
        + + + + + +
        + + + +
          +
        1. Add the effects seen in Figure 15 for the proper filter.
          2. +
        2. Export the icon at 32x32 as a PNG file with transparency enabled.
          3. +
        3. Create the basic shapes using a tool like Adobe Illustrator.
          4. +
        4. Import the shape into a tool like Adobe Photoshop and scale to fit an image +of 32x32 px on a transparent background.
          5. +
        + +
        + + +

        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.
          • +
        +
        +Side-by-side examples +of good/bad icon design. +
        + +

        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.. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + Android asset +
        Alarm Clock
        		 + Android asset +
        Browser
        		 + Android asset +
        Calculator
        		 + Android asset +
        Calendar
        		 + Android asset +
        Camcorder
        		 + Android asset +
        Camera
        		 + Android asset +
        Contacts
        + Android asset +
        Dialer
        		 + Android asset +
        Email
        		 + Android asset +
        Gallery
        		 + Android asset +
        Generic application
        		 + Android asset +
        Gmail
        		 + Android asset +
        Google Talk
        		 + Android asset +
        IM
        + Android asset +
        Maps
        		 + Android asset +
        Market
        		+ Android asset +
        Messaging
        		+ Android asset +
        Music
        		 + Android asset +
        Settings
        		 + Android asset +
        Voice Dialer
        		 + Android asset +
        Voice Search
        + Android asset +
        YouTube
        + +

        + +

        Shown below are standard menu icons that are included in the Android platform +(as of Android 1.5). You can reference any of these icon resources from your +application as needed, but make sure that the action you assign to the icon is +consistent with that listed. Note that this is not a complete list of icons and +that the actual appearance of standard icons may change across platform +versions.

        + +

        To reference one of the icons from your code, use +android.R.drawable.<icon_resource_identifier>. For example, +you can call a menu item's {@link android.view.MenuItem#setIcon(android.graphics.drawable.Drawable) setIcon()} +method and pass the resource name:

        + +

        .setIcon(android.R.drawable.ic_menu_more);. + +

        You could reference the same icon from a layout file using +android:icon="@android:drawable/ic_menu_more">.

        + +

        To determine the resource ID for an icon listed below, hover over the icon or +simply look at image filenames, which use the format +"<icon_resource_identifier>.png".

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + Android asset +
        Add
        		 + Android asset +
        Call
        		 + Android asset +
        Camera
        		 + Android asset +
        Clear / Close / Cancel / Discard
        		+ Android asset +
        Compass
        		 + Android asset +
        Delete
        		 + Android asset +
        Directions
        + Android asset +
        Edit
        		 + Android asset +
        Gallery
        		 + Android asset +
        Help
        		 + Android asset +
        Info / details
        		 + Android asset +
        Map mode
        		 + Android asset +
        My Location
        		 + Android asset +
        More
        + Android asset +
        Preferences
        		 + Android asset +
        Rotate
        		 + Android asset +
        Save
        		 + Android asset +
        Send
        		 + Android asset +
        Search
        		 + Android asset +
        Share
        		 + Android asset +
        Upload
        + Android asset +
        View
        		 + Android asset +
        Zoom
        + + +

        Standard status bar icons

        + +

        Shown below are standard status bar icons included in the Android platform +(as of Android 1.5). You can reference any of these icon resources from your +application as needed, but make sure that the meaning of the icon is consistent +with the standard meaning listed. Note that this is not a complete list of icons +and that the actual appearance of standard icons may change across platform +versions.

        + +

        To reference one of the icons from your code, use +android.R.drawable.<icon_resource_identifier>. For example, +you can construct a simple notification that references one of the icons like +this:

        + +

        new Notification(R.drawable.stat_notify_calendar, +"sample text", System.currentTimeMillis());

        + +

        To determine the resource ID for an icon listed below, hover over the icon +or simply look at the image filename, which use the format +"<icon_resource_identifier>.png".

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + Android asset +
        Bluetooth
        		 + Android asset +
        Email
        		 + Android asset +
        IM
        		 + Android asset +
        Voicemail
        		 + Android asset +
        Warning
        		 + Android asset +
        Call
        		 + Android asset +
        Call forward
        + Android asset +
        Call on hold
        		 + Android asset +
        Missed call
        + + -- cgit v1.1