Visual guide to Android UI related concepts (density bucket, density independent unit - dp, dp resolutions). Suggestion for such considerations, as supporting multiple screens and number of layouts to use. Advices to avoid common pitfalls.

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

2. Motivation
“Official” handsets: 165+
“Official” tablets: 45+
OpenSignalMaps report 3997 devices
Why does it matters?
56% smartphones world wide run Android
42% smartphones run Android in US

3. Concepts of the platform

4. Generalized sizes
Generalized size Diagonal Interpretation
Small 2” − 3.4” legacy phones
Normal 3” − 4.7” phones
Large 4.2” − 7.3” “tweener” tablets
Extra Large 7” − ∞ tablets

5. Popular* screens
Phone Generalized size
s small normal large extra large
240x320 2.3%
240x400
240x423
0.7%
320x480 26.2%
480x640 2%
480x800
480x854 57.8% 2.3% “Tweener”
600x1024 tablets
Resolution
720x1280
800x1280
0.9%
1024x768
1280x768 7% Tablets
1280x800
*Not all the px resolutions are present! See phones and tablets database
Data was collected in 7-days ending on May 1, 2012

6. Phone* screens
Generalized size
Mostly Legacy small normal
240x320 2.3%
240x400
240x423
0.7%
320x480 26.2%
480x640 2% The trend
Resolution
480x800
480x854 57.8%
600x1024
720x1280
800x1280
0.9%
4.3% in small phones
85.6% in normal phones
*Not all the pixel resolutions are present! See phones database
Data was collected in 7-days ending on May 1, 2012

7. Tablet* screens
Generalized size
“Tweeners” large extra large
Resolution
480x800
480x854 2.3%
600x1024
1024x768
The trend
1280x768 7%
1280x800
*Not all the pixel resolutions are present! See tablets database.
Data was collected in 7-days ending on May 1, 2012

8. Screen density
Screen density is physical characteristic of the
screen technology, which determines screen
size and resolution
Screen density can be estimated using following
formula:
pixel _ width 2 + pixel _ height 2
screen _ density =
diagonal _ in _ inches
Density is expressed in db – “density
independent pixels”.

9. Physical size of dp
“pixel” is the same
42 dp height
Samsung Galaxy Ace Asus Nexus 7
320x480 px 1280x720 px
mdpi density bucket hdpi density bucket

10. 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.
Density bucket Screen density range
ldpi (low) 100 ~ 140 dp
mdpi (medium) 140 ~ 200 dp
hdpi (high) 200 ~ 280 dp
xhdpi (extra high) 280 ~ 340 dp
See phones and tablets database to find out
about the density of relevant device.

11. Devices in one density bucket
3.7”
4.2”
Nexus One
Samsung Galaxy S2
320x533 dp
320x533 dp

12. Devices in one density bucket
3” 3.5” 10.1”
Sony Xperia X8 Samsung Galaxy Ace Asus Transformer Prime
320x480 dp 320x480 dp 1280x800 dp

13. Awkward moment
Generalized size
small normal large extra large
240x320 px 320x426 dp
240x400 px 320x533 dp
240x432 px 320x576 dp
320x480 px 320x480 dp
480x640 px 240x320 dp
640x1067 dp
480x800 px 320x533 dp 480x800 dp
640x1138 dp
480x854 px 320x568 dp 480x854 dp
600x1024 px 413x683 dp 600x1024 dp
Resolutions
640x960 px 320x480 dp
720x1280 px 360x640 dp
800x1280 px 400x640 dp
1024x768 px 1024x768 dp
1280x768 px 1280x768 dp
1280x800 px 1280x800 dp
*Not all the pixel resolutions are present

14. Dp resolutions
800x1280 px
5.3” 10.1”
Samsung Galaxy Note Asus Transformer Prime
400x640 dp 800x1280 dp

15. Only 12 dp resolutions (so far)
Generalized Density Resolution*
size bucket (dp)
small ldpi 320x426 legacy phones
small hdpi 240x320 legacy phones
normal ldpi 320x533 legacy phones
320x576
normal mdpi 320x480 phones
normal hdpi 320x533 phones
320x568
normal xhdpi 320x480 new phones
360x640
400x640
large ldpi 640x1067 tweener tablets
640x1138
large mdpi 480x800 tweener tablets
480x854
600x1024
extra large mdpi 1024x768 tablets
1280x768
1280x800

16. Handling many screens

17. One application
- multiple layouts
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.

18. Orientation is just another
screen resolution.
400x640 dp in portrait 320x420 dp in portrait
320x420 in landscape
320x400 dp in portrait

19. Two useful patterns
“stretching” layout “centering” layout
Margins
320x480 dp stretches to 320x480 is centered in 400x640
400x640 dp
Plan for resizable elements and/or margins.

20. Choose “switching points”
240dp 320dp 360dp 400dp 426dp 480dp 533dp 568dp 578dp 640dp
small size portrait small size landscape normal size landscape
normal size portrait large 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 margins
c) start/stop growing element size

21. One layout and many
many adjustments
Home base
240dp 320dp 360dp 400dp 426dp 480dp 533dp 568dp 578dp 640dp
small size portrait small size landscape normal size landscape
normal size portrait large size portrait
resized elements
margins added
new layout

22. How many layout
enough?
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.

23. 2 layouts - richer UI
Home base
240dp 320dp 360dp 400dp 426dp 480dp 533dp 568dp 578dp 640dp
small size portrait small size landscape normal size landscape
normal size portrait large size portrait
resized elements & margins
new layout
Make advantage from more screen “real estate”!

24. Tablet layouts on
3.2 and after
Starting Android 3.2 it is possible to target screens using
width, height and “smallest width” (shortest screen
dimension, ignoring orientation).
Very useful!
Smallest Generalized Density Orientation
width size bucket
768 dp extra large mdpi portrait
768 dp extra large mdpi portrait
800 dp extra large mdpi portrait
1024 dp extra large mdpi landscape
1280 dp extra large mdpi landscape
1280 dp extra large mdpi landscape

25. Before 3.2: a bit more tricky!
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”.
Short side Short side Generalized Density Orientation
min max size bucket
240 dp (same) small hdpi portrait
320 dp (same) small ldpi portrait
320 dp (same) normal hdpi portrait
320 dp (same) normal ldpi portrait
320 dp (same) normal mdpi portrait
320 dp (same) small hdpi landscape
426 dp (same) small ldpi landscape
480 dp 600 dp large mdpi portrait
480 dp (same) normal mdpi landscape
533 dp 568 dp normal hdpi landscape
533 dp (same) normal ldpi landscape
640 dp 576 dp large ldpi portrait

26. Designing layout:
the process
Process for designing a layout in dp:
1. Research market and decide on the screen groups
2. Find smallest dp resolution for every screen group
3. Design for the smallest db resolution on a canvas equal
to biggest pixel resolution
4. Enhance it for bigger resolutions from the group
5. 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.

27. Random advices

28. Phone dp width is increasing
Until recently, all Android phones had 320dp width
and 5”-7” tablets sometimes had 480dp.
majority a few Galaxy Note 5”-7” tablets
Phones (short edge)
320 dp 360 dp 400 dp 480 dp
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

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

30. Rhythm
Android is using 48dp rhythm –
size which translates to physical area comfortable to touch.
Spaces between elements are recommended to be at least 8dp.

31. Standard sizes
Density bucket
ldpi mdpi hdpi xhdpi
Launcher 36x36 px 48x48 px 72x72 px 96x96 px
24x24 px 32x32 px 48x48 px 64x64 px
Action bar
(18x18) (24x24) (36x36) 48x48
12x12 px 16x16 px 24x24 px 32x32 px
Contextual
(9x9) px (12x12) (18x18) 24x24
Icons
18x18 px 24x24 px 36x36 px 48x48 px
Notification
(16x16) (22x22) (33x33) (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.

32. 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!

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

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