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 densityldpi120 dpi36×36 px
Medium densitymdpi160 dpi48×48 px
High densityhdpi240 dpi72×72 px
Extra High densityxhdpi320 dpi96×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

The downloaded zip with the name icmenustar.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!).

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 on a menu item, through code

The simplest usage example of a menu with 2 items:

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;
    }

    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 on a menu item, 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.

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.

comments powered by Disqus