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).

Golden ratio

I keep bumping into overcomplicated instructions to construct a layout based on golden ratio (such as this one). Although most of it looks cool and somewhat esoteric, it’s too much to do on a daily basis.

I use two simple formulas:

For example say your website is 960px wide:

• 960px × 0.618 ~= 593px for content column
• 960px × 0.382 ~= 367px for side column

Designing for Android: Screens

It seems overwhelming when you consider that there are dozens of devices currently available with the Android OS, and even more are on the way. Each device has slightly different screen properties. But freak out not, we’re going to simplify it.

Let’s take a look at some Android devices and their properties:

For every screen, there are 3 important properties related to its size:

• screen size – the actual physical screen size measured as the screen’s diagonal (e.g., 3.7”)
• resolution – the total number of physical pixels on a screen (e.g., 480x800px)
• density – the quantity of pixels within a physical area of a screen (e.g., 240dpi)

First of all, when designing we only focus on the densities and the screen sizes. We leave out the resolutions (although there are rare cases when we also take resolutions into account).

The densities and screen sizes are both split into four groups:

• screen sizes:
  • small – around 2.5”
  • normal – around 4”
  • large – around 5.5”
  • extra large – around 8”
• densities:
  • low – around 120dpi (ldpi)
  • medium – around 160dpi (mdpi)
  • high – around 240dpi (hdpi)
  • extra high – around 320dpi (xhdpi)

The screen sizes combined with the screen densities give us a total of 16 virtual groups of devices (each with several supported resolutions). I don’t want to bother with them, just yet. But if you’re curious, take a look at Supporting Multiple Screens (Table 2.)

Let’s boil it down to 2 groups of devices we usually target:

• handsets – small or normal screen size
• tablets – large or extra large screen size

These two differ basically in the layout – by how and where the controls are placed. As there’s more space on tablets, you will probably want to use a sidebar, more buttons, larger lists and even windows. You obviously cannot do that for a handset device.

You usually only need two sets of layouts per group: one for portrait and one for landscape. If you’re only targeting the handset devices (small and normal screen sizes), you only need to make the two.

Once you have the layout ready, you proceed to drawing. In the drawing phase, the densities come into play. That is covered in Designing for Android: Densities.

Resources:

• Supporting Multiple Screens (Android Developers Guide)
• Current Screen Sizes & Densities Usage Statistics