Building For Larger Screens

Transcript

1. Annunziata Kinya Build for larger screen sizes Co-organizer Android254 Android Engineer@Kyosk
2. Adobe Stock#243026154 (And probably you too) Victor is me…. I am Victor
3. Why? • Accessibility/ Great user experience across all devices
4. Design Guidance for large screens • Besides being functional the design should be efficient and easy to use • Embrace multi-column layouts - When adapting the layout grid for larger screens, divide content and elements into columns • Breakpoint system - use screen size threshold to determine specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation. • Canonical layouts - large screen compositions that guide on how to organize common elements in a layout for apps to adapt across screen sizes. ◦ List-detail view ◦ Supporting panel ◦ Feed
5. Adobe Stock#243026154
6. Existing ways for building for large screens • Using ConstraintLayout as the base view layout • Responsive width and height for views - match_parent, wrap_content, 0dp • Alternative layout designs for different sizes e.g. layout-w600dp for screens that are at least 600dp width • SlidingPaneLayout - List detail view pattern • Navigation - BottomNavigationView, NavigationRailView, NavigationDrawer
7. Adobe Stock#243026154 Provides a horizontal two pane layout for use at the top level of a UI. The first pane as a content list, second pane as a detail view for displaying content from the other pane. SlidingPane Layout
8. 8 Responsive Navigation
9. Implementation
10. Adobe Stock#243026154 Before: Phone Portrait mode
11. Adobe Stock#243026154 Before: Tablet Landscape mode
12. Use this style to highlight code
13. Use this style to highlight code
14. Use this style to highlight code
15. Use this style to highlight code
16. Use this style to highlight code
17. Use this style to highlight code
18. Adobe Stock#243026154 And boooom!..... but Navigation󰤈
22. Adobe Stock#243026154 Aaaaannnnd🥳 🥳
23. Testing
24. Adobe Stock#243026154 A bonus to the layout editor that allows you to see the changes in your layout across different devices Layout Validator
25. Adobe Stock#243026154
26. Adobe Stock#243026154 Available in Android Studio Chipmunk For developers to run and test their apps working in different device types e.g. phone, foldable, tablet and chrome but on the same emulator Resizable emulator👏
28. Thank you! Android Developer She/Her @AnnieKobia Support different screen sizes Resources Annunziata Kinya Material design guidelines Sample demo app