Demystifying Android Design
-
Upload
rob-schill -
Category
Design
-
view
83 -
download
4
Transcript of 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