Custom Icons for Android App using PhoneGap (CLI)

This process took me way longer than it should have to figure out. It turns out I needed to manually put the icons in the ./platforms/android/res/drawable* folders, clean the project to clear the cache, and rebuild it.

Below are the steps you need to follow to get your custom icon working with your PhoneGap Android app:

1) Build the Android project as-is

phonegap build android

2) Replace the files in /platforms/android/res/drawable* with your icons.
(Hint: If you don’t have a script to automatically generate the icon sizes, you can always create a new project in Eclipse with your custom icon and it will generate all the icon sizes for you, and you can even crop as a circle, or add a drop shadow as well.)

/platforms/android/res/drawable-xhdpi/icon.png
/platforms/android/res/drawable-mdpi/icon.png
/platforms/android/res/drawable-ldpi/icon.png
/platforms/android/res/drawable-hdpi/icon.png
/platforms/android/res/drawable/icon.png

3) Run a cordova clean on the project to clear the cache of old icon files

./platforms/android/cordova/clean

4) Build the project again

phonegap build android

If you did this properly and you’re running PhoneGap 3.4.0 you should be able to see the icons being crunched…

-crunch:
 [crunch] Crunching PNG Files in source dir: /Users/kevin/Desktop/myapp/platforms/android/res
 [crunch] To destination dir: /Users/kevin/Desktop/myapp/platforms/android/ant-build/res

If you are adding custom splash screens as well make sure they are all named screen.png and add these two lines to your config.xml

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3500" />

Please leave a reply if you have any questions.