From ced7edda54f9122f0f2008e8fa5cf7fd36d3e1d8 Mon Sep 17 00:00:00 2001
From: Roman Nurik
Downloads
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.
- -| Icon Type | Standard Asset Sizes (in Pixels), for -Generalized Screen Densities | ||
|---|---|---|---|
| - |
- |
-
- |
-
- |
-
| - 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.pngic_menuic_menu_archive.pngassets/...
+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
@@ -398,25 +271,16 @@ boundaries at smaller resolutions.
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.
-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 + +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.
+ + + +The following guidelines describe how to design action bar icons for Android +3.0 (API Level 11) and later.
+ + +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 + | +
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. + |
+
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.
A 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: -
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) » +
+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.
- -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:
-Application launcher icons have three primary goals:
-Simple and iconic:
-Tactile and textured:
-Forward-facing and 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.
- - - -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:
- -
-
|
-
- |
-
-
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. - |
-
Below are some "do and don't" examples to consider when creating icons for your application.
-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.