Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Make the most of large-screen devices with Canonical Layouts

Make the most of large-screen devices with Canonical Layouts

Thomas Künneth

February 28, 2023
Tweet

More Decks by Thomas Künneth

Other Decks in Technology

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
    @[email protected]
    https://www.thomaskuenneth.eu/
    Thank you

    View Slide