Tuesday, January 31, 2012

Create Launcher Icon For Your Android App

If you followed my last blog on Writing Your First Android App - Body Mass Index Calculator, you should have a good idea on creating simple nice apps for Android. In this post, I will cover how to add a launcher icon for the app (instead of the android robot icon shown by default).

1. Prepare the Icons

You need to create a set of icons with different resolutions and dimensions to suit with different types of phone displays. Android developer website provides a set of template icons, that you can use to start designing your icons. They are photoshop files with .ps extensions. You can also use free tools like GIMP to open these template files and modify them, or you can create the icon images from the scratch.

Here are the specified dimension (width x height) and the resolution (dpi) of the icon for different types of displays.
  • Low density screens (ldpi): 36x36px, 120dpi
  • Medium density screens (mdpi): 48x48px, 160dpi
  • High density screens (hdpi): 72x72px, 240dpi
  • Extra high density screens (xdpi): 96x96px, 320dpi
Android developer website recommends you make use of alpha channel in your icons for transparency. That gives the icons a cool look with any background image.

Here is the set of icons I prepared for the BMI Calculator app.

2. Add Icons to your project

Open the 'res' directory in your project and copy the icons into the corresponding sub directories listed heer.
  • Low density screen icon : res/drawable-ldpi
  • Medium density screen icon : res/drawable-mdpi
  • High density screen icon : res/drawable-hdpi
  • Extra high density screen icon : res/drawable-xdpi
Make sure you rename all your icons to "ic_launcher.png". Once you finish, the directory structure should look like the following screenshot.


That's it. If you put the icons in the correct directory with the correct name, the android development kit will pick them and use for the launcher icon of you app.

2. Test the launcher icon in your phone

Check reinstalling the app on your phone. (You can redo the step5 mentioned in the previous blog (Writing Your First Android App - Body Mass Index Calculator) to reinstall the app on your phone. Click the app drawer and see how well the icon of your app goes with other apps.

You can download the eclipse project and the android app that we created in this post from following links.
Download the eclipse project files (zipped) com.blogger.android.meda.bmicalculator-updated.zip
Access the Source code from github github repo
Download the free BMI Calculator app (the latest version) from the Android Market. Available in Android Market

12 comments:

  1. I like your blog tips.This is one of the enjoyable and good post.I will again come across towards this post.
    Android app developers

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. a plugin for Gimp to resize and write your icon images for each density folder : gimp-android-xdpi

    ReplyDelete
  4. Love this app! I need to go download it right now!

    iCaption That

    ReplyDelete
  5. Great info! thanks!

    Please note you have a small error- you write:
    Extra high density screen icon : res/drawable-xdpi

    Should be: xhdpi

    Thanks for a great article :)

    ReplyDelete
  6. I would certainly commit 10 on 10 for such incredible cognition.
    android rooting

    ReplyDelete
  7. Your articles support me a lot in all mediums of subjects.
    one click root droid x

    ReplyDelete
  8. It´s really important to know how to correcty make your own app icons, and this was a gret review. learn here

    ReplyDelete
  9. how to create launcher icon with no eclipse project in the android phone?

    ReplyDelete
  10. thanks for your article..

    i have a same application for android device, support me yaa at instagram android

    ReplyDelete
  11. I found lots of interesting information here. The post was professionally written and I feel like the author has extensive knowledge in this topic
    android development

    ReplyDelete