Responsive headhache relief for android

3,751 views

Published on

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.

Published in: Design

Responsive headhache relief for android

  1. 1. HEADACHE RELIEF For ANDROID FOWD/ FOWA Prague 2012
  2. 2. Hello I’mHervé Mischler @Dstroii
  3. 3. I’m a Mac fanboy
  4. 4. SAP Electronic Medical Record
  5. 5. I need to understand how it works!
  6. 6. Honeycomb ANDROID 3
  7. 7. ANDROID 4Ice Cream Sandwich
  8. 8. January 2012
  9. 9. Dr. Martin Schultz Ward BWARD B ROOM 6 Lisa Gardner 7/4/87 Maria Wu Angina pectoris, unspecified Severe Thoracic Trauma Ward B Room 7 - Admitted 8/11/2011 - Hosp day 9 24 Years F patient informations Erica Link CHARTS see more… Dr. Martin Schultz Severe Thoracic Trauma patient informations WARD B ROOM 6 Systolic Blood Pressure patient informationsWARD B ROOM 7 Maria Wu Temperature Severe Thoracic … Lisa Gardner patient informations patient informations Severe Thoracic Trauma patient informations DOCUMENTS see more… Erica Link Severe Thoracic… Dieter Brandt F/32 patient informations Physician Letter from GP Severe Thoracic Trauma Medical Specialist patient informations WARD B ROOM 7 Physician Referral Andrew Forster Neurology Lisa Gardner Severe Thoracic Trauma Severe Thoracic … patient informations IMAGES see more… patient informations Lisa Gardner XRays of chest with 2 images Dieter Brandt Severe Thoracic Trauma Screening Mammography Severe Thoracic… patient informations patient informations XRay:handWARD B ROOM 8 patient informations
  10. 10. 48
  11. 11. d i p1dp = 1px on a 160dpi screen
  12. 12. 8 4 1648 8 Button 16 16 8 4
  13. 13. 48 48 48 48 48 4816 4816 48 48 48 48 16 16
  14. 14. btn_default.9.png
  15. 15. btn_default_pressed.9.png
  16. 16. btn_default_focused.9.png
  17. 17. btn_default_disabled.9.png
  18. 18. btn_default_disabled_focused.9.png
  19. 19. s i t y D e n r e e nS c
  20. 20. res 1.5 x drawable-hdpi0.75 x drawable-ldpi 1x drawable-mdpi baseline 2x drawable-xhdpi
  21. 21. res 1.5 x drawable-hdpi0.75 x drawable-ldpi 1x drawable-mdpi 2x drawable-xhdpi 3x drawable-xxhdpi 480dpi
  22. 22. S i z e r e enSc
  23. 23. Over 20 screen c rationsavailable from em ator skins in the Android SDK
  24. 24. Range of Screens Small Normal Large XLarge426dp x 320dp 470dp x 320dp 640dp x 480dp 960dp x 720dp
  25. 25. res drawable-hdpi drawable-ldpi drawable-mdpi drawable-xhdpi layout layout-large activity_home.xml layout-xlarge activity_home.xml values
  26. 26. Smallest Width sw<N>dp values-sw600dp values-sw720dp
  27. 27. Target different types of devicessw320dp sw600dp sw720dp
  28. 28. Available screen width w<N>dp values-w720dp values-w1024dp
  29. 29. Available screen height h<N>dp values-h720dp values-h1024dp
  30. 30. res drawable-hdpi drawable-ldpi drawable-mdpi drawable-xhdpi layout layout-sw720dp activity_home.xml values
  31. 31. t io n ie n ta O r r e e nS c
  32. 32. Portrait port values-port values-port-w720dp
  33. 33. Landscape land values-land values-land-w720dp
  34. 34. Stretch / Compress
  35. 35. Stack
  36. 36. Show / Hide
  37. 37. Fragments
  38. 38. Fragments
  39. 39. Action Bar
  40. 40. Stacked Action Bar
  41. 41. Stacked Action Bar
  42. 42. Stacked Action Bar
  43. 43. Stacked Action Bar
  44. 44. 48
  45. 45. 40
  46. 46. 56
  47. 47. "You can almost think of nexus 7as a bit of a bootstrap to the ecosystem" Matias Duarte Senior Director, Android User Experience
  48. 48. Big Phone Small Tablet
  49. 49. r o l s o n t c e C e v iD
  50. 50. Keyboard Type Navigation Touch Screennokeys nonav notouchqwerty dpad stylustwelvekey trackball trackball wheel finger
  51. 51. io n s V e r s fo r m la tP
  52. 52. res drawable-hdpi drawable-ldpi drawable-mdpi drawable-xhdpi layout values Honeycomb values-v11Ice Cream Sandwich values-v14
  53. 53. Don’t be afraid of usingEclipse
  54. 54. ANDROID DEVELOPER TOOLShttp://developer.android.com/tools/
  55. 55. Don’t be afraid of usingEclipse
  56. 56. What the webCan learn from Android
  57. 57. Android Breakpoints384dp 640dp 800dp 1024dp 1280dp
  58. 58. Flexbox
  59. 59. http://sass-lang.com/
  60. 60. sass images-hdpi images-ldpi images-mdpi images-xhdpi layout values _colors.scss _theme.scss _dimens.scss
  61. 61. Media Queries level 4 Device controls@media (pointer:coarse) { … }@media (hover) { … }
  62. 62. http://speakerdeck.com/u/dstroii

×