fast track to android design
DESCRIPTION
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.TRANSCRIPT
![Page 1: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/1.jpg)
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
![Page 2: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/2.jpg)
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?
![Page 3: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/3.jpg)
Concepts of the platform
![Page 4: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/4.jpg)
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
![Page 5: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/5.jpg)
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
![Page 6: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/6.jpg)
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
![Page 7: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/7.jpg)
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
![Page 8: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/8.jpg)
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”.
![Page 9: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/9.jpg)
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
![Page 10: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/10.jpg)
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
![Page 11: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/11.jpg)
3.7”Nexus One320x533 dp
4.2”Samsung Galaxy S2
320x533 dp
Devices in one density bucket
![Page 12: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/12.jpg)
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
![Page 13: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/13.jpg)
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
![Page 14: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/14.jpg)
Dp resolutions
5.3”Samsung Galaxy Note
400x640 dp
10.1”Asus Transformer Prime
800x1280 dp
800x1280 px
![Page 15: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/15.jpg)
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
![Page 16: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/16.jpg)
Handling many screens
![Page 17: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/17.jpg)
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
![Page 18: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/18.jpg)
320x420 in landscape
400x640 dp in portrait
320x400 dp in portrait
320x420 dp in portrait
Orientation is just another screen resolution.
![Page 19: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/19.jpg)
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
![Page 20: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/20.jpg)
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”
![Page 21: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/21.jpg)
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
![Page 22: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/22.jpg)
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?
![Page 23: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/23.jpg)
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”!
![Page 24: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/24.jpg)
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
![Page 25: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/25.jpg)
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
![Page 26: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/26.jpg)
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
![Page 27: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/27.jpg)
Random advices
![Page 28: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/28.jpg)
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
![Page 29: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/29.jpg)
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
![Page 30: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/30.jpg)
RhythmAndroid is using 48dp rhythm – size which translates to physical area comfortable to touch.
Spaces between elements are recommended to be at least 8dp.
![Page 31: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/31.jpg)
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.
![Page 32: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/32.jpg)
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!
![Page 33: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/33.jpg)
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.
![Page 34: Fast track to Android design](https://reader031.vdocuments.net/reader031/viewer/2022020715/54c82d794a795927518b457c/html5/thumbnails/34.jpg)
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? [email protected]