Designing for Android: Densities
Once you have the layout ready, you proceed to drawing. In the drawing phase, the densities come into play.
The screen density by definition is the quantity of pixels within a physical area of a screen. It’s usually referred to as dpi (dots per inch). Android splits them into four ranges:
The painful thing about densities is that we have to prepare each element for every density.
One might think that it is enough to cut images for one density and let the system take care of the scaling magic for the device. Android OS is able to resize automatically, but:
- it slows down the application, takes a lot of the system resources, drains the battery and shortly thereafter: upsets the user
- it introduces a lot of imperfections and blur, brings a lot of unwanted noise (even if it is only scaling down)
Packing all resources for all densities into one APK obviously increases the size, though fortunately Google recently announced a Multiple APK feature to its Android Market that will enable developers to create separate packages per screen size, density or resolution.
The best way to not lose your mind is to:
- draw the whole design in xhdpi, then
- cut out the parts and resize down each one separately for hdpi, mdpi and ldpi.
The densities relate to each other by a 3:4:6:8 scale ratio. So when your base is xhdpi, this is how you convert to other densities:
- ldpi = xhdpi * 0.375
- mdpi = xhdpi * 0.5
- hdpi = xhdpi * 0.75
As an example, let’s take an icon with a size of 64×64px in xhdpi:
You should be careful about what dimensions and distances you use: an example would be a 58×58px icon in xhdpi:
- 21.75px on ldpi (!)
- 29px on mdpi
- 43.5px on hdpi (!)
What is alarming are the decimals for ldpi and hdpi. With a PNG image, you cannot have a width of 43.5px. You cannot even round it: if you have 5 icons of size 43.5×43.5px side by side, it should add up to 217.5px, but if you round to 44 you end up with 220px.
When designing for xhdpi you should always use multiples of 8 for every dimension or distance. The easiest way to do this is to always use grid of 8×8 (or other multiples of 8). If you want to design for hdpi, instead of xhdpi, just use multiples of 6.
Let’s wrap it up:
- Manually prepare resources for all four densities.
- Draw the actual design for xhdpi and once you are done, cut out the parts and resize down each one separately for each density.
- You should be careful about what dimensions and distances you use. When drawing for xhdpi, always use a grid of 8x8 (or other multiples of 8).
