Martin Cohen

Android DPI Calculator

Wed, 21 Dec 2011 05:40:44 -0500

A simple, yet useful calculator for Android app designers that converts sizes between DPIs.

Android: 9-patch resources

Wed, 05 Oct 2011 09:57:08 -0400

The most powerful tool when preparing graphics for Android is 9patch. But many people have problems understanding it, so let me try to clarify it.

9patch is essentially an image that can be stretched without distorting it. A typical example is a rounded rectangle (a typical contemporary button), where you don’t want the corners to be distorted by scaling and only want the middle parts to be stretched.

It’s not only that 9patch will get rid of the blurriness, it also locks the padding and dimensions when stretching. Notice how the non-9patch stretched image is indented and blurry.

With 9patch you define a 3×3 grid over the image. Android uses the grid to slice the image into nine parts. The four corner parts are kept, while the middle ones are scaled:

9patch is a standard PNG file that includes 1-pixel-wide transparent border. In the border, we mark the stretchable area by black pixels in the left and top lines of the border:

The image has to be saved with a .9.png extension so Android can tell it’s a 9patch image.

Apart from marking the slices, you can also specify the padding that will be used for content (i.e., an icon or button label). The padding is adjusted when 9patch is stretched so the distances from the edges are kept the same.

Similarly to the slices, the padding is marked in the right and bottom lines of the 1-pixel-wide border by black pixels. If you omit it, Android will use the left and top markers.

With the way 9patch works, you can tell that it won’t be useful for everything. Textures or patterns are the source of most of the problems. Take a look at these examples:

The only way to handle these situations is to either not take the textures into account, or to just create a static image for every size required by the application.

Don’t forget that the 9patch resource is still just an image and that it should be also prepared for the densities.

Designing under pressure.

Thu, 11 Aug 2011 12:14:00 -0400

Designing under pressure.

Smoking on a boring day.

Wed, 03 Aug 2011 16:02:00 -0400

Smoking on a boring day.

Android: New tools for managing screen sizes

Fri, 29 Jul 2011 05:38:00 -0400

Android: New tools for managing screen sizes:

The dp unit described in detail; screen size selectors and more useful stuff on Android graphics directly from developers.

Understanding Mobile Cache Sizes

Fri, 22 Jul 2011 06:15:54 -0400

Understanding Mobile Cache Sizes

Dyslexie is a typeface for dyslectics. The University of Twente...

Tue, 19 Jul 2011 18:31:00 -0400

Dyslexie is a typeface for dyslectics. The University of Twente did research on the typeface.

Finally someone took a step forward. Thank you!

Designing for Android: Densities

Tue, 19 Jul 2011 15:33:00 -0400

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

Seven Guidelines For Designing High-Performance Mobile User Experiences

Mon, 18 Jul 2011 20:10:32 -0400

Seven Guidelines For Designing High-Performance Mobile User Experiences:

Intriguing article by Ivo Weevers.

Golden ratio

Mon, 18 Jul 2011 09:24:00 -0400

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

Sun, 17 Jul 2011 09:10:00 -0400

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: