Responsive Headache Relief for Android

Android comes in a multitude of screen forms, sizes and densities which can be a real headache for many mobile app designers. To help alleviate this pain, the Android platform contains a potent cocktail of tools in the framework which are designed to provide targeted relief. In this session you will learn how to administer a swift dose of new responsive design concepts into Android applications.

Transcript

1. HEADACHE RELIEF
   HEADACHE RELIEF
   / P a ue 2012
   / P a ue 2012
   ANDROID
   ANDROID
   ANDROID
   or
   

   View Slide

2. ello ’m
   Hervé Mischler
   @Dstroii
   

   View Slide

3. ’m a Mac fanboy
   

   View Slide

4. SAP Electronic Medical Record
   

   View Slide

5. ow it wor s!
   I need to understand
   

   View Slide

6. Hone comb
   ANDROID 3
   

   View Slide

7. View Slide

8. Ice rea
   ANDROID 4
   Sandwich
   

   View Slide

9. View Slide

10. January
    2012
    

    View Slide

11. View Slide

12. Dr. Martin Schultz Ward B
    WARD B ROOM 6
    Maria Wu
    Severe Thoracic Trauma
    patient informations
    Erica Link
    Severe Thoracic Trauma
    patient informations
    WARD B ROOM 8
    WARD B ROOM 7
    Lisa Gardner
    Severe Thoracic Trauma
    patient informations
    Dieter Brandt
    Severe Thoracic Trauma
    patient informations
    Andrew Forster
    Severe Thoracic Trauma
    patient informations
    Lisa Gardner
    Severe Thoracic Trauma
    patient informations
    F/32
    WARD B ROOM 6
    Maria Wu
    Severe Thoracic …
    patient informations
    Erica Link
    Severe Thoracic…
    patient informations
    WARD B ROOM 7
    Lisa Gardner
    Severe Thoracic …
    patient informations
    Dieter Brandt
    Severe Thoracic…
    patient informations
    Dr. Martin Schultz
    Systolic Blood Pressure
    patient informations
    see more…
    Temperature
    patient informations
    Lisa Gardner
    Angina pectoris, unspecified
    Ward B Room 7 - Admitted 8/11/2011 - Hosp day 9
    7/4/87
    24 Years F
    CHARTS
    Physician Letter from GP
    Medical Specialist
    see more…
    Physician Referral
    Neurology
    DOCUMENTS
    XRays of chest with 2 images
    Screening Mammography
    see more…
    XRay:hand
    patient informations
    IMAGES
    

    View Slide

13. View Slide

14. View Slide

15. 1dp = 1px on a 160dpi screen
    dip
    

    View Slide

16. 16
    4
    8
    8
    8
    48
    4
    16
    16
    Button
    

    View Slide

17. View Slide

18. View Slide

19. btn_default.9.png
    

    View Slide

20. btn_default_pressed.9.png
    

    View Slide

21. btn_default_focused.9.png
    

    View Slide

22. btn_default_disabled.9.png
    

    View Slide

23. btn_default_disabled_focused.9.png
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. creen
    ensity
    

    View Slide

28. res
    drawable-hdpi
    drawable-ldpi
    drawable-mdpi
    drawable-xhdpi
    1.5 x
    0.75 x
    1x
    2x
    baseline
    

    View Slide

29. res
    drawable-hdpi
    drawable-ldpi
    drawable-mdpi
    drawable-xhdpi
    1.5 x
    0.75 x
    1x
    2x
    drawable-xxhdpi
    3x 480dpi
    

    View Slide

30. creen
    ize
    

    View Slide

31. Over 20 screen c54¿-;rations
    available from em;2ator skins in the Android SDK
    

    View Slide

32. Small Normal Large XLarge
    Range of creens
    426dp x 320dp 470dp x 320dp 640dp x 480dp 960dp x 720dp
    

    View Slide

33. res
    drawable-hdpi
    drawable-ldpi
    drawable-mdpi
    drawable-xhdpi
    layout
    layout-large
    values
    activity_home.xml
    layout-xlarge
    activity_home.xml
    

    View Slide

34. values-sw600dp
    values-sw720dp
    swdp
    Smallest Width
    

    View Slide

35. sw320dp sw600dp sw720dp
    Target different types of devices
    

    View Slide

36. values-w720dp
    values-w1024dp
    wdp
    Availabl creen width
    

    View Slide

37. values-h720dp
    values-h1024dp
    hdp
    Availabl creen height
    

    View Slide

38. res
    drawable-hdpi
    drawable-ldpi
    drawable-mdpi
    drawable-xhdpi
    layout
    layout-sw720dp
    values
    activity_home.xml
    

    View Slide

39. creen
    ientation
    

    View Slide

40. values-port
    values-port-w720dp
    port
    Portrait
    

    View Slide

41. values-land
    values-land-w720dp
    land
    Landscape
    

    View Slide

42. Stretch / Com ess
    

    View Slide

43. Stac
    

    View Slide

44. Show / Hide
    

    View Slide

45. F a men s
    

    View Slide

46. F a men s
    

    View Slide

47. Action Ba
    

    View Slide

48. Stacked Action Ba
    

    View Slide

49. Stacked Action Ba
    

    View Slide

50. Stacked Action Ba
    

    View Slide

51. Stacked Action Ba
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. "You can almost think of nexus 7
    as a bit of a bootstrap to the ecosystem"
    Matias Duarte
    Senior Director, Android User Experience
    

    View Slide

56. ig hone mall ablet
    

    View Slide

57. evice ontrols
    

    View Slide

58. View Slide

59. Keyboard Type Navigation Touch Screen
    nokeys
    qwerty
    twelvekey
    nonav
    dpad
    trackball
    wheel
    notouch
    stylus
    trackball
    finger
    

    View Slide

60. latform
    ersions
    

    View Slide

61. res
    drawable-hdpi
    drawable-ldpi
    drawable-mdpi
    drawable-xhdpi
    layout
    values
    values-v11
    Honeycomb
    Ice Cream Sandwich values-v14
    

    View Slide

62. Don’t be afraid of using
    Ecli se
    

    View Slide

63. ANDROID
    DEVELOPER
    TOOLS
    http://developer.android.com/tools/
    

    View Slide

64. View Slide

65. View Slide

66. Don’t be afraid of using
    Ecli se
    

    View Slide

67. What the web
    Can lear
    Can lear
    from Android
    What the web
    from Android
    

    View Slide

68. 640dp 800dp
    384dp 1280dp
    1024dp
    Androi B eak oints
    

    View Slide

69. Flexbox
    

    View Slide

70. http://sass-lang.com/
    

    View Slide

71. sass
    images-hdpi
    images-ldpi
    images-mdpi
    images-xhdpi
    layout
    values
    _colors.scss
    _theme.scss
    _dimens.scss
    

    View Slide

72. @media (pointer:coarse) { … }
    @media (hover) { … }
    Medi ueries level 4
    Device controls
    

    View Slide

73. View Slide

74. http://speakerdeck.com/u/dstroii
    

    View Slide