Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Headache Relief for Android

F18bf1157e905ffa6346e42c79e15953?s=47 Hervé Mischler
November 29, 2012

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.

F18bf1157e905ffa6346e42c79e15953?s=128

Hervé Mischler

November 29, 2012
Tweet

Transcript

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

    P a ue 2012 ANDROID ANDROID ANDROID or
  2. ello ’m Hervé Mischler @Dstroii

  3. ’m a Mac fanboy

  4. SAP Electronic Medical Record

  5. ow it wor s! I need to understand

  6. Hone comb ANDROID 3

  7. None
  8. Ice rea ANDROID 4 Sandwich

  9. None
  10. January 2012

  11. None
  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
  13. None
  14. 48

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

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

  17. 48 48 48 48 48 48 48 48 48 48

    48 16 16 16 16
  18. None
  19. btn_default.9.png

  20. btn_default_pressed.9.png

  21. btn_default_focused.9.png

  22. btn_default_disabled.9.png

  23. btn_default_disabled_focused.9.png

  24. None
  25. None
  26. None
  27. creen ensity

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

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

    2x drawable-xxhdpi 3x 480dpi
  30. creen ize

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

    Android SDK
  32. Small Normal Large XLarge Range of creens 426dp x 320dp

    470dp x 320dp 640dp x 480dp 960dp x 720dp
  33. res drawable-hdpi drawable-ldpi drawable-mdpi drawable-xhdpi layout layout-large values activity_home.xml layout-xlarge

    activity_home.xml
  34. values-sw600dp values-sw720dp sw<N>dp Smallest Width

  35. sw320dp sw600dp sw720dp Target different types of devices

  36. values-w720dp values-w1024dp w<N>dp Availabl creen width

  37. values-h720dp values-h1024dp h<N>dp Availabl creen height

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

  39. creen ientation

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

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

  42. Stretch / Com ess

  43. Stac

  44. Show / Hide

  45. F a men s

  46. F a men s

  47. Action Ba

  48. Stacked Action Ba

  49. Stacked Action Ba

  50. Stacked Action Ba

  51. Stacked Action Ba

  52. 48

  53. 40

  54. 56

  55. "You can almost think of nexus 7 as a bit

    of a bootstrap to the ecosystem" Matias Duarte Senior Director, Android User Experience
  56. ig hone mall ablet

  57. evice ontrols

  58. None
  59. Keyboard Type Navigation Touch Screen nokeys qwerty twelvekey nonav dpad

    trackball wheel notouch stylus trackball finger
  60. latform ersions

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

    Cream Sandwich values-v14
  62. Don’t be afraid of using Ecli se

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

  64. None
  65. None
  66. Don’t be afraid of using Ecli se

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

    the web from Android
  68. 640dp 800dp 384dp 1280dp 1024dp Androi B eak oints

  69. Flexbox

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

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

  72. @media (pointer:coarse) { … } @media (hover) { … }

    Medi ueries level 4 Device controls
  73. None
  74. http://speakerdeck.com/u/dstroii