Adaptive  Design   For  Android

Ni  Yan  (User  Experience  and  Interface  Designer)  Jingran  Wang  (Android  Developer)

Part  1  Get  Started

Before  Start

• Better  communications  between  developers  and  designers  about  Density-­‐Independent  Pixel

http://www.google.com/design/spec/layout/units-­‐measurements.html

iOS

• Fragmentation  – Use  dp  in  design  – Layout  – Design  animation  adaptive  to  different  versions

Android

• Less  Fragmentation  – Use  px  in  design  – Auto  Layout  (Recommend)  – Better  performance  for  animations

iOS

• Navigation  UI  – Top  Action  Bar  – No  Bottom  Tab  Bar  (Recommend)  

– Navigational  Drawer  

Android

• Navigation  UI  – Navigation  Bar  – Bottom  Tab  Bar  are  common  

– Sometimes  have  drawer

http://developer.android.com/design/patterns/pure-­‐android.html

Pure  Android

Design  Stencils

• Android • iOS

Work  Flow

Design  Sketch

Mockup  Prototype

Evaluate

• Collect  design  Requirements    

• Persona  &  Scenarios  • Sketch  a  lot  • Balsamiq

• HTML,  CSS,  JS,  etc.  • AI,  PS,  AE,  Sketch,  etc  • Interaction  map  • Use  flows  • Axture,  InVision,  Pixate,  

Keynote,  etc.    

• User  Feedback  • Design  review  meetings:  

managers,  developers,marketing  copy  review

Part  2  Mockup

Mockup  Design

• Choose  a  type  of  device  for  phone,  small  tablet,  and  bigger  tablet  to  start  with.

• Start  design  with  mdpi  (1dp  =  1px)  or  xhdpi  (1dp  =  2px)

800*1280px 600*960px 384*742px

http://www.emirweb.com/ScreenDeviceStatistics.php

Android  Device  Screen  Sizes

ldpi  1dp  =  0.75px  

mdpi  1dp  =  1px

hdpi  1dp  =  1.5px

xhdpi  1dp  =  2px

xxhdpi  1dp  =  3px

xxxhdpi  1dp  =  4px

Phone 36*36 48*48 72*72 96*96 144*144 192*192

Small  tablet 48*48 64*64 96*96 128*128 192*192 256*256

Big  tablet 64*64 72*72 108*108 144*144 216*216 288*288

Table  of  Image  Sizes

• iOS  -­‐  pdf  images,  @1x  

• Android  -­‐  png  images  (Could  generate  from  pdf  files)

Table  of  Image  Sizes

Don’t  Forget  mdpi

• Consider  having  specific  icons  for  dpi  instead  of  scaling  down  xxhdpi  icons

Android  and  PDF

• PdfRenderer  in  API  21  (5.0)  • Various  PDF  libraries  for  rendering  pages  • Difficult  to  use  for  ImageView

Android  and  SVG

• Currently  no  official  support  for  SVG  • libsvg-­‐android  (GPL  v3)  • svg-­‐android  (Apache  2.0)  (2011)  • Github  forks  of  svg-­‐android  • (Might  need  software  rendering  layer)

MipMap

• Use  for  launcher  icons  • Density-­‐independent.  • Only  useful  if  you  use  density  stripping(APK  splitting)  

• android{splits{density{enable  true}}}

Portrait  and  Landscape

Different  Screen  Sizes

Fluid,  Flexible,  Scale

A  Few  More  Things…

• Scrolling  area  for  different  screens  sizes  • Action  bar  size  will  change  • Really  small  phones  • Different  experience  in  portrait  &  landscape

Part  3  Spec    -­‐  Layout  Specification

Spec

• Based  on  top,  middle  or  bottom

Image  source:  Android  Design  In  Action  Jul  30,  2013

Spec

• Specify  layout  Based  on  top,  middle  or  bottom  • Better  work  on  different  screen  sizes  at  once.

Color  Palette  Library

Android  Design  Resources

• Android  Developers’  site  • Material  Design  • Android  Design  in  Action  • GDC  Videos  /  Design  • Google+  Community

Learn  from  iOS

• WWDC  videos  • iOS  Human  Interface  Guidelines

Other  Design  Resources

• Dribbble  • Behance

• Pinterest  • Tumblr

• Panda  Extension  • Material  Up

Questions?

@niyandesign  https://plus.google.com/+JingranWang87  

http://www.slideshare.net/niyan524/adaptive-­‐47948494

Thank  you!