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.

1. HEADACHE RELIEF
For
ANDROID
FOWD/ FOWA Prague 2012

2. Hello I’m
Hervé 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

8. ANDROID 4
Ice Cream
Sandwich

10. January
2012

12. Dr. Martin Schultz Ward B
WARD 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 informations
WARD 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:hand
WARD B ROOM 8 patient informations

14. 48

15. d i p
1dp = 1px on a 160dpi screen

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

17. 48
48
48
48
48
48
16 48
16
48
48
48
48
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. s i t y
D e n
r e e n
S c

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

29. res
1.5 x drawable-hdpi
0.75 x drawable-ldpi
1x drawable-mdpi
2x drawable-xhdpi
3x drawable-xxhdpi 480dpi

30. S i z e
r e en
Sc

31. Over 20 screen c rations
available from em ator skins in the Android SDK

32. Range of Screens
Small Normal Large XLarge
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
activity_home.xml
layout-xlarge
activity_home.xml
values

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

35. Target different types of devices
sw320dp sw600dp sw720dp

36. Available screen width
w<N>dp
values-w720dp
values-w1024dp

37. Available screen height
h<N>dp
values-h720dp
values-h1024dp

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

39. t io n
ie n ta
O r
r e e n
S c

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

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

42. Stretch / Compress

43. Stack

44. Show / Hide

45. Fragments

46. Fragments

47. Action Bar

48. Stacked Action Bar

49. Stacked Action Bar

50. Stacked Action Bar

51. Stacked Action Bar

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. Big Phone Small Tablet

57. r o l s
o n t
c e C
e v i
D

59. Keyboard Type Navigation Touch Screen
nokeys nonav notouch
qwerty dpad stylus
twelvekey trackball trackball
wheel finger

60. io n s
V e r s
fo r m
la t
P

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

62. Don’t be afraid of using
Eclipse

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

66. Don’t be afraid of using
Eclipse

67. What the web
Can learn
from Android

68. Android Breakpoints
384dp 640dp 800dp 1024dp 1280dp

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 Queries level 4
Device controls
@media (pointer:coarse) { … }
@media (hover) { … }

74. http://speakerdeck.com/u/dstroii