Your SlideShare is downloading. ×
Responsive headhache relief for android
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive headhache relief for android

3,228
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 …

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

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,228
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
37
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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