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
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
8. Ice rea ANDROID 4 Sandwich
10. January 2012
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
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
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
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
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
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/
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
74. http://speakerdeck.com/u/dstroii