1 mobile computing handling different display sizes copyright 2015 by janson industries
TRANSCRIPT
1
Mobile Computing
Handling Different Display Sizes
Copyright 2015 by Janson Industries
Copyright 2015 by Janson Industries2
Handling Many Display Sizes▀ Two approaches
Single layout
Multiple layouts
▀ Single layout means only one layout has to be maintained
▀ Can't always do it with one layout
One layout for watch and tablet?
Copyright 2015 by Janson Industries3
Single Layout Strategy▀ Don't use a layout with absolute
positioning
i.e. no specific x & y coordinates► AbsoluteLayout
▀ Don't use specific height and width properties
When not possible, use dp (density independent) values
Use sp (scale-independent pixel) for text size values
Copyright 2015 by Janson Industries4
Single Layout Strategy
▀ Test on all possible devices
▀ If physical devices not available, use templates to create appropriate virtual devices
Copyright 2015 by Janson Industries5
Single Layout Strategy▀ Test on all possible devices
▀ If physical devices not available, use appropriate emulator templates
Copyright 2015 by Janson Industries6
Copyright 2015 by Janson Industries7
Multiple Layout Strategy▀ Create different layouts for
different devices and have OS select correct layout
▀ Must build correct folder structure(s) and follow naming convention(s) for OS to find correct layout
Copyright 2015 by Janson Industries8
Multiple Layout Strategy▀ Create separate layout folders in
res to hold different layouts
XML files must all have the same names
▀ Two layout folder naming convention options based on screen size
Smallest width
s/n/l/x
Copyright 2015 by Janson Industries9
Smallest Width Names▀ Layout folder name indicates
minimum screen width required for layout
res/layout – this is the default
res/layout-sw100dp
res/layout-sw200dp
res/layout-sw400dp
Copyright 2015 by Janson Industries10
S/N/L/X Width Names▀ Layout folder name indicates
relative screen width
res/layout – this is the default
res/layout-small
res/layout-normal
res/layout-large
res/layout-xlarge
Copyright 2015 by Janson Industries11
Default folder▀ If no resource is specified for a
particular screen size, the default is used
So more like, "if nothing else is defined" use the default
Copyright 2015 by Janson Industries12
Orientation layouts▀ Can also define different
layouts for different orientations
▀ Store them in folders named
res/layout-port
res/layout-land
Copyright 2015 by Janson Industries13
Handling Many Display Sizes▀ Image sizes may also have
problems
▀ Use smallest width naming convention on drawable folders
res/drawable – this is the default
res/drawable-sw100dp
res/drawable-sw200dp
res/drawable-sw400dp
Copyright 2015 by Janson Industries14
DPI (dots per inch) Names▀ Or base it on screen density
res/drawable-ldpi - ~ 120DPI
res/drawable-mdpi - ~ 160DPI
res/drawable-tvdpi - ~ 213DPI
res/drawable-hdpi - ~ 240DPI
res/drawable-xhdpi - ~ 320DPI
res/drawable-nodpi – images that shouldn't be changed
Copyright 2015 by Janson Industries15
Handling Many Display Sizes▀ Image files in each folder must
have the same name
Except nodpi