This document provides some information to help you create icons in different parts of the application interface to match the universal style under the android2.x frame. Adhering to these guidelines will help you create a seamless and unified experience for your users.
To make the work of creating icons faster, you can download the android icon template package. For more information, please visit the Android icon template package for use.
The Android system is designed to run on a range of devices with different screen sizes and resolutions. When you design an icon for your application, you must know that your application may be installed and running on any device. As described in supporting multiple-screen documents, Android provides you with such icons directly, and they will be displayed correctly on any device, regardless of the screen size and resolution of those devices.
In general, the recommended approach is to create a separate set of icons for each of the three popular screen densities (table 1). Then, store them in a specific resource directory in your application. When your application is running, the Android platform will check the features of the device screen to load the corresponding icon in a specific density resource directory. For more information on how to store a specific density resource, see the list of ways to create a qualified screen size and density.
The screen density baseline for Android devices is medium. Therefore, a recommended way to create icons for multiple screen densities is:
first for the base density design icon (see table one for the actual pixel dimensions of the design icon). Put the icon in your application's default drawing resource, and then run the application in the Android visualization device (AVD) or HVGA device such as T G1. Test and adjust your benchmark icon as needed. When you are satisfied with the icon created under the base density, create a copy of the other density. Increase the benchmark icon proportionally to 150% to create a high-density version. Reduce the benchmark icon proportionally to 75%, creating a low-density version. Put the icon in your application's specific density resource directory. For example, the medium density version runs under the res/drawable-mdpi/directory (or runs under the default res/drawable/directory) and the high-density version runs in the res/drawable-hdpi/directory. The high-density version runs in the res/drawable-ldpi/directory. If necessary, test and adjust the high-density and low-density icons.For tips on how to create and manage a multiple-density icon set, see a small reminder for designers
Table 1. A summary of the desired finished size icon for each density of three universal screen densities
Icon Type is a universal screen density standard version size (pixel representation), low-density screen (ldpi) Medium density screen (MDPI) high-density screen (hdpi) initiator x px48 x px72 x px menu, x px48 x px48 px Status field x px32 x x px32 x px48 x 4 px Dialogue x px32 x px48 x (px) List view x px32 x px48 (x) (+)] 8 pxThe launcher icon is a graphic representing the device's home page and the application in the Launcher window.
The user opens the launcher in the icon at the bottom of the home page. The initiator opens and displays all the icons that have been installed. They are arranged in a lattice. The user chooses an application, through any available hardware navigation controls, such as Trackball click on the launcher icon.
Users can also drag an icon from the Launcher window and place it on the home page for easier access to the application. In this case, the system will show you the application's Launcher icon mapped on the home page wallpaper. The mapping dimensions for this render are the same as those rendered in the initiator.
The system controls the scaling of all initiator icons, so they are rendered as uniformly high and wide. The actual pixel dimensions of the rendered initiator icon are different depending on the pixel size of the device screen and the screen density. To ensure the best rendering of your icons, please provide icons for low density, medium density and high-density screen making. For more information, refer to the above to provide a specific density icon set or below for the designer's recommendations.
styleYou create an initiator icon that should conform to the general style of the following principles. This guideline does not limit the icons you can make, but rather the general approach of emphasizing that your icons can be shared on other devices. Figure 1 provides an example.
Figure 1. Launcher Icon Style illustrationClean and Modern:
The launcher icon should be modern, sometimes a bit quirky, but they shouldn't be outdated and rough. If possible, you should avoid excessive use of symbolic metaphors.Simple and iconic:
The Android launcher icon should be a natural abstraction; your icons should be highly simplified and exaggerated so that they can be displayed in small sizes. Your icon should not be too complicated. Try to use a simple part as a symbolic representation of the whole (for example, the music icon is characterized by a loudspeaker). Consider using natural contours and shapes, both geometrical and organic, to map with reality (not photo-like reality). Your icon should not present an incorrect view of the larger image.Tactile and textured:
icon should be shown as not insipid, textured material. For more information, see the following materials and colors.Facing front and top lighting:
Android 2.0 and beyond the new rules: Android launcher icon should face front, perspective is very small, and should be the top of the lighting.In addition, note that all icons should have a separate text label, instead of embedding the text design inside the icon, the effort to make the icon unique and memorable. To see more examples of launcher icons applied under the Android system, see the Standard launcher icon.
What do and don't doHere are some examples of "what you can do and don't do" in the process of designing an icon for your application
Android launcher icon is ... Modern, minimalist, uneven, tactile, and textured facing front and top bright, overall, color in a certain color spectrum Android launcher icon is not ... Obsolete, overly complex, smooth, flat-spun, trimmed, too dark figure 2. Examples of "What to do and what not to do" in the launcher texture and colorThe launcher icon should use tactile, top lighting, using textured material. Even if your icons are just a simple shape, you should try to render them as real-world materials.
The initiator icon in the default application of the platform uses the material shown in Figure 3 below. Your icons can use these materials to create new materials as well.
Android launcher icons often consist of smaller shapes consisting of a larger shape and combined into a neutral shape and a neutral color. Icons may use a combination of neutral colors, but maintain a high contrast. If possible, each icon should not use more than one primary color.
The launcher icon should use a restricted palette that contains a range of neutral colors and primaries. The icon should not be overly saturated.
The recommended Launcher icon palette is applied, as shown in Figure 4. You can use the basic colors and highlighting elements in the sidebar. You can use white to black vertical linear gradient overlay with color palette. This creates the impression that light shines in from the top and maintains a low saturation of color.
Figure 3. You can use it to create examples of materials for your icon. Figure. Examples of materials formed from the basic and highlighted color combinations selected from the recommended paletteWhen you remove a highlight color from a simple palette, you can create the material that is shown in Figure 5. To help you start, the icon Pack (Icons Pack) includes a Photoshop template file (LAUNCHER-ICON-TEMPLATE.PSD), which provides the default material, color, and gradient.
5. Recommended icon palette-dimensions and positionThe icon for the launcher should be in different shapes and forms, and these must be scaled and positioned to create a consistent visual weight.
Figure 6 shows the different ways in which icons are placed in each version. For a more detailed description, in order to create a consistent intuitive mass and allow shadows to be added, you should make the icon smaller than the actual version. If your icon is square or near square, the size should be smaller.
is displayed as red for the full version bounding box. The recommended actual icon bounding box appears blue. The icon box is smaller than the size in the full version, so that there is room for shading and special icon processing. For square icons, the recommended bounding box is shown in orange. A square icon box is smaller because you want to create the same visual weight in two types of charts. Icon size for high-density screen (HDPI): Full version: X-X-px icon: × px square icon: x px Medium Density screen (MDPI) icon size: Full version: X-px icon: x px Square icon: x px Low Density screen Screen (ldpi) icon size: Full version: x px icon: x px Square icon: x px 6. The size and position of the icon in the icon version range. Using the initiator icon templateAndroid Icon Template Package 2.0 is a template that contains the material and color palette of the default icon. The template is a PSD format that facilitates Photoshop or similar image editor editing.
To getting started, fir to start using, first download android icon template Package 2.0.
Once you have downloaded the template package, unzip it, and open launcher-icon-template.psd in Adobe Photoshop or similar picture editor, notice the palette's material and color. You can use this template to create a launcher icon as a starting point.
After you create your icon, you can add a shadow effect as you create the appropriate image size as described below.
WVGA (high-density) screen shadow: effect: Bottom shadow color: #000000混合模式: Multiple opacity: 75% angle: 90° Distance: 2px expansion: 0% size: 5pxHVGA (medium density) screen shadow: effect: Bottom shadow color: #000000混合模式: Overlay opacity: 75% angle: 90° Distance: 1px expansion: 0% size: 3pxWhen a shadow is added, the icon is finished, output a transparent file in PNG format to ensure that your icon displays in a high-density screen size of x72 pixels and in a medium density screen display size of x48 pixels. about why you should provide different launcher versions for High, medium, and low-density screens, see support for multiple screens.
Menu icon
The menu icon is a graphical element that displays a menu to the user when the user presses the menu button, as shown in the pop-up menu. They are on the plane show. Menu icon elements cannot be displayed as 3D or perspective.
As described in providing a specific density icon set, you should create a corresponding icon set for low, medium, and high-density screens. This ensures that your icons are displayed correctly in a series of devices that install your application. See table 1 for the proposed icon size for each density. Also, see suggestions for designers on how to use multiple sets of icons.
structure to maintain consistency, all menu icons must use the same original palette and the same effect. For more information, see Menu icon color palette. The menu icon should include rounded corners to ensure that the logic is correct. For example, in Figure 7, the part that is reasonably expressive of rounded corners is the roof rather than the rest of the building. All the specific dimensions on this page are based on a 48x48 pixel artboard, 6 pixel security sidebar. The Icon menu effect (outer glow) is described in lights, effects, and shadows, and it can overlap with the 6px security sidebar if necessary. The underlying shape must always remain in the safe sidebar. The final graphic must be exported as a transparent PNG file. Menu icon templates made in Adobe Photoshop are available in the icon template package.Figure 7.
The security bar and fillet in the menu icon. The icon size is 48x48.
lights, effects and shadowsThe menu icon is flat. A slight dent and some other special effects, as shown below, can create a sense of depth.
Figure 8. Menu icons for lighting, effects and shading.
1. Front: Select the color fill gradient from the primary Colors palette 2. Inner Projection: Black | 20 OpacityAngle 90°| Height 10°
Luminous White 70% Opacity
Shadow Black 25% opacity
When making menu icons for your application, here are some examples of "doing this and not doing this".
Status bar icons are used to display notifications in your application in the status bar, they are very similar to menu icons, but they are smaller and more contrast-efficient.
As described in providing a specific density icon set, you should make a separate set of icons for low, moderate, high-density screens. This ensures that your icons appear correctly in a series of devices that have installed your application. See table for each density screen recommended dimensions. Also, see the designer's recommendations for a description of how to create an icon set.
The rounded corners of the structure must always be applied to the underlying shape and status bar icon details, as shown in Figure 9. All the specific dimensions on this page are based on a 25x25 pixel artboard, 2 pixel security sidebar. status bar icons can overlap the security bar if necessary, but must not overlap the top and bottom of the security bar. The final graphic must be exported as a transparent PNG file. Menu icon templates made in Adobe Photoshop are available in the icon template package.Figure 9.
The security bar and fillet in the status bar icon. The icon size is 25x25.
lights, effects and shadowsThe status bar icons are slightly concave-convex, high contrast, and the plotted graphics can enhance the sharpness of the small size.
Figure 10. status bar icons for lights, effects and shadows.
1. Front: Color gradient fill 2. Internal bevel: Depth 100% | Direction downwardWhen you make a status bar icon for your application, here are some examples of "doing this and not doing this".
A label icon is a graphic used to represent a single label element in a multiple-option interface. There are two states of each label icon: unchecked and checked.
As described in providing a specific density icon set, you should create a set of independent icons for low, medium, and high-density screens. This ensures that your icons are displayed correctly in a series of devices that install your application. See table 1 for the proposed icon size for each density. Also, see suggestions for designers on how to use multiple sets of icons.
The structure unselected label icon and menu icon have the same fill gradient and effect, but no external glow. The selected label icon, which looks like an unsigned label icon, has a dim inner shadow and has the same front gradient as the dialog icon. The label icon has a 1-pixel security sidebar, and the security sidebar should only overlap the edges of the anti-aliasing circle. All dimensions specified on this page are based on an artboard of size 32x32 pixels. In the Photoshop template, keep a 1-pixel padding on the edge bar. The final image must be exported as a transparent PNG file with a 32x32 pixel. The label icon template made in Adobe Photoshop is available in the tag template package.Figure 11. Safe Sidebar and fill gradient for unselected label icons. The icon size is 32x32.
Figure 12. The security sidebar and fill gradient for the selected label icon. The icon size is 32x32.
unchecked label icon lights, Effects and shadowsThe unchecked label icon looks like a selected label icon, but has a faint inner shadow and has the same front gradient as the dialog icon.
Figure 13. Unchecked label icon for lights, effects and shadows.
1. Front: Gradient | Angle 90°The selected label icon and menu icon have the same fill gradient and effect, but no external glow.
Figure 14. The selected label icon lights, Effects and shadows.
1. Front: Full gradient 2. Internal projection: Black | 20% Opacity |The dialog icon appears in the pop-up dialog box and prompts the user to interact. To highlight in a black background, they use a light gradient and an internal projection effect.
As described in providing a specific density icon set, you should create a set of independent icons for low, medium, and high-density screens. This ensures that your icons are displayed correctly in a series of devices that install your application. See table 1 for the proposed icon size for each density. Also, see suggestions for designers on how to use multiple sets of icons.
The Structure dialog icon has a 1-pixel security sidebar. Basic graphics must be placed inside the secure sidebar, but the anti-aliasing circle can overlap the safe sidebar. All dimensions specified on this page are based on a 32x32 pixel-sized artboard built in Adobe Photoshop. In the Phontoshop template, maintain a 1-pixel padding on the sidebar. The final picture must be exported as a transparent PNG file. Dialog icon templates made in Adobe Photoshop are available in the tag template package.Figure 15. Dialog icons Secure Sidebar and fill gradients. Icon size is 32x32 pixel.
lights, effects and shadowsThe dialog icon is a flat, front-facing picture. To highlight in a black background, they use a light gradient and a black projection.
Figure 16. dialog icons for lights, effects and shadows.
1. Front: Gradient Overlay | Angle 90°The list view icon looks like a dialog icon, but they use a light from an internal projection effect above the object. They are also used only in list views. Use the main screen in the Android Market and the guide screen in the application of the map.
As described in providing a specific density icon set, you should create a set of independent icons for low, medium, and high-density screens. This ensures that your icons are displayed correctly in a series of devices that install your application. See table 1 for the proposed icon size for each density. Also, see suggestions for designers on how to use multiple sets of icons.
The structure List view icon usually has a 1-pixel security sidebar. Anti-aliasing circles can overlap the security sidebar. All dimensions specified on this page are based on a 32x32 pixel-sized artboard built in Adobe Photoshop. In the Phontoshop template, maintain a 1-pixel padding on the sidebar. The final picture must be exported as a transparent PNG file. The list view icon template made in Adobe Photoshop is available in the label template package.Figure 17. The security sidebar and fill gradient for the list view icon. Icon size is 32x32.
lights, effects and shadowsThe list view icon is a flat, front-facing picture. To highlight in a black background, they use a light gradient and a black projection.
Figure 18. List view icons for lights, effects and shadows.
1. Internal projection: Black | 57 Opacity | Angle 120°| Blending mode Normal | Distance 1px | Size 1px2. Background: Black | Standard system ColorHere are some tips to help you create icons or other available versions for your application. These hints assume that you are using Photoshop or similar raster image editing programs.
Name the icon version with the usual naming conventionsTry naming files, and when they are sorted alphabetically, the versions will be clustered together in a directory. In particular it helps to use a common prefix for each icon type. For example:
version Type prefix example icon ic_ic_star.png emitter icon ic_launcheric_launcher_calendar.png menu icon ic_menuic_menu_archive.png status bar Ic_stat_ SYS or ic_stat_notifyic_stat_notify_msg.png Tag icon ic_tabic_tab_recent.png dialog icon Ic_dialogic_dialog_info.pngPlease note that you do not need to use any type of shared prefix-this is only for your convenience.
creates a space-saving file for creating a multi-density version iconDeveloping multiple version sets for different screen densities means making copies of multiple dimensions of a file. To keep multiple copies of your files secure and easier to find, we recommend that you create a directory structure in your workspace to organize the file versions. For example:
assets/... ldpi/... _pre_production/... working_file.psd finished_asset.png mdpi/... _pr e_production/... working_file.psd finished_asset.png hdpi/... _pre_production/ G_FILE.PSD Finished_asset.pngThis structure is the same as a specific density structure, and you can store the final version in your application source file. Because the structure of your workspace is similar to the structure of your application, you can quickly determine which versions should be copied to the directory of each application source file. Independent versions for different densities can allow you to detect different file names based on density, which is important because the corresponding versions produced for different densities must have the same file name.
For comparison, the following is a typical directory structure for application resources:
Res/... drawable-ldpi/... finished_asset.png drawable-mdpi/... finished_asset.png drawable-hdpi/... Finished_asset.png first make the medium density versionR. Since medium density is the baseline for Android, your design work should start with a medium density version. See table 1 above for the actual pixel dimensions for different icon types. If possible, use vector graphics or create paths in Photoshop to make it easier to modify version sizes.
The original text is too long to be pasted in, and One-sixth has not yet been completed ...
Original Author:
source icon Design Guidelines, Android 20
Translator Sugar Pear
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
