Using vector icons in Android [closed]

Question

To preface this:

I have contemplated putting this on graphicdesgin.stackexchange.com but I came to the conclusion that my android specific questions might not be the best place for it. That is why I chose stackoverflow, because it seems to be more of a problem with Android imageViews then graphics themselves. Thank you.

---

---

I need to use some basic icons in my Android application. I have Illustrator and Photoshop (not great at any of them, but I can get by). I stumbled upon http://www.androidicons.com/ and I saw a great chance at saving me hours of time for only 25 bucks. To get an idea of what I would have to do to use them in my application I downloaded the "BONUS ICONS 01" pack which is free.

I decided I would try to use the clock icon and see how it works in my application. I enlarge the icon to about 800px in Illustrator and then copy and paste it into Photoshop. I save it as a .png and then I created a sample application to test this out in.

The image was only put into the xhdpi folder, because I'm probably going to use this icon for something larger than the action bar, but not something that will take up the whole screen. The idea in my head, is that if you are going to create action bar icons for all of the separate dpi levels then you MUST know exactly what size (in pixels) you are going to make them, and therefore they all look really good (for example, if you download the action bar icons from google, they give them to you in a few sizes, not just one). But what if they are going to be used for something bigger than that? How am I supposed to know what sizes to make them.

To really show my frustration of how I just can't comprehend this subject. Here's the code to my app, and the result of how it ends up looking like on my Galaxy Nexus. The bigger icon is fine, while the smaller icons definitely don't look as crisp. How do I fix this? What is the proper way of making images in Illustrator and going to Photoshop and making sure they look great in any size they are used?

Sincerely,

Android Developer who just doesn't understand graphics.

As you can see, the image seems to look pretty good when it's big, but using it when it's smaller causes some problems IMO. Any way to fix that? Am I being too picky? Even if i re sized it to be smaller, and put it into a mdpi, would my layout even pick that up?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center|center_horizontal" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/anti_huge"
                android:layout_weight="1" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/anti_huge"
                android:layout_weight="1" />
            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/anti_huge"
                android:layout_weight="1" />
            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/anti_huge"
                android:layout_weight="1" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center|center_horizontal" >

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/anti_huge" />

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

Question summary:

1. But what if they are going to be used for something bigger than that? ("that" = ActionBarIcons)
2. How am I supposed to know what sizes to make them? (ActionBarIcons are given to me from Google with set pixel dimensions, how did they figure those dimensions out)
3. How do I fix this? (Big icon on the test application looks fine, while the smaller ones look jagged)
4. What is the proper way of making images in Illustrator and going to Photoshop and making sure they look great in any size they are used?
5. Any way to fix that?
6. Am I being too picky? (Please tell me I am... this ordeal is killing me.)
7. Even if i re-sized it to be smaller, and put it into a mdpi, would my layout even pick that up?

Answer 1

You're not doing it right ;)

Android scales images from the closest possible match. If you only provide one (very large) bitmap, then Android will scale that to the smaller size you request. You'll lose the anti-aliasing if you do it that way, and the icons will look as yours do.

What you'll want to do is to export the png to the (physical) size you actually need when using it, and then to the required screen densities.

The smallest suggested size for a tappable area is 40x40dp which translates to 1/4" square. Chances are, you'll use a 10% border, so you wind up with a 32x32 pixel icon in mdpi.

So, now you render your vector image in 32x32 for mdpi (160dpi), 24x24 for ldpi (120dpi), 48x48 for hdpi (240dpi) and 64x64 for xhdpi (320dpi).

If you want the same icon much larger, render it as a separate asset. Say you want a 2x2" watermark of your clock, you'll render it in 320x320px for mdpi, etc.

You specify the image as 200dp x 200dp in the layout, and Android will pull the correct image on the screen based on the device resolution.

For some of the repetitive rendering, I use the Android Asset Studio. You can set color, icon, effects and such, and it allows you to download a set of icons for all resolutions.