responsive headhache relief for android
DESCRIPTION
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
HEADACHE RELIEFHEADACHE RELIEF
!"#$/ !"#% P&a'ue 2012!"#$/ !"#% P&a'ue 2012
ANDROIDANDROIDANDROID
!or
!ello "’m Hervé Mischler
@Dstroii
!’m a Mac fanboy
SAP Electronic Medical Record
!ow it wor"s!I need to understand
Hone!combANDROID 3
Ice !rea"ANDROID 4
Sandwich
January2012
Dr. Martin Schultz Ward B
WARD B ROOM 6
Maria WuSevere Thoracic Traumapatient informations
Erica LinkSevere Thoracic Traumapatient informations
WARD B ROOM 8
WARD B ROOM 7
Lisa GardnerSevere Thoracic Traumapatient informations
Dieter BrandtSevere Thoracic Traumapatient informations
Andrew ForsterSevere Thoracic Traumapatient informations
Lisa GardnerSevere Thoracic Traumapatient informations
F/32
WARD B ROOM 6
Maria WuSevere Thoracic …patient informations
Erica LinkSevere Thoracic…patient informations
WARD B ROOM 7
Lisa GardnerSevere Thoracic …patient informations
Dieter BrandtSevere Thoracic…patient informations
Dr. Martin Schultz
Systolic Blood Pressurepatient informations
see more…
Temperaturepatient informations
Lisa GardnerAngina pectoris, unspecifiedWard B Room 7 - Admitted 8/11/2011 - Hosp day 9
7/4/87
24 Years F
CHARTS
Physician Letter from GPMedical Specialist
see more…
Physician ReferralNeurology
DOCUMENTS
XRays of chest with 2 imagesScreening Mammography
see more…
XRay:handpatient informations
IMAGES
48
1dp = 1px on a 160dpi screen
dip
16 4 8
8
8 48
4
16 16
Button
48 48 48 48 48 48 48 48 48 48 48
16 16
16 16
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
!creen "ensity
res
drawable-hdpidrawable-ldpidrawable-mdpidrawable-xhdpi
1.5 x0.75 x
1x2x
baseline
res
drawable-hdpidrawable-ldpidrawable-mdpidrawable-xhdpi
1.5 x0.75 x
1x2x
drawable-xxhdpi3x 480dpi
!creen !ize
Over 20 screen c54¿-;rations
available from em;2ator skins in the Android SDK
Small Normal Large XLarge
Range of !creens
426dp x 320dp 470dp x 320dp 640dp x 480dp 960dp x 720dp
res
drawable-hdpidrawable-ldpidrawable-mdpidrawable-xhdpilayoutlayout-large
values
activity_home.xmllayout-xlarge
activity_home.xml
values-sw600dp
values-sw720dp
sw<N>dp
Smallest Width
sw320dp sw600dp sw720dp
Target different types of devices
values-w720dp
values-w1024dp
w<N>dp
Availabl! "creen width
values-h720dp
values-h1024dp
h<N>dp
Availabl! "creen height
res
drawable-hdpidrawable-ldpidrawable-mdpidrawable-xhdpilayoutlayout-sw720dp
values
activity_home.xml
!creen "#ientation
values-port
values-port-w720dp
port
Portrait
values-land
values-land-w720dp
land
Landscape
Stretch / Com!"ess
Stac!
Show / Hide
F!a"men#s
F!a"men#s
Action Ba!
Stacked Action Ba!
Stacked Action Ba!
Stacked Action Ba!
Stacked Action Ba!
48
40
56
"You can almost think of nexus 7 as a bit of a bootstrap to the ecosystem"
Matias DuarteSenior Director, Android User Experience
!ig "hone #mall $ablet
!evice "ontrols
Keyboard Type Navigation Touch Screennokeysqwertytwelvekey
nonavdpadtrackballwheel
notouchstylustrackballfinger
!latform "ersions
res
drawable-hdpi
drawable-ldpi
drawable-mdpi
drawable-xhdpi
layout
values
values-v11Honeycomb
Ice Cream Sandwich values-v14
Don’t be afraid of using
Ecli!se
ANDROIDDEVELOPERTOOLS
http://developer.android.com/tools/
Don’t be afraid of using
Ecli!se
What the web
Can lear!Can lear!from Android
What the web
from Android
640dp 800dp384dp 1280dp1024dp
Androi! B"eak#oints
Flexbox
http://sass-lang.com/
sass
images-hdpiimages-ldpiimages-mdpiimages-xhdpilayoutvalues
_colors.scss
_theme.scss
_dimens.scss
@media (pointer:coarse) { … }
@media (hover) { … }
Medi! "ueries level 4Device controls
http://speakerdeck.com/u/dstroii