Fast track to Android design

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 devicesWhy does it matters? 56% smartphones world wide run Android 42% smartphones run Android in US

Concepts of the platform

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

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 tabletsResolution 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

Phone* screens Generalized size Mostly Legacy small normal 240x320 2.3% 240x400 240x423 0.7% 320x480 26.2% 480x640 2% The trendResolution 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

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

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

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

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.

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

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

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 dpResolutions 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

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

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

Handling many screens

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.

Orientation is just anotherscreen resolution. 400x640 dp in portrait 320x420 dp in portrait 320x420 in landscape 320x400 dp in portrait

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.

Choose “switching points” 240dp 320dp 360dp 400dp 426dp 480dp 533dp 568dp 578dp 640dpsmall 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

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

How many layoutenough? 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.

2 layouts - richer UI Home base 240dp 320dp 360dp 400dp 426dp 480dp 533dp 568dp 578dp 640dpsmall 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”!

Tablet layouts on3.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

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

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.

Random advices

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” tabletsPhones (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

Simple scaling or SVGisn’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

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.

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

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

https://pulse.neudesic.com	134
https://twitter.com	22
http://bundlr.com	12
http://www.linkedin.com	4
http://www.verious.com	1
http://www.docseek.net	1

Fast track to Android design

by Maksim Golivkin on Jul 07, 2012

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 174

Statistics

Fast track to Android design Presentation Transcript