- - Launcher Icons + Launcher Icons updated
- Menu Icons +
- + Action Bar Icons new! +
- - Status Bar Icons + Status Bar Icons updated
-
Tab Icons
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design.jd b/docs/html/guide/practices/ui_guidelines/icon_design.jd
index d3b702dd39117..07b73bb592516 100644
--- a/docs/html/guide/practices/ui_guidelines/icon_design.jd
+++ b/docs/html/guide/practices/ui_guidelines/icon_design.jd
@@ -36,6 +36,8 @@ parent.link=index.html
Downloads
-
+
- Android Icon +Templates Pack, v4.0 »
- Android Icon Templates Pack, v2.3 »
- Android Icon
@@ -74,6 +76,10 @@ icons used throughout Android applications:
- Menu Icons
- Menu icons are graphical elements placed in the options menu shown to users when they press the Menu button.
+- Action Bar Icons + new!
+- Action Bar icons are graphical elements representing action items in the + Action Bar.
- Status Bar Icons
- Status bar icons are used to represent notifications from your application in the status bar.
@@ -112,8 +118,8 @@ with the layers and treatments may vary based on the program you are using.Download the Icon Templates -Pack for Android 2.3 » +href="{@docRoot}shareables/icon_templates-v4.0.zip">Download the Icon Templates +Pack for Android 4.0 »
For previous versions of the Icon Templates Pack, see the Downloads section in the box at the top-right corner of this page.
@@ -134,7 +140,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. Then, +each generalized screen density. 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 @@ -146,145 +152,6 @@ directory qualifiers for screen size and density
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.
- -- -
- @@ -317,7 +184,7 @@ common prefix for each icon type. For example:- -Icon Type Standard Asset Sizes (in Pixels), for -Generalized Screen Densities - - -- - -Low density screen (ldpi) -- -Medium density screen (mdpi) -- -High density screen (hdpi) - - - -- Launcher - -- 36 x 36 px - - -- 48 x 48 px - -- 72 x 72 px - -- - -- Menu - -- 36 x 36 px - - -- 48 x 48 px - -- 72 x 72 px - -- - -- Status Bar (Android 2.3 and later) - -- 12w x 19h px - -
- (preferred, width may vary) -- 16w x 25h px -
- (preferred, width may vary) -- 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 - -ic_launcher_calendar.png- @@ -349,7 +216,7 @@ 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: -Menu icons +Menu icons and Action Bar icons ic_menuic_menu_archive.pngassets/... +
@@ -398,25 +271,16 @@ boundaries at smaller resolutions.art/... ldpi/... _pre_production/... working_file.psd @@ -359,6 +226,10 @@ organizes asset files per resolution. For example: working_file.psd finished_asset.png hdpi/... + _pre_production/... + working_file.psd + finished_asset.png + xhdpi/... _pre_production/... working_file.psd finished_asset.png@@ -380,6 +251,8 @@ application: drawable-mdpi/... finished_asset.png drawable-hdpi/... + finished_asset.png + drawable-xhdpi/... finished_asset.png - Under the File menu, choose the Save for Web & -Devices command -
- On the "Save for Web & Devices" panel, set the Preset pop-up to -"PNG-24," set the pop-up under Presets to "PNG-24" as well, and select the -Transparency box (if the image uses transparency) -
- Select Save. -
- 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 +
- Goals of the Launcher Icon +
- Do's and Don'ts +
- Size and Format
Start with large artboards
-Because you will need to create assets for different screen densities, as -shown in Table 1, it is best to start your icon +
Because you will need to create assets for different screen densities, +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 +icons are 96, 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.
-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.
-When scaling, redraw bitmap layers as needed
@@ -431,22 +295,12 @@ densities. For example if a 60x60 circle was painted as a bitmap forWhen saving image assets, remove unnecessary metadata
-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:
- --
-
It is also useful to use PNG file size optimization tools such as Although the Android SDK tools will automatically compress PNGs when packaging +application resources into the application binary, a good practice is to remove +unnecessary headers and metadata from your PNG assets. Tools such as OptiPNG or Pngcrush. +href="http://pmt.sourceforge.net/pngcrush/">Pngcrush can ensure that this +metadata is removed and that your image asset file sizes are optimized.
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_action_bar.jd b/docs/html/guide/practices/ui_guidelines/icon_design_action_bar.jd new file mode 100644 index 0000000000000..449c27f4e50aa --- /dev/null +++ b/docs/html/guide/practices/ui_guidelines/icon_design_action_bar.jd @@ -0,0 +1,189 @@ +page.title=Action Bar Icons +parent.title=Icon Design Guidelines +parent.link=icon_design.html +@jd:body + +In this document
+ + + +See also
+ + + +Action Bar icons are graphical elements placed in the Action Bar representing individual action +items.
+ +As described in Providing Density-Specific +Icon Sets and Supporting Multiple +Screens, you should create separate icons for all generalized screen densities, including low-, +medium-, high-, and extra-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.
+ + + +Android 3.0 and Later
+ +The following guidelines describe how to design action bar icons for Android +3.0 (API Level 11) and later.
+ + +Size and format + +
Action Bar icons should be 32-bit PNGs with an alpha channel for transparency. The finished +action bar icon dimensions, corresponding to a given generalized screen density, are shown in +the table below.
+ +Table 1. Summary of +finished Action Bar icon dimensions for each generalized screen density.
+ +| + |
+ ldpi (120 dpi)+ (Low density screen) + |
+
+ mdpi (160 dpi)+ (Medium density screen) + |
+
+ hdpi (240 dpi)+ (High density screen) + |
+
+ xhdpi (320 dpi)+ (Extra-high density screen) + |
+
|---|---|---|---|---|
| + Action Bar Icon Size + | ++ 18 x 18 px + | ++ 24 x 24 px + | ++ 36 x 36 px + | ++ 48 x 48 px + | +
Style, colors, and effects
+ +Action Bar icons are flat, pictured face on, and generally greyscale, depending on the +application's theme. Action Bar icons should not look three-dimensional.
+ +In order to maintain consistency across the application's Action Bar, all Action Bar icons should +use the same color palette and effects.
+ +When using the default "Holo Light" or "Holo Dark" themes, icons should use the color palette +and effects shown in Figure 1 and Figure 2, below.
+ + + +
+ 
+ |
+
+
+
+Figure 1. Style and effects for "Holo Light" theme Action Bar icons. +
+
+
|
+
+ 
+ |
+
+
+
+Figure 2. Style and effects for "Holo Dark" theme Action Bar icons. +
+
+
Note: icons should should have a transparent background; + the dark background here is for effect only. + |
+
Example icons
+ +Shown below are example extra-high-density Action Bar icons that are used throughout Android +system applications.
+ +Warning: Because resources can change between platform versions,
+you should not reference built-in icons using the Android platform resource IDs (i.e. menu or Action
+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.
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd b/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd
index cb04b552f56b3..3f6061c499e6a 100644
--- a/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd
@@ -9,23 +9,15 @@ parent.link=icon_design.html
In this document
-
-
See also
@@ -34,487 +26,225 @@ ScreensA Launcher icon is a graphic that represents your application on the device's -Home screen and in the Launcher window.
+A launcher icon is a graphic that represents your application. Launcher icons are used by +Launcher applications and appear on the user’s Home screen. Launcher icons can also be used to +represent shortcuts into your application (for example, a contact shortcut icon that opens detail +information for a contact).
-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 and Supporting Multiple +Screens, you should create separate icons for all generalized screen densities, including low-, +medium-, high-, and extra-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.
-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.
+A high-resolution version of your application launcher icon is also required by Android Market +for use in application listings. For more details on this, see Application Icons in Android Market below.
+Note: -
Application Icons in Android Market
+The launcher icon guidelines pertaining to all versions of Android have been re-written. If you +need to review the old guidelines, see the +launcher icon guidelines archive. -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) » +
+Goals of the Launcher Icon
-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. + Figure 1. Example launcher icons for system applications (left) and + third-party applications (right).
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. -
Application launcher icons have three primary goals:
-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. -
-
|
-
- 
- |
-
-
Promote the brand story+ +App launcher icons are an opportunity to showcase the brand and hint at the story of what your +app is about. Thus, you should: + +
Help users discover the app in Android Market+ +App launcher icons are the first look that prospective users will get of your app in Android +Market. A high quality app icon can influence users to find out more as they scroll through lists of +applications. + +Quality matters here. A well-designed icon can be a strong signal that your app +is of similarly high quality. Consider working with an icon designer to develop the app’s launcher +icon. + +Note: Android Market requires a high-resolution version of your +icon; for more details on this, see Application Icons in Android +Market below. + + +Function well in the Launcher+ +The launcher is where users will interact with the icon most frequently. A successful app +launcher icon will look great in all situations: on any background and next to any other icons and +app widgets. To do this, icons should: + +
|
-
-
- 
- |
-
-
|
-
-
- 
- |
-
| - |
- Figure 2. - Launcher icon sizing and positioning inside the bounds of the - icon asset. - |
-
Do's and Don'ts
+Below are some "do and don't" examples to consider when creating icons for your application.
-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. - |
+  |
+ Icons should not be overly complicated. Remember + that launcher icons will be used at often small sizes, so they should be distinguishable at + small sizes. |
 |
+ Icons should not be cropped. Use unique shapes + where appropriate; remember that launcher icons should differentiate your application from + others. Additionally, do not use too glossy a finish unless the represented object has a + glossy material. | +||
 |
+ Icons should not be thin. They should have a + similar weight to other icons. Overly thin icons will not stand out well on all + backgrounds. | +||
 |
+ Icons should make use of the alpha channel, and + should not simply be full-frame images. Where appropriate, distinguish your icon with + subtle yet appealing visual treatment. | +
Size and Format
-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. -
|
-
Do's and don'ts
- -Below are some "do and don't" examples to consider when creating icons for -your application.
+Launcher icons should be 32-bit PNGs with an alpha channel for transparency. The finished +launcher icon dimensions corresponding to a given generalized screen density are shown in the +table below.
+Table 1. Summary of +finished launcher icon dimensions for each generalized screen density.
-
-Android Launcher icons are...- -
|
-
-
-Android Launcher icons are not...- -
|
-|||
| + |
+ ldpi (120 dpi)+ (Low density screen) + |
+
+ mdpi (160 dpi)+ (Medium density screen) + |
+
+ hdpi (240 dpi)+ (High density screen) + |
+
+ xhdpi (320 dpi)+ (Extra-high density screen) + |
+
|---|---|---|---|---|
| + Launcher Icon Size + | ++ 36 x 36 px + | ++ 48 x 48 px + | ++ 72 x 72 px + | ++ 96 x 96 px + | +
--Figure 7. Side-by-side examples of "do's and don'ts" for -Android launcher icons.
+You can also include a few pixels of padding in launcher icons to maintain a
+consistent visual weight with adjacent icons. For example, a 96 x 96 pixel xhdpi
+launcher icon can contain a 88 x 88 pixel shape with 4 pixels on each side for padding.
+This padding can also be used to make room for a subtle drop shadow, which can help ensure
+that launcher icons are legible across on any background color.
Application Icons in Android Market
+If you are publishing your application on +Android Market, you will also need to provide a 512 x 512 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.
-Example icons
+For information and specifications about high-resolution application icons in Android Market, see +the following article:
-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..
+
+Graphic Assets for your Application (Android Market Help) »
-
-
-
-
-
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). -
-
-
|
-
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. -
-
-
|
-
-
-Launcher icon color palette- -
|
-
-
-
-Step by step- -
|
-
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_launcher_archive.jd b/docs/html/guide/practices/ui_guidelines/icon_design_launcher_archive.jd new file mode 100644 index 0000000000000..ea036cd1703d2 --- /dev/null +++ b/docs/html/guide/practices/ui_guidelines/icon_design_launcher_archive.jd @@ -0,0 +1,524 @@ +page.title=Launcher Icons (Archive) +parent.title=Icon Design Guidelines +parent.link=icon_design.html +@jd:body + +
In this document
+ +-
+
- Android 2.0
+
-
+
- Style +
- Size +
- Materials and colors +
- Effects +
- Do's and don'ts +
- Example icons +
+ - Android 1.6 and Earlier +
See also
+ + + ++ Warning: This document describes obsolete guidelines for + creating launcher icons. Follow the latest + launcher icon guidelines instead. +
+ +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. +
+
|
+
+
+ |
+
+
|
+
+
+
+ |
+
+
|
+
+
+
+ |
+
| + |
+ 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. +
|
+
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...+ +
|
+
+
+Android Launcher icons are not...+ +
|
+
++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). +
+
+
|
+
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. +
+
+
|
+
+
+Launcher icon color palette+ +
|
+
+
+
+Step by step+ +
|
+
In this document
-
-
- Android 2.3 and Later +
- Android 3.0 and Later +
- Android 2.3
- Size
- Style, colors, and effects @@ -37,11 +38,13 @@ 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. -
- Android 2.3 and Later +
- Android 3.0 and Later + + +
- Android 2.3 @@ -35,54 +44,217 @@ Screens
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 +
As described in Providing Density-Specific +Icon Sets and Supporting Multiple +Screens, you should create separate icons for all generalized screen densities, including low-, +medium-, high-, and extra-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 @@ -52,6 +55,16 @@ href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Ic Templates Pack.
+Android 3.0 and Later
+ +As of Android 3.0, the options menu has been superseded by the Action Bar. Please refer to the Action Bar Icon Design Guidelines for recommendations on +creating icons for action items.
+ + +Android 2.3
+Caution: The style and content sizing of menu icons have changed in Android 2.3 compared to previous versions: @@ -67,12 +80,8 @@ asset. Final asset sizes have not changed.
- - -Android 2.3 and Later
-The following guidelines describe how to design menu icons for Android -2.3 (API Level 9) and later.
+2.3 (API Levels 9 and 10).Size and positioning
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 index 1fc352859c086..b8e07b5352db2 100644 --- a/docs/html/guide/practices/ui_guidelines/icon_design_status_bar.jd +++ b/docs/html/guide/practices/ui_guidelines/icon_design_status_bar.jd @@ -9,11 +9,20 @@ parent.link=icon_design.htmlIn this document
-
-
- Place status bar icons for Android 3.0 and later in the
+
drawable-xhdpi-v11,drawable-hdpi-v11,drawable-mdpi-v11, + anddrawable-ldpi-v11directories.
+ - Place status bar icons for Android 2.3 in the
+
drawable-xhdpi-v9,drawable-hdpi-v9,drawable-mdpi-v9, + anddrawable-ldpi-v9directories.
+ - Place status bar icons for previous versions in
+
drawable-xhdpi,drawable-hdpi,drawable-mdpi, + anddrawable-ldpidirectories.
+ - Status bar icons are composed simply of white pixels on a transparent + backdrop, with alpha blending used for smooth edges and internal texture where + appropriate. +
- Icons are square icon contents should fill the available space, although a + small amount of internal padding can help maintain balance across status bar icons. See + Size and format below for details. +
- The system automatically resizes and dims these icons in such situations and + developers do not need to supply a separate icon for this purpose. See + Automatic dimming below for more on this behavior. +
- The red box is the bounding box for the full asset. @@ -144,7 +316,7 @@ varying icon shapes while maintaining a consistent visual weight.
- Rounded corners must always be applied to the base shape and to the details -of a status bar icon shown Figure 3. +of a status bar icon shown Figure 5.
- All dimensions specified are based on a 25x25 pixel artboard size with a 2 pixel safeframe. @@ -245,7 +417,7 @@ status bar icon structure." />
- 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. +
- Add rounded corners as specified in Figure 5. +
- Add light, effects, and shadows as specified in Figure 6.
- Export the icon at 25x25 as a PNG file with transparency enabled. diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd b/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd index 1f96c3e3622c1..271bd858a94dd 100644 --- a/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd +++ b/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd @@ -10,7 +10,7 @@ parent.link=icon_design.html
- Providing Icons for Two Tab States -
- Android 2.0 and Later +
- Android 2.0 through Android 2.3
- Size
- Style, colors, and effects @@ -125,10 +125,10 @@ for
- Icon Design Guidelines and Android Icon Templates Pack -» +href="{@docRoot}shareables/icon_templates-v4.0.zip">Android Icon Templates Pack +» updated
- 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 describe each kind of icon in detail, with specifications for the size, color, @@ -22,7 +22,7 @@ The Icon Templates Pack is an archive of Photoshop and Illustrator templates and filters that make it much simpler to create conforming icons.
- Widget Design Guidelines +
- Widget Design Guidelines updated
- A widget displays an application's most important or timely information at a glance, on a user's Home screen. These design guidelines describe how to design widgets that fit with others on the Home screen. They include links to diff --git a/docs/html/images/icon_design/action_bar_examples.png b/docs/html/images/icon_design/action_bar_examples.png new file mode 100644 index 0000000000000..b6b2b0a39ddd4 Binary files /dev/null and b/docs/html/images/icon_design/action_bar_examples.png differ diff --git a/docs/html/images/icon_design/action_bar_holo_dark_style.png b/docs/html/images/icon_design/action_bar_holo_dark_style.png new file mode 100644 index 0000000000000..2837859a49963 Binary files /dev/null and b/docs/html/images/icon_design/action_bar_holo_dark_style.png differ diff --git a/docs/html/images/icon_design/action_bar_holo_light_style.png b/docs/html/images/icon_design/action_bar_holo_light_style.png new file mode 100644 index 0000000000000..84e3655bb4456 Binary files /dev/null and b/docs/html/images/icon_design/action_bar_holo_light_style.png differ diff --git a/docs/html/images/icon_design/launcher_dodont_clock.png b/docs/html/images/icon_design/launcher_dodont_clock.png new file mode 100644 index 0000000000000..16fe651dae87f Binary files /dev/null and b/docs/html/images/icon_design/launcher_dodont_clock.png differ diff --git a/docs/html/images/icon_design/launcher_dodont_custom.png b/docs/html/images/icon_design/launcher_dodont_custom.png new file mode 100644 index 0000000000000..fee3bffba458a Binary files /dev/null and b/docs/html/images/icon_design/launcher_dodont_custom.png differ diff --git a/docs/html/images/icon_design/launcher_dodont_custom_2.png b/docs/html/images/icon_design/launcher_dodont_custom_2.png new file mode 100644 index 0000000000000..d9fa1c9b37637 Binary files /dev/null and b/docs/html/images/icon_design/launcher_dodont_custom_2.png differ diff --git a/docs/html/images/icon_design/launcher_dodont_settings.png b/docs/html/images/icon_design/launcher_dodont_settings.png new file mode 100644 index 0000000000000..2e689af8c0d0e Binary files /dev/null and b/docs/html/images/icon_design/launcher_dodont_settings.png differ diff --git a/docs/html/images/icon_design/launcher_examples.png b/docs/html/images/icon_design/launcher_examples.png new file mode 100644 index 0000000000000..896a285aad8a8 Binary files /dev/null and b/docs/html/images/icon_design/launcher_examples.png differ diff --git a/docs/html/images/icon_design/status_bar_honeycomb_dimming.png b/docs/html/images/icon_design/status_bar_honeycomb_dimming.png new file mode 100644 index 0000000000000..b319f45a70643 Binary files /dev/null and b/docs/html/images/icon_design/status_bar_honeycomb_dimming.png differ diff --git a/docs/html/images/icon_design/status_bar_honeycomb_examples.png b/docs/html/images/icon_design/status_bar_honeycomb_examples.png new file mode 100644 index 0000000000000..63354266d4754 Binary files /dev/null and b/docs/html/images/icon_design/status_bar_honeycomb_examples.png differ diff --git a/docs/html/images/icon_design/status_bar_honeycomb_style.png b/docs/html/images/icon_design/status_bar_honeycomb_style.png new file mode 100644 index 0000000000000..5844d8b2f10db Binary files /dev/null and b/docs/html/images/icon_design/status_bar_honeycomb_style.png differ diff --git a/docs/html/shareables/icon_templates-v4.0.zip b/docs/html/shareables/icon_templates-v4.0.zip new file mode 100644 index 0000000000000..49e629fabde07 Binary files /dev/null and b/docs/html/shareables/icon_templates-v4.0.zip differ
ic_tab_friends.xml: -Android 2.0 and Later
+Android 2.0 through Android 2.3
The following guidelines describe how to design tab icons for Android -2.0 (API Level 5) and later.
+2.0 through Android 2.3 (API Levels 5 through 10).Size and positioning
diff --git a/docs/html/guide/practices/ui_guidelines/index.jd b/docs/html/guide/practices/ui_guidelines/index.jd index cb34d2ea32b06..0e42788543119 100644 --- a/docs/html/guide/practices/ui_guidelines/index.jd +++ b/docs/html/guide/practices/ui_guidelines/index.jd @@ -12,8 +12,8 @@ these guidelines as we release them.-
-
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.
+As described in Providing Density-Specific +Icon Sets and Supporting Multiple +Screens, you should create separate icons for all generalized screen densities, including low-, +medium-, high-, and extra-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.
Templates for creating icons in Adobe Photoshop are available in the Icon Templates Pack.
-Warning: +
-1. Place status bar icons for Android 2.3 and higher in the -
drawable-hdpi-v9, drawable-mdpi-v9, and drawable-ldpi-v9 directories.
--2. Place status bar icons for previous versions in -
drawable-hdpi, drawable-mdpi, and drawable-ldpi directories.
+Warning:The style and dimensions of status bar icons have changed dramatically +in Android 3.0 and 2.3 compared to previous versions. To +provide support for all Android versions, developers should:
+-
+
Android 3.0 and Later
+ +The following guidelines describe how to design status bar icons for Android +3.0 (API Level 11) and later.
+ + +Overview of changes
+ +The design for status bar (notification) icons has been revised in Android 3.0. Status bar icons + used in Android 3.0 and later are easier to create, and they allow for more flexible presentation + in a variety of situations:
+ +-
+
These larger and brighter icons, while highly legible, are too intense for use on dark phone +status bars. These icons would be too distracting if used directly in the status bar. Therefore: +
+ +-
+
Size and format + +
Status bar icons should be 32-bit PNGs with an alpha channel for transparency. The finished +status bar icon dimensions corresponding to a given generalized screen density are shown in the +table below.
+ +Note: The system will shrink and dim status bar icons to minimize +distractions, allowing users to focus on the foreground activity.
+ + +Table 1. Summary of +finished icon dimensions for each generalized screen density.
+ +| + |
+ ldpi (120 dpi)+ (Low density screen) + |
+
+ mdpi (160 dpi)+ (Medium density screen) + |
+
+ hdpi (240 dpi)+ (High density screen) + |
+
+ xhdpi (320 dpi)+ (Extra-high density screen) + |
+
|---|---|---|---|---|
|
+ Status Bar Icon Size (Android 3.0 and Later) + |
+ + 18 x 18 px + | ++ 24 x 24 px + | ++ 36 x 36 px + | ++ 48 x 48 px + | +
You can also include a few pixels of padding in status bar icons to maintain a
+consistent visual weight with adjacent icons. For example, a 48 x 48 pixel xhdpi
+status bar icon can contain a 44 x 44 pixel shape with 2 pixels on each side for padding.
Style, colors, and effects
+ +Status bar icons are flat, pictured face on, and must be white on a transparent background.
+ +In order to maintain consistency across all status bar notifications, status bar icons should +use the styling shown in Figure 1.
+ + + +
+ 
+ |
+
+
+
+Figure 1. Style for status bar icons. +
+
+
|
+
Automatic dimming
+ +The system may dim and shrink status bar icons to allow users to focus on the foreground +activity. For example, in Android 4.0, the platform-standard status bar for handset-size devices +reduces icons to 18 x 18 dip and 40% opacity in the status bar, while drawing them full-size and at +full intensity in the expanded notification panel. An example of what this looks like is shown below +in Figure 2.
+ + +
++ Figure 2. Automatic shrinking and dimming behavior in Android 3.0 and later.
+Example icons
-Android 2.3 and Later
+Shown below are example extra-high-density status bar icons that are used throughout Android +system applications.
+ +Warning: Because resources can change between platform versions,
+you should not reference built-in 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.3
The following guidelines describe how to design status bar icons for Android -2.3 (API Level 9) and later.
+2.3 (API Levels 9 and 10).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 +
Figure 3 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:
+Figure 3 includes two different guide rectangles:Figure 1. +
Figure 3. Status bar icon sizing and positioning inside the bounds of the icon asset.
Figure 2. Style and effects for status icons.
+Figure 4. Style and effects for status icons.
Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.
|
-
Figure 3. Safeframe and corner-rounding for status bar + Figure 5. Safeframe and corner-rounding for status bar icons. Icon size is 25x25. |
@@ -265,7 +437,7 @@ face-on to enhance clarity at small sizes.
- Figure 4. Light, effects, and shadows for status bar icons. +Figure 6. Light, effects, and shadows for status bar icons.
|