Tweet
Tweet

Slide 1

Slide 1 text

Make the most of large-screen devices with Canonical Layouts Thomas Künneth

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

What’s the problem?

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

• 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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

• 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

Slide 18

Slide 18 text

• 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.

Slide 19

Slide 19 text

• 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.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

• 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

Slide 22

Slide 22 text

• 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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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