Perfect Resource Image Size & DPI for any Android device

Perfect Resource Image Size & DPI for any Android device blog_pics/Android-logo.png

When creating icons, UI images, splash screen, and other UI images for Android, the designer should think about the screen size and DPI for quality drawable resources.

I love the Android platform. The platform is very flexible from OS to app development aspects, and many people love customizing their phone to show their personality. Because Android is open-sourced, many phone manufacturers appeal their own form-factor and customized OS theme. In order to accommodate this, Android has a concept of Fragmentation to support multiple screen sizes & screen DPIs. However, this is somewhat painful when it comes to design image resources. If the image has a wrong DPI, then the image looks blurred, too pixelated, or small-scaled to the original screen. If the resolution is wrong, the image may not look in fitted size on the screen. Literally, there is a ton of different screen configurations for the contents to be displayed. Thankfully, Android has a set of screen size & DPI categories.

There are about 6 different DPI (Density Pixel per Inch) categories:

  • Low - 120DPI

  • Medium - 160DPI

  • High - 240DPI

  • Extra High - 320DPI (Like a retina display!)

  • Extra Extra High - 480DPI

  • Extra Extra Extra High - 640DPI (Available starting from Android 4.3 APIs. For 4K resolution! Holy Moly!)

There are commonly two ways to target all screen DPIs.

1. Easiest way - Make all images to Extra High or Extra Extra High DPI.

Android auto-scales the drawables if the device does not match the drawable DPI. If the only drawables are created in high density, lower DPI screens will down-scale a resource to fit in a layout. Con is that Android always goes to process the scaling every draw time in UI thread.
​​
2. Safe way - Make all images for every single DPI.
Android can pull appropriate drawables based on the device’s screen DPI. No scaling is involved, therefore the images looks great in any device. However, the app file size gets bigger if there are many drawable files to store. Longer time is needed for designers to create these resources. (Width x Height x DPI settings)

​What about the image resolutions? Do they also differ by their DPI?

Image resolution and DPI are tightly coupled each other. There is a 3:4:6:8 scaling ratio in drawable size by DPI.
LDPI - 0.75x
MDPI - Original size
HDPI - 1.5x
XHDPI - 2.0x
XXHDPI - 3x
XXXHDPI - 4.0x

For example if a 100x100 image is a baseline (MDPI),
LDPI - 75x75
HDPI - 150x150
XHDPI - 200x200
XXHDPI - 300x300
XXXHDPI - 400x400
and so on.
​​

What if my drawable doesn’t need to be resized by different screen factors?

Put your drawables in drawable or drawable-nodpi folder.
This folder would contain drawables available to all screen factors despite of DPIs such as style XMLs, colors, and others.

 

So what is the best way?

If you're lazy enough to come up your own UI images, then try to create custom drawable XMLs based on Android system resources if you can.

If your drawables are fews, try to target all DPIs and sizes.

If your drawables are a lot, try to use one high DPI and size setting for auto-scale.

If your target Android OS version is higher than Ice Cream Sandwich, chances are the device can handle auto-scale pretty smoothly because of their general hardware specs.

These are some of my insights on drawable resources that the app comes with it to use for itself. You don't need to worry about actual visual content necessarily. Android will have to use ImageView or other appropriate layout element to placeholder that visual content with defined density width & height. That will bring another topic which is mem/disk caching for images. But as far as designing UI elements for Android, this is sufficient enough to start off. Android is all about flexibility for developers. Go for one that you feel comfortable and right about it!