Understanding basic principle of designing for Android. It's 2015 presentation so, for recent documentation please check, Material design or android developer for better UX design. I hope this slide can make you get better understanding before designing product at Android platform.

1. Design
Designing for all
Android Screen
By: Arnold Saputra
Lead UX designer at Kudo
Presented at Kudoplex, Jakarta, 2015

2. Design
Android is Open Source
with more than 85%
smartphone market share

3. Design
Android Screen fragmentation

4. Design
One screen: Three size
Motorola X 2014
1. Physical screen size
2. Display resolution
3. Pixel Density

5. Design
Physical screen size
The size of a screen is usually
described by the length of its
diagonal, which is the distance
between opposite corners.

6. Design
Display resolution
The number of distinct pixels in
each dimension that can be
displayed.

7. Design
Pixel Density
How many pixel in one inch. More
pixel, more crisp the images. PPI
(pixel per inch).

8. Design
How font rendered in different
pixel density screens

9. Design
The problem is:
• You can’t design based on pixel
• Different screen, different the pixel
50x50 px
50x50 px
50x50 px
165 ppi screen 234 ppi screen 318 ppi screen

10. Design
So, how can I make my design
look good in all Android device?

11. Design
DP: density-independent pixel
Hard explanation:
a physical unit of measurement based on a
co-ordinate system held by a computer and
represents an abstraction of a pixel for use by
an application that an underlying system
then converts to physical pixels.
Easy explanation
Magical pixel that displayed your design same size in all
devices.

12. Design
1 DP = 1 px
In Mdpi (160 ppi) screen.

13. Design
Dpi in Android Device
Samsung Galaxy Tab 2 10.1
149 ppi
Mdpi
1x
Nexus S
233 ppi
Hdpi
1.5x
Nexus 4
318ppi
Xhdpi
2x
Nexus 5
445ppi
Xxhdpi
3x
Nexus 6
493ppi
Xxxhdpi
4x

14. Design
Dpi in Android Device

15. Design
DP in Actions
Samsung Galaxy Tab 2 10.1
149 ppi
Mdpi
Nexus 4
318ppi
Xhdpi

16. Design
DP in Actions
Samsung Galaxy Tab 2 10.1
149 ppi
Mdpi
Nexus 4
318ppi
Xhdpi

17. Design
How to measure Dp in Screen?
• DP= Resolution / dpi
• Ex: 1280x720 / Xhdpi (2) = 640x360 dp
• 640 x 360 is a physical size pixel in screen

18. Design
How to measure Dp in Screen? example
10 inch tablet
Xhdpi
1280 x 720 px
1280
x
720px
4,7 inch phone
Xxxhdpi

19. Design
How to measure Dp in Screen? example
10 inch tablet
1280/2=640
720/2=360
640 x 360 dp
320
x
180 dp
4,7 inch phone
1280/4=320
720/4=180

20. Design
Human finger = 50dp

21. Design
Preparing icon for all Dpi
50x50 px 75x75 px 100x100 px 150x150 px 200x200 px

22. Design
Preparing button for all Dpi

23. Design
Basic UI Measurement
Status Bar: 24 dp (height)
Tool Bar: 56 dp
Space: 8 dp
Navigation bar: 48 dp

24. Design
Fonts & Typograhy
• 1 px = 1sp
• Large : Roboto Black 30 sp
• Med : Roboto Black 24 Sp
• Small: Roboto Light 15sp

25. Design
Thank You!
By: Arnold Saputra
Lead UX designer at Kudo | Presented at Kudoplex, Jakarta, 2015