Foldables on Android - What's new?

Slide 1

Slide 1 text

Foldables on Android What's new? Thomas Künneth

Slide 2

Slide 2 text

• What are foldables anyway? • Window size classes and why do we need them • Canonical layouts • Material3 Adaptive Agenda

Slide 3

Slide 3 text

What are foldables anyway? • Book-like experience • Typically, 360-degree hinge • Various postures depending on intended use • Very compact • Must be opened for full usage • Main screen essentially is Smartphone-sized • A small screen for ad hoc interactions • Feels like a smartphone when closed • Essentially becomes a tablet when opened • Various postures, but no 360 degrees Not all foldables have large screens

Slide 4

Slide 4 text

Not all large screen devices are foldables • Large screen • Natural orientation portrait or landscape • May offer a Freeform experience

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Window size classes affect the location and size of both navigation and content area, as well as which components we use

Slide 9

Slide 9 text

• Concept of window size classes introduced in 2021 • Two implementations (Jetpack WindowManager and material3- window-size-class) • Until recently, logic which navigation composable to be used needed to be done in the app code

Slide 10

Slide 10 text

• Navigation bar for compact horizontal window size class • Navigation rail for medium or expanded horizontal window size class • Navigation drawer for expanded horizontal window size class • Considerable amount of boilerplate code

Slide 11

Slide 11 text

What’s inside the content area?

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

• Template for a specific type of layout or design • Based on logical panes • Implementations should use Window Size Classes to determine … • which panes are visible • size, location, and content of panes • Until recently, no ready-to-use Jetpack Compose implementations Canonical layouts

Slide 15

Slide 15 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. 1 2

Slide 16

Slide 16 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 These are no panes

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

• Navigation components based on window size classes • Implementations of List-detail and Supporting pane • Heavily relies on the pane concept Material3 Adaptive

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Top-level navigation

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

How the scaffold should arrange its panes Indicates how each pane of the scaffold is adapted Home pane: list and detail of current item

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

The list

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Details

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Example of a supporting pane

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Conclusion • Material3 Adaptive greatly simplifies layout on large screens • … and smartphones … • The API feels intuitive to use • Can be customized easily • There’s no excuse for not using it, at least in new apps • Mileage may vary for existing apps

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text