A Handy Guideline On Creating Icons For Android Apps

How many of you are aware of the fact that the worth of an app is determined by its icon? I’m sure not many of you would’ve known this. Well, as per a study conducted by the very popular UX firm called Create with Context, it has been discovered that a user’s initial perception of an app’s quality is highly influenced by the icon’s design. That means, a good icon represents a good app. The mere design of an app is competent in driving the attention of targeted users. While browsing app stores, its the sole design of an app that enthralls a user to download the same, without knowing what the app is or what its being used for. Through this blog, I’ll be offering you a clear guideline on creating impressive icons for your Android applications. Here, I’ll be covering the methods for creating a custom icon as well as a menu icon for an Android application.

Firstly, let’s take a look at the technique of creating Custom Icons for Android apps…

The custom icon that I’m proposing to create here would not include any text, but only the actual symbol. In this post, I’ll be using a special icon(Open Labs Albania- an open source community in Albania) which looks like this:

Being associated with any of the Android App Development Companies, as per the first approach, you can use a negative space and the other half of the cut color. The monochrome logo obtained here will serve as a perfect match for notification bar icons and other events where there’s a need for monochrome icons. As a second approach to creating custom icons, you can add strokes to the shapes that can’t usually convey via the same monochrome color.  Rather than filling the shape with a color, you can have a specific amount of stroke width. You can use Illustrator for tweaking the logo, followed by adding the shadow wherever required. Here’s a look at the final output achieved after following this technique:

The above displayed shapes can either have a 3D effect or a gradient element in KitKat or former Android versions. So, it’s up to you to pick the effect that suits you, followed by exporting the icon to 512×512 PNG- the largest resolution that’s available for icons designed for Android devices.

And now, let’s start off with creating a menu icon for Android app:

Step 1 – Create A Menu Icon In Inkspace:

Download and install Inkspace onto your system. Now, create a new empty document. Go to File-> Document Properties and set the Document width and height to 72px. After this, close the Document properties window. Now, create an icon while staying inside the frame. Use Path-> Difference to get this icon as shown in the below screen-shot:

Further, go the File-> Export Bitmap and select “Page”, the screen-shot for this is as shown below:

Step 2 – Utilize The Asset-Studio:

For this, just go to the Asset-studio website and select Menu icons. Now, click on the Image button to browse and upload the .png icon file(the one created as per step 1). Trim the icon to fit it in the frame. Name the new resource and select the ‘Download zip’ option provided towards the bottom of the page.

Step 3 – Get The Icon In Your Eclipse Android Project:

Now, just copy the icon from the res/drawable-hdpi in the downloaded zip and paste it into the res/drawable-hdpi folder available within the Eclipse Android project. Follow the same procedure for other icons including mdpi, xhdpi and Idpi.

Step 4 – Use The Icon In The Android Application:

Well, for using the created icon in your Android app, you can either opt for the coding technique or the XML technique.

Case1- Using The Code:

Here, all you need to do is simply add the following code snippet which would use the created icon and put the same into the drawable folders:

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

Case 2- Using The XML File:

If you’re inclined on inflating the icon menu via the XML file then all you need to do is simply specify the icon that you intend to use for the varying menu items. Including the below mentioned code will allow you to inflate the menu.xml file and use the same as the menu:

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

Conclusion:

So, that’s it. Hope you’d have enjoyed going through the easy-to-follow steps for creating icons that can add elegance and charm to your plain, boring Android applications. You may opt for using similar steps for creating eye-catchy Launcher icons, Tab icons and Notification icons. Do share your feedback via the comments box provided right under this blog post.

About the Author:Juana Steves is a veteran technical writer for Xicom Technologies – a leading Android App Development Company. You can opt to avail Android Developer for Hire with her best advices, in case you are looking forward for the same.

Find Me On GooglePlus