Question

For my app I need several small icons. I put them at a size of 15dp * 15dp in the layout xml file. The problem is that they do not look good on the device. If I look at the standard android Icons, e.g. for refresh, they look very sharp.

What I did was, I created a 15*15 pixel image with Gimp and tried to use it. I guess that is not a good approach since 15dp != 15 px, right? What is the usual workflow for creating nice, good looking icons, even if they need to be small?

Answer 1

Density-independent pixels (i.e. dip or dp in XML) are designed to provide a more consistent visual appearance across devices by scaling the UI to look roughly the same size on each device. This is not the exact same as physical size scaling, but rather the pixel density (dpi) of the screen. There are basically four buckets any device can fall into (ldpi, mdpi, hdpi, xhdpi). The dp unit is modeled after mdpi, and all other buckets are scale factors from there. In other words, 15dp does equal 15px on an mdpi device, but not on others.

What you need to do for optimum performance is to create your icon in four sizes, and place them in corresponding drawable/ directories. For instance, with your 15dp icon you should have:

• A 12x12px image in a res/drawable-ldpi folder (LDPI is 75% of MDPI)
• A 15x15px image in a res/drawable-mdpi folder (MDPI is the base)
• A 23x23px image in a res/drawable-hdpi folder (HDPI is 150% of MDPI)
• A 30x30px image in a res/drawable-xhdpi folder (XHDPI is 200% of MDPI)

The application will grab the proper asset to match the resolution of the device you are running on. If you do not create an asset for each level, the application will take the closest match and scale it up or down (You are probably using an HDPI device to test and your 15px image was getting scaled up to 23px, causing pixelation).

HTH!