Tweet
Tweet

Slide 1

Slide 1 text

Composing large screens Thomas Künneth

Slide 2

Slide 2 text

@tkuenneth @tkuenneth @[email protected] @tkuenneth

Slide 3

Slide 3 text

• What are large screens? • What are foldables? • How are foldables different from tablets? • Coding for foldables and tablets • Questions and answers, discussion

Slide 4

Slide 4 text

What are large screens? And why do we need to talk about it?

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

• Now there is Jetpack Compose • We no longer should use Views • We no longer should use Fragments

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

What are large screens? • TVs • Tablets and Freeform experiences • Foldables

Slide 11

Slide 11 text

Sony Tablet P, 2011 (Honeycomb) https://www.tabletblog.de/sony-tablet-p-bald-in-deutschland-fur-599-euro-erhaltlich/ Once upon a time

Slide 12

Slide 12 text

• Very compact • Must be opened for full usage • Main screen essentially is Smartphone-sized • A small screen for ad hoc interactions

Slide 13

Slide 13 text

• Book-like experience • Typically, 360-degree hinge • Various postures depending on intended use

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

🤔So what? • Ignore devices with obstructing hinges • Make our apps first class citizens on as many devices as possible • Either way we need to deal with the large screen real estate

Slide 17

Slide 17 text

• Feels like a smartphone when closed • Essentially becomes a tablet when opened • Various postures, but no 360 degrees

Slide 18

Slide 18 text

• Foldables have one, two, or possibly more display areas • Biggest area • divided into two parts separated by a hinge • comprises of ONE or TWO physical screens • Not all foldables provide a large display area Clem Onojeghuo https://unsplash.com/photos/P7-_EB3gQuA

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

App layout changed when … • a Freeform window was resized • a foldable device was folded / unfolded

Slide 22

Slide 22 text

App window size also changes when • rotating the device (portrait / landscape) • entering / leaving split-screen mode • entering / leaving picture in picture mode

Slide 23

Slide 23 text

• Apps don’t always use the whole screen • App layout is based on the app window size Clem Onojeghuo https://unsplash.com/photos/P7-_EB3gQuA

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Daniel McCullough https://unsplash.com/photos/-FPFq_trr2Y Material Design encourages app layout based on Window Size Classes

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Window Size Classes affect which components we use and the location and size of the content area Clem Onojeghuo https://unsplash.com/photos/P7-_EB3gQuA

Slide 28

Slide 28 text

What’s inside the content area?

Slide 29

Slide 29 text

• Foldables divide the content area into two parts • The hinge may create a noticeable gap

Slide 30

Slide 30 text

What’s inside the content area and how do we lay it out?

Slide 31

Slide 31 text

Daniel McCullough https://unsplash.com/photos/-FPFq_trr2Y Material Design encourages app layout based on Canonical Layouts

Slide 32

Slide 32 text

• Scrollable lists of items • Item detail containing supplementary information List-detail Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Slide 33

Slide 33 text

https://developer.android.com/about/versions/android-3.0-highlights#ui

Slide 34

Slide 34 text

• Organizes cards 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 35

Slide 35 text

• Primary section for the main app content • Secondary section supports the main app content Supporting pane Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Slide 36

Slide 36 text

• Based on logical panes • Implementation uses Window Size Classes to determine … • which panes are visible • size, location, and content of panes Clem Onojeghuo https://unsplash.com/photos/P7-_EB3gQuA

Slide 37

Slide 37 text

• Currently, no fully implemented components • A couple of samples: https://github.com/android/user-interface- samples/tree/main/CanonicalLayouts Clem Onojeghuo https://unsplash.com/photos/P7-_EB3gQuA

Slide 38

Slide 38 text

• Samples help understand Window Size Classes and Canonical Layouts • Currently, some honour the hinge, while others don’t • Those that do require experimental accompanist-adaptive

Slide 39

Slide 39 text

An alternative approach…

Slide 40

Slide 40 text

Some more thoughts on tablets and foldables

Slide 41

Slide 41 text

Two columns 33 : 66

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

• Utilize logical panes • On large screens, show two logical panes • On (large screen) foldables, respect the areas defined by the hinge / fold Clem Onojeghuo https://unsplash.com/photos/P7-_EB3gQuA

Slide 45

Slide 45 text

Jetpack WindowManager • Window metrics for an activity • Features of a foldable device • Position and size of the hinge • Orientation (vertical, horizontal) • Occlusion type (none, full) • State (flat, half opened) • Activity embedding

Slide 46

Slide 46 text

• Not only for Jetpack Compose • Can be used to make View-based apps fold-aware

Slide 47

Slide 47 text

Window Size Classes • Jetpack WindowManager • androidx.compose.material3:material3-window-size-class

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

• Setup Jetpack WindowManager • Get information about the app window • Get information about the hinge / fold • Create an app layout

Slide 51

Slide 51 text

compileSdk >= 34

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

Recap • This demo is based on panes, but wraps then inside composables • FoldableScreen • LargeScreen • SmartphoneScreen • … to make the code a little easier to understand • My open source library compose_adaptive_scaffold puts panels center stage

Slide 67

Slide 67 text

https://github.com/tkuenneth/comp ose_adaptive_scaffold

Slide 68

Slide 68 text

Thank you @tkuenneth @tkuenneth @[email protected] @tkuenneth