Coding  for  Different  Android  Screen  sizes  and  Density  

By  Robin  Srivastava  

Intended  Audience  

•  Developers  of  Android  apps  •  Any  technological  enthusiast  •  Any  enthusiast  

Ques?ons  Answered    

•  What  to  ask  from  a  graphic  designer?  •  What  to  do  once  the  graphic  designer  gives  the  assets?  

•  How  to  create  screen  layouts  which  are  independent  of  screen-­‐size  and  screen-­‐density?  

•  What  screen-­‐sizes  and  densi?es  are  available?  •  Your  ques?ons  

Why  is  this  so  important?  

Some  stats  first  

Stat  1  –  Android  OS  Distribu?on  

Stat  2  –  Screen  Size  and  Density  

Stat  2  –  Screen  Size  and  Density  (contd..)  

Back  to  the  previous  ques?on  

Why  is  it  so  important?  

•  Simple  mathema?cs  would  suggest  that  we  have  4  *  4  =  16  different  varia?ons  of  android  screen  size  and  density.    

•  Each  of  these  sizes  and  density  comes  in  a  range,  so  theore?cally  speaking  its  infinite  

•  Prac?cally,  out  of  16  there  are  only  12  varia?ons  to  consider  with  a  very  reasonable  devia?on  

12  screen  varia?ons?  

•  Is  it  low  or  high?  •  Android  gives  an  op?on  to  have  different  folders  for  different  varia?ons.  

•  If  we  s?ck  to  it  religiously,  we  are  talking  about  having  12  set  of  graphics,  each  with  different  specs  

12  screen  varia?ons?  

•  Is  it  low  or  high?  •  Android  gives  an  op?on  to  have  different  folders  for  different  varia?ons.  

•  If  we  s?ck  to  it  religiously,  we  are  talking  about  having  12  set  of  graphics,  each  with  different  specs  

A  small  change  of  direc?on  or  shadow  in  an  arrow  icon  will  require  changing/crea?ng  11  more  assets  

What  we  didn’t  consider  in  the  previous  slides  

•  Large  TVs  •  Small  watches  

What  to  ask  from  a  graphic  designer?  

•  One  word  answer  –  graphical  assets  J  

What  to  ask  from  a  graphic  designer?  

•  One  word  answer  –  graphical  assets  J  •  But  the  real  ques?on  is,  do  we  really  need  that  asset  we  are  asking  for?  

Some  ques?ons  to  ask  yourself  before  asking  for  assets  

•  Do  I  really  need  the  assets  to  display  a  kind  dialog  box?  

•  Those  fancy  texts,  do  I  really  need  an  image  for  it?  

•  Those  colored  lines  being  used,  do  I  really  need  them  as  a  separate  image?  

•  So  on  and  so  forth  

Giving  Rich  Look  Using  Views  

Color  code  #33B5E5  Font  Name  –  Roboto  Color  Code  -­‐  #33B5E5  

If  you  really  need  an  asset  

•  Is  it  some  basic  shape  or  intricate  image?  –  If  its  shape  try  to  use  ShapeDrawable  (demo),  else  

•  Take  the  PNG  •  Convert  it  into  9-­‐patch  

• hfp://goo.gl/hVr6  

9-­‐patch  Image  

•  Stretchable  bitmap  •  Define  the  area  in  which  the  text  appears  

9-­‐patch  

•  How  to  use  – Tool  demo  – App  demo  

When  9-­‐patch  might  not  work  

•  Images  with  text  in  it  and  the  requirement  is  stretching  of  text  too  (without  making  it  look  bad)  

•  Images  which  requires  very  fine  shadowing  and  gradients  

•  Characters  and  cartoons  with  intricate  designs  

When  9-­‐patch  might  not  work  (contd…)  

•  Need  different  images  for  different  resolu?on  

Providing  Alternate  Resources  •  <resource-­‐name>  -­‐  <qualifier>  

•  Famous  ones  –  drawable-­‐hdpi  –  drawable-­‐mdpi  

•  Some  more    –  drawable-­‐fr-­‐hdpi  –  drawable-­‐sw600dp-­‐hdpi  –  drawable-­‐land  –  drawable-­‐long  –  drawable-­‐land-­‐v8  –  etc  

For  the  en?re  list  

Open  developers’  manual  for  providing  resources  

How  to  create  screen  size  and  density  independent  layout?  

•  First,  let’s  check  out  various  common  screen  sizes  and  densi?es  

Some  terminologies  we  will  use  •  Screen  density  – Number  of  dots  per  inch  of  the  screen.  A  medium  density  device  has  an  average  of  160  dots-­‐per-­‐inch  

•  Resolu?on  –  Total  number  of  physical  pixels  

•  Density  independent  pixel  (dp  or  dip)  –  The  density-­‐independent  pixel  is  equivalent  to  one  physical  pixel  on  a  160  dpi  screen,  which  is  the  baseline  density  assumed  by  the  system  for  a  “medium”  density  screen  

–  px  =  dp  *  (dpi  /  160)  

Screen  Sizes  and  Density  Ranges  

Resolu?ons  in  the  form  of  DP  

•  Xlarge  –  960dp  x  720dp  •  Large  –  640dp  x  480dp  •  Normal  –  470dp  x  320dp  •  Small  –  426dp  x  320dp  

Back  to  the  ques?on  

•  How  to  create  layouts  which  are  independent  of  screen  sizes  and  densi?es?  

 

DEMO  

Some  Quick  Tips  

•  DO  NOT  use  px  as  the  unit  of  text  sizes  and  views  

•  Use  dp  while  giving  the  margins,  padding  or  the  dimension  of  a  view  

•  Give  the  text  size  is  sp  

Some  Quick  Tips  

Header  

Footer  

Content   Use    Linear  Layout  

Some  Quick  Tips  

When  alignment  rela?ve  to  other  components  mafer  –  use  Rela?ve  Layout    It  is  the  most  general  layout  which  can  be  used  for  laying  out  components  with  great  flexibility  

Some  Quick  Tips  

Layers    Frame  Layout    

E-­‐mail  –  robin@paradigmcrea?ves.com