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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  6. What’s the problem?

    View full-size slide

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

    View full-size slide

  8. 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 full-size slide

  9. • 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. • 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 full-size slide

  14. • 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 full-size slide

  15. • 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 full-size slide

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

    View full-size slide

  17. • 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 full-size slide

  18. • 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 full-size slide

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

    View full-size slide

  20. @tkuenneth
    @tkuenneth
    @tkuenneth
    @[email protected]
    https://www.thomaskuenneth.eu/
    Thank you

    View full-size slide