Creating a Launcher Icon for the Application

When your app gets installed, an icon for it appears in the application launcher to help users identify its presence. When you created the Screen Brightness Toggle application, the ADT automatically included a default launcher icon for you, as shown in Figure 8-7.

Figure 8-7: The default Android launcher icon.

image

Kind of bland, right? Change this icon to one of your own. I have a round sunshine icon that I created in an image-editing program, as shown in Figure 8-8. You can create your own (as shown in the following section) or download mine from this book's companion website.

Figure 8-8: The new sunshine application icon.

image

Designing a custom launcher icon

Creating your own launcher icons is fairly easy thanks to the Android project. The Android documentation contains a full article, entitled “Icon Design Guidelines, Android 2.0,” that includes a how-to manual for creating icons for the Android platform, along with a style guide, dos and don'ts, materials and colors, size and positioning guidelines, and best of all, icon templates that you can use. You can find all of the design guidelines at http://d.android.com/guide/practices/ui_guidelines/icon_design.html.

Working with templates

Because you've already downloaded the Android SDK, icon templates and materials are available for you to use right now on your hard drive! Navigate to your Android SDK installation directory (from Chapter 2), and from there navigate to the docs/shareables directory. There you'll find various .zip files that contain templates and samples. Open the templates in the image-editing program of your choice and follow the design guidelines in the documentation to make your next rocking icon set.

image If you want to really speed up things, you can use the Android Asset Studio, located here: http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html. This tool helps you quickly create great-looking icons for the application, menu, or notification bar as well as many other graphic assets for your application.

Matching icon sizes with screen densities

You think about multiple densities when working with images, and icons are no different. You need to create three different versions of your icon (low-density, medium-density, and high-density) for the icon to show up correctly on various devices. Because each screen density requires a different-size icon, you must size your icon correctly, so it will look appropriate (no pixilation, stretching, or compressing) on the screen. Table 8-2 summarizes the finished icon sizes for each of the three generalized screen densities.

Table 8-2 Finished Icon Sizes

Screen Density Finished Icon Size
Low-density screen (ldpi) 36 × 36 px
Medium-density screen (mdpi) 48 × 48 px
High-density screen (hdpi) 72 × 72 px

Adding a custom launcher icon

To place your custom launcher icon into the project, follow these steps:

  1. Rename your custom icon's filename to icon.png.
  2. Drag the three correctly sized versions of your icon into the mdpi, hdpi, and ldpi folders.

    Eclipse asks whether you want to overwrite the existing icon.png file, as shown in Figure 8-9. Click Yes.

Figure 8-9: Eclipse asks whether it's okay to overwrite the icon.png file.

image

If you don't copy the low- and high-density icons into their respective folders, users who have a low- or high-density device receive the default launcher icon, as shown in Figure 8-7, earlier in this chapter, whereas the medium-density devices receive the new icon that you dragged into the project.

How does this happen? You dragged the file into the mdpi folder; what gives? The hdpi and ldpi folders both contain their own version of the icon. Open the drawable-hdpi and drawable-ldpi folders in your Eclipse project and you can see that each density has its own icon.png file. Be sure to place the correct-size icon in each density-specific folder.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.138.156.60