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

Make the most of large-screen devices with Cano...

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. • What are large screens? • What’s the problem with

    large screens? • How can Canonical Layouts help solve it?
  2. 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
  3. • 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
  4. Compact 480 dp 900 dp 600 dp 840 dp Expanded

    Medium Compact Medium Expanded
  5. • 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
  6. • 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.
  7. • 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.
  8. • Starting points for organizing common elements in an app

    • Based on (logical) panes • React to app window size changes
  9. • 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
  10. • 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