This talk discusses responsive mobile design for Android applications. It emphasizes starting with the same content and hierarchy across different screen sizes and adapting the layout through switching points and margin points. The key is allowing the same content and functionality while making optimal use of screen space through techniques like synchronized scrolling, scroll-to-snap, and dynamically adjusting font sizes and dialogs. Responsive design ensures a quality experience across the wide variety of Android devices.

1. Responsive mobile
design
Kirill Grouchnikov
Android, Google Inc.

2. background
• Android 3.0 - 02/2011
• Android 3.2 - 07/2011
• Android 4.0 - 11/2011
• Market 3.0 - 07/2011
• Google Play 3.5 - 03/2012

3. this talk is not about
Layouts 101
• FrameLayout
• LinearLayout
• RelativeLayout
• ...

4. and not even about
Layouts 202
• android:layout_alignBaseline
• android:layout_alignWithParentIfMissing
• android:fillViewport
• ...

5. this talk is about
effective use of screen estate
for displaying your content

6. examples

7. app details page

8. app details page
locked
scrolling

9. app details page

10. app details page
locked
scroll-to-snap
scrolling

11. my apps + app details
two screens

12. my apps + app details
combined view

13. my apps + app details
locked
scrolling
master details

14. same content,
same hierarchy
adapting to context

15. responsive mobile
design

16. http://cognition.happycog.com/
“desktop” version “mobile” version

17. http://cognition.happycog.com/

18. http://owltastic.com

19. http://colly.com

20. http://stephencaver.com

21. same content*,
same hierarchy
adapting to context
* the first two sites above omit some content under small widths

22. what about mobile*?
* given the context of the talk, “mobile” means “native Android”

23. device variety
Experia Pro 3.7” Flyer 7” Sony Tablet S 9.4”
Archos 2.8” Galaxy Note 5.2” Galaxy Tab 8.9”

24. device orientation
1024*600 600*1024

25. canvas-based apps
“show more” of the infinite canvas

26. text-based hierarchies
reflow or combine

27. Android resource system
http://developer.android.com/guide/topics/resources/providing-resources.html
physical size of the device
display density

28. ~ CSS3 media queries
http://www.w3.org/TR/css3-mediaqueries/
• width, height, device-width, device-height
• orientation, aspect-ratio
• resolution

29. main difference
width, height, device-width, device-height
CSS pixels ~ dip
ems ~ sp

30. new resource selectors
in Android 3.2
http://developer.android.com/guide/practices/screens_support.html
• width dp. For example, -w600p
• height dp. For example, -h600dp
• smallest width dp*. For example, -sw600dp
* “survives” device orientation

31. granularity
of control

32. start from content

33. no more “tablet-
optimized” layouts

34. what separates a tablet
from a phone*?
* “I know it when i see it” is not an answer supported by aapt

35. same content,
same hierarchy
adapting to context

36. switching point
“desktop” version “mobile” version
@media screen and (max-width: 480px)

37. switching point
“phone” version “tablet” version

38. switching point
how much space do i need for a two-column layout?

39. switching point
layout/myapps.xml
layout-w800dp/myapps.xml

40. multiple switching points
http://hicksdesign.co.uk
4 2 1

41. multiple switching points
layout/myapps.xml
layout-w600dp/myapps.xml
layout-w1000dp*/myapps.xml
* onwards to -w10000dp on the Android JumboTron closest to you

42. different switching points
layout-w800dp/myapps.xml layout-w1000dp/details.xml
* From older releases of Android Market

43. unified switching points
layout-w800dp/myapps.xml layout-w800dp/details.xml
* Unified in Google Play 3.5

44. switching point
how to preserve content hierarchy?
where do content blocks go?
what is locked and what scrolls?

45. switching point
why show permissions?

46. margin point

47. margin point
what is the optimal “consuming” experience?

48. margin point
what is the optimal “consuming” experience?

49. margin point
Xoom: 1280*800dp
switch point = 800dp
margin point = 1000dp

50. does everything go
into -wNNNdp?

51. purchase dialog
sparse content - use DialogWhenLarge

52. purchase dialog
theme defined in values-sw600dp

53. font sizes
same sp values look too small
we use larger values on bigger screens

54. font sizes
sizes defined in values-sw600dp

55. recap
Experia Pro 3.7” Flyer 7” Sony Tablet S 9.4”
Archos 2.8” Galaxy Note 5.2” Galaxy Tab 8.9”

56. recap
1 2 3 4
switch point switch point margin point
600dp 800dp 1000dp
expand
fixed

57. synchronized scrolling

58. synchronized scrolling*
* follow the light blue button

59. synchronized scrolling
locked
scroll-to-snap
scrolling

60. synchronized scrolling
scroll-to-snap
scrolling

61. responsive mobile
design

62. effective use of screen estate
for displaying your content

63. same content,
same hierarchy
adapting to context

64. Q&A
• gplus.to/kirillcool
• pushing-pixels.org
• kirillcool@yahoo.com
• android-developers.blogspot.com