Fast-track to Android design: the missing parts- What screens are there?

- How to cope with this variety? - Tactics for pixel perfection- Technical design

@MaksimGolivkin@AndrodAalto Community

Motivation“Official” handsets: 165+“Official” tablets: 45+

OpenSignalMaps report 3997 devices

56% smartphones world wide run Android42% smartphones run Android in US

Why does it matters?

Concepts of the platform

Generalized sizes

Generalized size Diagonal InterpretationSmall 2” − 3.4” legacy phones

Normal 3” − 4.7” phones

Large 4.2” − 7.3” “tweener” tablets

Extra Large 7” − ∞ tablets

Popular* screens

*Not all the px resolutions are present! See phones and tablets databaseData was collected in 7-days ending on May 1, 2012

Generalized sizeResolution

small normal large extra large

240x320 2.3%240x400240x423 0.7%

320x480 26.2%

480x640 2%

480x800480x854

600x102457.8% 2.3%

720x1280800x1280 0.9%

1024x7681280x7681280x800

7%

Phones

“Tweener” tablets

Tablets

Phone* screens

*Not all the pixel resolutions are present! See phones databaseData was collected in 7-days ending on May 1, 2012

Generalized sizeResolution

small normal

240x320 2.3%240x400240x423 0.7%

320x480 26.2%

480x640 2%

480x800480x854

600x102457.8%

720x1280800x1280 0.9%

Mostly Legacy

The trend

4.3% in small phones85.6% in normal phones

Generalized sizeResolution

large extra large480x800480x854

600x10242.3%

1024x7681280x7681280x800

7%

Tablet* screens

*Not all the pixel resolutions are present! See tablets database.Data was collected in 7-days ending on May 1, 2012

“Tweeners”

The trend

Screen densityScreen density is physical characteristic of the screen technology, which determines screen size and resolution

Screen density can be estimated using following formula:

Density is expressed in db – “density independent pixels”.

Physical size of dp “pixel” is the same

Samsung Galaxy Ace320x480 px

mdpi density bucket

42 dp height

Asus Nexus 71280x720 px

hdpi density bucket

Density buckets

Devices are grouped into density buckets according to the physical screen density.

Density bucket is hard-coded, but can be estimated based on the following heuristics.

See phones and tablets database to find out about the density of relevant device.

Density bucket Screen density rangeldpi (low) 100 ~ 140 dp

mdpi (medium) 140 ~ 200 dp

hdpi (high) 200 ~ 280 dp

xhdpi (extra high) 280 ~ 340 dp

3.7”Nexus One320x533 dp

4.2”Samsung Galaxy S2

320x533 dp

Devices in one density bucket

Devices in one density bucket

10.1”Asus Transformer Prime

1280x800 dp

3.5”Samsung Galaxy Ace

320x480 dp

3”Sony Xperia X8

320x480 dp

Awkward moment

*Not all the pixel resolutions are present

Generalized size

Resolutions

small normal large extra large240x320 px 320x426 dp240x400 px 320x533 dp240x432 px 320x576 dp320x480 px 320x480 dp480x640 px 240x320 dp

480x800 px 320x533 dp640x1067 dp480x800 dp

480x854 px 320x568 dp640x1138 dp480x854 dp

600x1024 px 413x683 dp 600x1024 dp640x960 px 320x480 dp

720x1280 px800x1280 px

360x640 dp400x640 dp

1024x768 px1280x768 px1280x800 px

1024x768 dp 1280x768 dp1280x800 dp

Dp resolutions

5.3”Samsung Galaxy Note

400x640 dp

10.1”Asus Transformer Prime

800x1280 dp

800x1280 px

Only 12 dp resolutions (so far)Generalized

sizeDensity bucket

Resolution* (dp)  

small ldpi 320x426 legacy phonessmall hdpi 240x320 legacy phonesnormal ldpi 320x533

320x576legacy phones

normal mdpi 320x480 phonesnormal hdpi 320x533

320x568phones

normal xhdpi 320x480 360x640 400x640

new phones

large ldpi 640x1067640x1138

tweener tablets

large mdpi 480x800480x854

600x1024

tweener tablets

extra large mdpi 1024x7681280x7681280x800

tablets

Handling many screens

It is obvious that due to larger screens and different resolutions, tablets require their own UI, which takes advantage of larger screen “real estate”.

Of course, looking at the market share of small phones and “tweener” tablets (4.3% and 4%) they are less significant.

However, the longer side of most devices is 30%-60% bigger than the shorter side. Thus, landscape orientation may need a separate layout.

Wider layouts can be reused for landscape orientation of smaller devices.

One application- multiple layouts

320x420 in landscape

400x640 dp in portrait

320x400 dp in portrait

320x420 dp in portrait

Orientation is just another screen resolution.

Plan for resizable elements and/or margins.

“stretching” layout

320x480 is centered in 400x640

“centering” layout

Margins

320x480 dp stretches to 400x640 dp

Two useful patterns

small size portrait small size landscapenormal size portrait

normal size landscapelarge size portrait

By listing all the possible layout widths (both orientations), we see how do they cluster.

Choose switching points, when do you a) introduce new layout b) start/stop growing marginsc) start/stop growing element size

240dp 320dp 360dp 400dp 426dp 480dp 533dp 568dp 578dp 640dp

Choose “switching points”

small size portrait small size landscapenormal size portrait

normal size landscapelarge size portrait

Home base

resized elementsmargins addednew layout

240dp 320dp 360dp 400dp 426dp 480dp 533dp 568dp 578dp 640dp

One layout and many many adjustments

Every additional layout adds significant effort, but improves user experience.

Options worth considering:- portrait only on the handset- landscape only on the tablet

Use market research to understand, what your target customers are using.

How many layout enough?

small size portrait small size landscapenormal size portrait

normal size landscapelarge size portrait

Home base

resized elements & marginsnew layout

240dp 320dp 360dp 400dp 426dp 480dp 533dp 568dp 578dp 640dp

2 layouts - richer UI

Make advantage from more screen “real estate”!

Starting Android 3.2 it is possible to target screens using width, height and “smallest width” (shortest screen dimension, ignoring orientation).

Very useful!

Tablet layouts on3.2 and after

Smallest width

Generalized size

Density bucket

Orientation

768 dp extra large mdpi portrait768 dp extra large mdpi portrait800 dp extra large mdpi portrait

1024 dp extra large mdpi landscape1280 dp extra large mdpi landscape1280 dp extra large mdpi landscape

For Android prior 3.2 you could only target screen groups using generalized size, density bucket and screen orientation combination.

Still possible to target “smallest width”.

Before 3.2: a bit more tricky!

Short side min

Short side max

Generalized size

Density bucket

Orientation

240 dp (same) small hdpi portrait320 dp (same) small ldpi portrait320 dp (same) normal hdpi portrait320 dp (same) normal ldpi portrait320 dp (same) normal mdpi portrait320 dp (same) small hdpi landscape426 dp (same) small ldpi landscape480 dp 600 dp large mdpi portrait480 dp (same) normal mdpi landscape533 dp 568 dp normal hdpi landscape533 dp (same) normal ldpi landscape640 dp 576 dp large ldpi portrait

Process for designing a layout in dp:1. Research market and decide on the screen groups 2. Find smallest dp resolution for every screen group3. Design for the smallest db resolution on a canvas equal

to biggest pixel resolution4. Enhance it for bigger resolutions from the group5. Make sure that sizes of reused elements translate into

all pixel densities groups without a reminder.

Pixel perfect rule:If you support ldpi, dp sizes have to be dividable by 4. If you don’t, sizes have to be dividable by 2.

P.S. 1 dp = 1 px for mdpi devices

Designing layout: the process

Random advices

Phone dp width is increasing

Phones (short edge) 320 dp 360 dp 400 dp

majority a few Galaxy Note

At the moment, number of phones with screen width = 360 dp is growing fast. However, these phones are running Android 4.0, so they can be addressed using “tablet” layouts

Until recently, all Android phones had 320dp width and 5”-7” tablets sometimes had 480dp.

5”-7” tablets

480 dp

Simple scaling or SVG isn’t the best solution!Smaller icons need to be redrawn to look better!

Below there are icons for pictures folder in Mac OS X.

Here is an article going into detail: About those vector icons

RhythmAndroid is using 48dp rhythm – size which translates to physical area comfortable to touch.

Spaces between elements are recommended to be at least 8dp.

Standard sizesDensity bucket

Icons

ldpi mdpi hdpi xhdpi

Launcher 36x36 px 48x48 px 72x72 px 96x96 px

Action bar 24x24 px(18x18)

32x32 px(24x24)

48x48 px(36x36)

64x64 px48x48

Contextual 12x12 px(9x9) px

16x16 px(12x12)

24x24 px(18x18)

32x32 px24x24

Notification 18x18 px(16x16)

24x24 px(22x22)

36x36 px(33x33)

48x48 px(44x44)

Except for the icons, platform doesn’t have many standard elements.

For instance, action bar is 48-60dp depending on resolution and screen orientation.

File names

Graphics artifact filenames:- CAN’T have spaces or dashes- MUST be in small letters- MUST start with a letter

Your coder will love you for this!

Maybe …

If the screen has only few field, consider making it into dialog.

Transparent list and image backgrounds on lists can hinder performance/result in memory problems.

Instead of launching progress dialog, consider animating interface elements, such as action bar items.

Design with different font size for devices of different size.

FIN & Good luck!

Contributors:- Maksim Golivkin, Android developer- Joonas Kukkonen, Elisa- Janne Toivola, Futurice- Antonio Guadagno, Exaget- Victoria Fedirko, Freelance designer

Inspiration:- “iOS App Designer Guide to Developer Love”,

Lemon Labs

Looking for an Android developer? www.golivkin.eu

A freelancer? maksim@golivkin.eu