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
   

   View Slide

2. • What are large screens?
   • What’s the problem with large screens?
   • How can Canonical Layouts help solve it?
   

   View Slide

3. Dose Media
   https://unsplash.com/de/fotos/3R3sNikjVnA
   

   View Slide

4. Erik Mclean
   https://unsplash.com/de/fotos/U-Vu_r6qyyU
   

   View Slide

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
   

   View Slide

6. What’s the problem?
   

   View Slide

7. View Slide

8. Paul Skorupskas
   https://unsplash.com/de/fotos/7KLa-xLbSXA
   

   View Slide

9. View Slide

10. View Slide

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
    

    View Slide

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
    

    View Slide

13. Daniel McCullough
    https://unsplash.com/photos/-FPFq_trr2Y
    Layout across device classes
    

    View Slide

14. Compact
    480 dp
    900 dp
    600 dp 840 dp
    Expanded
    Medium
    Compact
    Medium
    Expanded
    

    View Slide

15. B
    A
    B B
    B
    A
    A
    A: Navigation
    B: Content (Body)
    A
    

    View Slide

16. View Slide

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
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

20. • Starting points for organizing common elements in an app
    • Based on (logical) panes
    • React to app window size changes
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. Code Walkthrough
    https://github.com/tkuenneth/android-demos/tree/master/compose/FoldableDemo
    

    View Slide

24. @tkuenneth
    @tkuenneth
    @tkuenneth
    @tkuenneth@snapp.social
    https://www.thomaskuenneth.eu/
    Thank you
    

    View Slide