Thursday 30 October 2014

Adding custom icons to apk file which is built using cordova

Follow the steps
1) cordova create hello com.example.hello HelloWorld
2) cd hello
Now open the config.xml file which is presented in hello directory and  add below content in between widget tag
   
    <icon src="res/icon.png" />
   
    <platform name="android">
      <icon src="res/icons/android/ldpi.png" density="ldpi" />
      <icon src="res/icons/android/mdpi.png" density="mdpi" />
      <icon src="res/icons/android/hdpi.png" density="hdpi" />
      <icon src="res/icons/android/xhdpi.png" density="xhdpi" />
    </platform>
   
    <platform name="android">
        <!-- you can use any density that exists in the Android project -->
        <splash src="res/screen/android/land-hdpi.png" density="land-hdpi"/>
        <splash src="res/screen/android/land-ldpi.png" density="land-ldpi"/>
        <splash src="res/screen/android/land-mdpi.png" density="land-mdpi"/>
        <splash src="res/screen/android/land-xhdpi.png" density="land-xhdpi"/>

        <splash src="res/screen/android/port-hdpi.png" density="port-hdpi"/>
        <splash src="res/screen/android/port-ldpi.png" density="port-ldpi"/>
        <splash src="res/screen/android/port-mdpi.png" density="port-mdpi"/>
        <splash src="res/screen/android/port-xhdpi.png" density="port-xhdpi"/>
    </platform>

Note:- Here res directory is presented under hello directory. If you don't have png file according to path specified  in src attribute, then create same structure as the path specified in src attribute and rename your custom image with above names.

For the source, see below links
https://cordova.apache.org/docs/en/3.0.0/guide_cli_index.md.html
http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html

3) cordova platform add android

4) cordova build android

Thats it. It will give apk file and after installation it will show your custom icon on android phones.

1 comment: