Customizing the App Icon

So far, our app is represented in the emulator using the default PhoneGap icon (a blue square with a ladder on it). To customize the look of the icon, we need to place our own image in a particular spot in the KiloGap project directory; actually, in three spots.

Navigate to ~/Desktop/KiloGap/res in the Finder and you'll see three folders that begin with the prefix drawable: drawable-hdpi, drawable-ldpi, and drawable-mdpi. Because Android supports a wide range of devices with varying screen characteristics, these three folders were created to hold different resolution versions of your icon graphics. ldpi is for 100 to 140 dpi screens, mdpi is for 140 to 180 dpi screens, and hdpi is 190 to 250 dpi screens.

Perfecting the display of your home screen icon across all Android devices is a graphic design issue that falls outside the scope of this book. But don't worry—for now just replace the default PhoneGap icon.png files with a 56-pixel square .png, and Android will do a really good job of rendering it appropriately on various devices. For more details on launcher icons, please refer to "Adding an Icon to the Home Screen" on page 52. For the examples here, I'll be using a chocolate frosted donut with jimmies on a pink background.

Once you have replaced the default icons, enter the following commands in the Terminal application to recompile and install the app:

cd ~/Desktop/KiloGap ant debug adb -d install -r bin/Kilo-debug.apk

When the process completes, you should see your new icon displayed in the launcher on the phone (Figure 7-15).

Figure 7-15. You can customize your app's launcher icon by putting a .png file in each of the three drawable directories in your Android project
0 0

Post a comment