featuredtutorials

The easiest way to create nice icons for Android apps

In this article I will show you a very easy way to create nice looking icon drawables you can use in your Android applications.

Using this method we can easily skip through the difficult and time-consuming parts of creating icons.

Yes, I know this method does not work for everyone, some Android developers have their own designer and so on, but for a small and simple app, this will definateley do!

The problem

Creating icons for Android apps may sound simple, but in fact, it is not as easy as it sounds…

There are a number of different icon categories, here are a couple of them:

  • Launcher icons – The applications main icon
  • Menu icons – The icons on the menu you get when pressing the menu button on your device
  • Tab icons – Icons on tabs
  • Status bar notification icons – Icons for your apps notifications

When creating icons for Android, you should create icons for different screen densities:

Low density ldpi 120 dpi 36×36 px
Medium density mdpi 160 dpi 48×48 px
High density hdpi 240 dpi 72×72 px
Extra High density xhdpi 320 dpi 96×96 px

(You can read more about the different icon dimensions here. Note: The dimensions above, are for menu icons)

The Problem: Creating all those different icon types in several densities, with the right gradient color, shadow, borders, selected/unselected state etc, can be a time-consuming and irritating process.

We would like to save us some time!

The solution

So if you just need a basic icon, heres a much simpler way using the Asset-Studio, which is part of the android-ui-utils, which aims at helping developers with Android apps UI. Chrome is the recommended browser to use on the Asset-Studio site.

This method also uses free tools, so you don’t need Illustrator.

The basic procedure to create an icon is:

  1. Use Inkscape (GPL license) to create your basic icon shape, then export it
  2. Upload your icon to the Asset-Studio website and make adjustments if needed
  3. Download zip of finished resources from the website
  4. Copy paste into Eclipse project folder

You can then use your icon in XML or Java code as usual, enjoy your new icons!

Here is an example of how to create a menu icon using the four steps above:

1. Creating a menu icon in Inkscape

  1. I assume you already have Inkscape up and running
  2. Create a new empty document
  3. Go to File -> Document Properties, set the Document Width and Height to 72 px, then close the Document properties window. You now have a quadratic starting point, as big as the High density image needs to be, this way we avoid scaling the image up
  4. Create your awesome icon, stay inside the frame, try to make it smooth, not to many hard corners. I have not used Inkscape before, so I just made some basic shapes and used Path -> Difference to get my icon:

    Nice huh?

  5. In Inkscape go to File -> Export Bitmap, and select “Page”, it should look like this:

You now have a .png file ready to upload to the website.

You can download (Right click -> Save as) and use my star icon freely if you want to.

2. Using the Asset-Studio

  1. Go to the Asset-studio website, select Menu icons
  2. For the source: Click on the Image button to browse and upload your icon file (.png) (supported images are jpg, gif, png, svg and a couple others, only the png file worked for me)
  3. Set the trim and padding to what you see fit in the frame
  4. Give your new resource a name in the “Icon name” field
  5. Select Download zip on the bottom of the page

3. Getting the icon into your Eclipse Android project

  1. The downloaded zip with the name ic_menu_star.zip (your name may differ), contains a res folder, with three folders: drawable-ldpi, drawable-mdpidrawable-hdpi and drawable-xhdpi  including the icons in different densities, with gradients, shadows and everything in place (magic!).
  2. Just copy the icon from the res/drawable-hdpi in the downloaded zip, into the res/drawable-hdpi folder in your Eclipse Android project, and do the same with the mdpi, xhdpi and ldpi icons

4. Using the icon in my Android app – through code

The simplest usage example of a menu with 2 items:


package test.layout;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class LayoutTest extends Activity {

	private final int MENU_STARS = 1;
	private final int MENU_REFRESH = 2;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
    public boolean onCreateOptionsMenu(Menu menu){
    	boolean result = super.onCreateOptionsMenu(menu);
        menu.add(0, MENU_STARS, 0, "Stars").setIcon(R.drawable.ic_menu_star);
        menu.add(0, MENU_REFRESH, 0, "Refresh").setIcon(R.drawable.icon);
    	return result;
    }

    /* Handle the menu selection */
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
        case MENU_STARS:
            showFavourites();
            return true;
        case MENU_REFRESH:
            refreshData();
            return true;
        }
        return false;
    }
    public void showFavourites(){
    	//your code here
    }
    public void refreshData(){
    	//your code here
    }
}

This code uses the icon we created above and put into the drawable folders, and the default icon that comes with every new Android project, just for demonstration, also located in the drawables folders.

The applications menu will look like this:

Code explanation:

  1. Implement onCreateOptionsMenu, which creates the menu when a user presses the menu button on his device
  2. Implement onOptionsItemSelected, which takes care of the logic when a user presses one of the menu items
  3. The final variables are each used to represent a menu item, and gives a human readable name to each of them
  4. The two last methods are executed when a user presses the respective menu item

5. Using the icon in my Android app – through XML

If you are inflating your menu from an XML file, you can also specify which icon to use for the different menu items.

Below is an example menu.xml file that specifies one menuitem called “Stars”, using our star icon. Remember that the menu.xml file goes into the res/menu/ folder.

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/menu_star"
        android:icon="@drawable/ic_menu_star"
        android:title="Stars"/>

</menu>

And here is the whole code for inflating the menu.xml file, and using it as the menu, similar to the code approach above, but a bit simpler.


package test.layout;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
 
public class LayoutTest extends Activity {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu:
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }
 
    /* Handle the menu selection */
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
        case R.id.menu_stars:
            showFavourites();
            return true;
        }
        return false;
    }
    public void showFavourites(){
        //your code here
    }
}

 

Similar steps can also be used to create Launcher icons, Menu icons, Tab icons and Notification icons via the Asset-Studio website.

I hope this helped many people save a good amount of time and frustration! :)

Please share this article.

  • eddy

    thank you very much

  • Fdjk

    very helpfull, thanks!

  • Pandey200411

    Thanks a lot ……………….

  • Ladielee008

    Well, it worked well for the clip art, but I wasn’t able to load the image I had intended to modify. I was wondering what the problem could have been, because atleast the file type was .png.. Any Advice would be of great help. Other wise; thanks alot

  • http://www.facebook.com/people/Luiz-Arao-Araujo-Carvalho/1041213481 Luiz Arão Araújo Carvalho

    With this program is possible generate and resize icons in 8 different resolutions with one click. Donwload Here: http://www.redrails.com.br/2011/09/android-icon-maker/

  • Andrei B.

    Inkscape!
    Thanks ;)

  • Haruhi

    how about xml? hmm…

    • EnvyAndroid

      Oh, looks like I forgot to add XML examples! I will update this post shortly. Thanks :)

    • EnvyAndroid

      I have added xml usage now, see step 5 :)

  • Michael Murphy

    This tutorial was very helpful. However, I have found that http://makeappicon.com/ works much better.

    • EnvyAndroid

      I havent tried that page myself, but it may be a good tip.
      Also, please note that this tutorial was written 2,5 years ago when this method was the best alternative :)

      • Michael Murphy

        Yeah, I noticed. The tutorial is still relevant. Minus the use of the link I posted. Even that is a little behind as it doesn’t support creation of icons for xxhdpi, only a maximum of xhdpi.

  • Pingback: List of 8 websites that helps you to create icons for android easily | Android Development

  • milosznick

    Hello.
    I now it’s old so i have new better solution – just use Eclipse :)
    File-New-Other-Android-Android Icon Set
    It copying automatycly.
    Enjoy:)

    • EnvyAndroid

      Hi there!
      You are right ofcourse.
      It is also available in Android Studio, if you right click a drawable folder, then New -> Image Asset :)

      Inkscape is a great tool if you need to create very custom icons :)

  • jay green

    any paint program can make an android icon (I just used
    photoshop). Saving in “.png” is only necessary if you want transparent
    boarders. For small screens, you don’t need to save below 48×48 pixels because android scales down for you….and it will look better.

  • ISO

    Thanks, thats for sure