Your SlideShare is downloading. ×
0
HEADACHE RELIEF           For   ANDROID   FOWD/ FOWA Prague 2012
Hello I’mHervé Mischler   @Dstroii
I’m a Mac fanboy
SAP Electronic Medical Record
I need to understand how it works!
Honeycomb   ANDROID 3
ANDROID 4Ice Cream Sandwich
January 2012
Dr. Martin Schultz       Ward BWARD B ROOM 6                                             Lisa Gardner                     ...
48
d i p1dp = 1px on a 160dpi screen
8         4                      1648       8   Button   16                      16     8         4
48               48               48               48               48               4816             4816               4...
btn_default.9.png
btn_default_pressed.9.png
btn_default_focused.9.png
btn_default_disabled.9.png
btn_default_disabled_focused.9.png
s i t y             D e n   r e e nS c
res  1.5 x         drawable-hdpi0.75 x          drawable-ldpi     1x         drawable-mdpi    baseline     2x         draw...
res  1.5 x         drawable-hdpi0.75 x          drawable-ldpi     1x         drawable-mdpi     2x         drawable-xhdpi  ...
S i z e   r e enSc
Over 20 screen c           rationsavailable from em ator skins in the Android SDK
Range of Screens   Small          Normal           Large           XLarge426dp x 320dp   470dp x 320dp   640dp x 480dp   9...
res      drawable-hdpi      drawable-ldpi      drawable-mdpi      drawable-xhdpi      layout      layout-large          ac...
Smallest Width    sw<N>dp     values-sw600dp     values-sw720dp
Target different types of devicessw320dp       sw600dp   sw720dp
Available screen width        w<N>dp         values-w720dp         values-w1024dp
Available screen height        h<N>dp         values-h720dp         values-h1024dp
res      drawable-hdpi      drawable-ldpi      drawable-mdpi      drawable-xhdpi      layout      layout-sw720dp          ...
t io n                ie n ta             O r   r e e nS c
Portrait port  values-port  values-port-w720dp
Landscape  land  values-land  values-land-w720dp
Stretch / Compress
Stack
Show / Hide
Fragments
Fragments
Action Bar
Stacked Action Bar
Stacked Action Bar
Stacked Action Bar
Stacked Action Bar
48
40
56
"You can almost think of nexus 7as a bit of a bootstrap to the ecosystem"              Matias Duarte          Senior Direc...
Big Phone   Small Tablet
r o l s           o n t      c e C e v iD
Keyboard Type   Navigation   Touch Screennokeys          nonav        notouchqwerty          dpad         stylustwelvekey ...
io n s              V e r s     fo r m la tP
res                           drawable-hdpi                           drawable-ldpi                           drawable-mdp...
Don’t be afraid of usingEclipse
ANDROID               DEVELOPER               TOOLShttp://developer.android.com/tools/
Don’t be afraid of usingEclipse
What the webCan learn  from Android
Android Breakpoints384dp      640dp   800dp   1024dp   1280dp
Flexbox
http://sass-lang.com/
sass   images-hdpi   images-ldpi   images-mdpi   images-xhdpi   layout   values       _colors.scss       _theme.scss      ...
Media Queries level 4        Device controls@media (pointer:coarse) { … }@media (hover) { … }
http://speakerdeck.com/u/dstroii
Responsive headhache relief for android
Responsive headhache relief for android
Responsive headhache relief for android
Responsive headhache relief for android
Responsive headhache relief for android
Responsive headhache relief for android
Responsive headhache relief for android
Responsive headhache relief for android
Responsive headhache relief for android
Responsive headhache relief for android
Responsive headhache relief for android
Responsive headhache relief for android
Upcoming SlideShare
Loading in...5
×

Responsive headhache relief for android

3,269

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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×