Demystifying Android Design

Demystifying Android The Basics

!LinkedIn UED Office Hours

June 10, 2014 !

Rob Schill

Device Fragmentation

11,868 distinct Android devices seen in 2013

Android Releases !

A (alpha) B (beta) Cupcake Donut Eclair Froyo (frozen yoghurt) Gingerbread Honeycomb Ice Cream Sandwich Jelly Bean KitKat

L?

JellyBean

KitKat

Froyo

Gingerbread

HoneycombIce Cream Sandwich

Installations

Density

Non-Retina 1x

Retina 2x

Pixel Density

mdpi 1x

hdpi 1.5x

xhdpi 2x

xxhdpi 3x

Non-Retina 1x

Retina 2x

Pixel Density

mdpi 1x

hdpi 1.5x

xhdpi 2x

xxhdpi 3x

Non-Retina 1x

Retina 2x

Pixel Density

mdpi medium density

hdpi high density

xhdpi extra high density

xxhdpi extra extra high density

Samsung Galaxy SIII HTC OneGoogle Nexus SLG Optimus S

Examples of Screen Densities

xhdpi

xxhdpi

ldpi

mdpi

hdpi

tvdpi

Distribution

Independence

Spacing & Density Independent Pixels (dp)

1 pixel = 1 dp

Typographic Scale - sp (scale independent pixels)

Text Size Micro

Text Size Small

Text Size Medium

Text Size Large

12sp

14sp

18sp

22sp

1 pixel = 1 sp

Default Typeface

Naming

File Naming

Asset Type Prefix Example

Icons ic_ ic_star.png

Launcher Icons ic_launcher ic_launcher_calendar.png

Action Bar Icons ic_menu ic_menu_archive

Status Bar Icons ic_stat_notify ic_stat_notify_msg.png

Tab Icons ic_tab ic_tab_recent.png

Dialog Icons ic_dialog ic_dialog_info.png

File Naming

State Suffix Example

Normal _normal btn_order_normal.9.png

Pressed _pressed btn_order_pressed.9.png

Focused _focused btn_order_focused.9.png

Disabled _disabled btn_order_disabled.9.png

Selected _selected btn_order_selected.9.png

Directory Structure

rating_favorite

drawable-mdpi

drawable-hdpi

drawable-xhdpi

ic_action_favorite.png

drawable-xxhdpi

drawable-mdpi

drawable-hdpi

drawable-xhdpi

ic_action_favorite.png

drawable-xxhdpi

ic_action_favorite.png

ic_action_favorite.png

ic_action_favorite.png

Notifications

Back Button

Iconography

Don’t use bottom tab bars

Don't use labeled back buttons on action bars

Don't use right-pointing carets on line items