Make the most of large-screen devices with Canonical Layouts

KTUG Meetup - March
https://www.meetup.com/de-DE/kotlin-user-group-munich/events/264514972/

Transcript

1. Make the most of large-screen devices with Canonical Layouts Thomas Künneth
2. • What are large screens? • What’s the problem with large screens? • How can Canonical Layouts help solve it?
3. Dose Media https://unsplash.com/de/fotos/3R3sNikjVnA
4. Erik Mclean https://unsplash.com/de/fotos/U-Vu_r6qyyU
5. https://developer.android.com/about/versions/android-3.0-highlights#ui • Alternartive resources available since the beginning • Fragments: Android 3 • We even had ActivityGroup Android ❤️ different form factors
6. What’s the problem?
8. Paul Skorupskas https://unsplash.com/de/fotos/7KLa-xLbSXA
11. Layout change triggers • Resizing a Freeform window • Open / close a foldable • Rotating the device (portrait / landscape) • Entering / leaving split-screen mode • Entering / leaving picture in picture mode
12. • Apps don’t always use the whole screen (app window may much be smaller) • App layout is based on the app window size Clem Onojeghuo https://unsplash.com/photos/P7-_EB3gQuA
13. Daniel McCullough https://unsplash.com/photos/-FPFq_trr2Y Layout across device classes
14. Compact 480 dp 900 dp 600 dp 840 dp Expanded Medium Compact Medium Expanded
15. B A B B B A A A: Navigation B: Content (Body) A
17. • Content elements in a grid • Easily browse a large amount of content Feed Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
18. • Explorable lists of items • Item detail (supplementary information alongside each item) • Two side-by-side panes List-detail Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
19. • Organize app content into primary and secondary display areas • Secondary content supports the main content Supporting pane Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
20. • Starting points for organizing common elements in an app • Based on (logical) panes • React to app window size changes
21. • Depending on the Window Size Class the inner layout varies • Example: either list, detail, or both may be visible • A pane can consist of one or more columns • No fully implemented components, but a couple of samples: https://github.com/android/user-interface-samples/tree/main/CanonicalLayouts
22. • Use Window Size Classes to provide suitable layouts for different device categories • Canonical Layouts serve as blueprints for common layout scenarios • … but… What about foldables? Recap
23. Code Walkthrough https://github.com/tkuenneth/android-demos/tree/master/compose/FoldableDemo
24. @tkuenneth @tkuenneth @tkuenneth @tkuenneth@snapp.social https://www.thomaskuenneth.eu/ Thank you