1. 1 Mobile Computing Handling Different Display Sizes Copyright 2015 by Janson Industries

2. 2 Handling Many Display Sizes ▀ Two approaches u Single layout u Multiple layouts ▀ Single layout means only one layout has to be maintained ▀ Can't always do it with one layout u One layout for watch and tablet?

3. Copyright 2015 by Janson Industries 3 Single Layout Strategy ▀ Don't use a layout with absolute positioning u i.e. no specific x & y coordinates ► AbsoluteLayout ▀ Don't use specific height and width properties u When not possible, use dp (density independent) values u Use sp (scale-independent pixel) for text size values

4. Copyright 2015 by Janson Industries 4 Single Layout Strategy ▀ Test on all possible devices ▀ If physical devices not available, use templates to create appropriate virtual devices

5. Copyright 2015 by Janson Industries 5 Single Layout Strategy ▀ Test on all possible devices ▀ If physical devices not available, use appropriate emulator templates

6. Copyright 2015 by Janson Industries 6

7. 7 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

8. Copyright 2015 by Janson Industries 8 Multiple Layout Strategy ▀ Create separate layout folders in res to hold different layouts u XML files must all have the same names ▀ Two layout folder naming convention options based on screen size u Smallest width u s/n/l/x

9. Copyright 2015 by Janson Industries 9 Smallest Width Names ▀ Layout folder name indicates minimum screen width required for layout u res/layout – this is the default u res/layout-sw100dp u res/layout-sw200dp u res/layout-sw400dp

10. Copyright 2015 by Janson Industries 10 S/N/L/X Width Names ▀ Layout folder name indicates relative screen width u res/layout – this is the default u res/layout-small u res/layout-normal u res/layout-large u res/layout-xlarge

11. Copyright 2015 by Janson Industries 11 Default folder ▀ If no resource is specified for a particular screen size, the default is used u So more like, "if nothing else is defined" use the default

12. Copyright 2015 by Janson Industries 12 Orientation layouts ▀ Can also define different layouts for different orientations ▀ Store them in folders named u res/layout-port u res/layout-land

13. Copyright 2015 by Janson Industries 13 Handling Many Display Sizes ▀ Image sizes may also have problems ▀ Use smallest width naming convention on drawable folders u res/drawable – this is the default u res/drawable-sw100dp u res/drawable-sw200dp u res/drawable-sw400dp

14. Copyright 2015 by Janson Industries 14 DPI (dots per inch) Names ▀ Or base it on screen density u res/drawable-ldpi - ~ 120DPI u res/drawable-mdpi - ~ 160DPI u res/drawable-tvdpi - ~ 213DPI u res/drawable-hdpi - ~ 240DPI u res/drawable-xhdpi - ~ 320DPI u res/drawable-nodpi – images that shouldn't be changed

15. Copyright 2015 by Janson Industries 15 Handling Many Display Sizes ▀ Image files in each folder must have the same name u Except nodpi