Make your Compose UI foldable

Slide 1

Slide 1 text

Make your Compose UI foldable Thomas Künneth

Slide 2

Slide 2 text

thomas@thomaskuenneth.eu @tkuenneth @tkuenneth https://thomaskuenneth.eu/ @tkuenneth

Slide 3

Slide 3 text

• Very compact • Must be opened for full usage • Screen essentially is Smartphone-sized • Book-like experience • Typically 360 degree hinge • Various postures depending on intended use • Feels like a smartphone when closed • Essentially becomes a tablet when opened

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

• Foldables have one, two, or possibly more physical screens • One, two, or possibly more 😎 display areas • Biggest area may be provided by more than one physical screen, connected with a hinge • The hinge may block or obstruct parts of the display

Slide 7

Slide 7 text

• A blocking hinge may cause no problems at all • May make the UX a little less pleasing • May require changes to the user interface

Slide 8

Slide 8 text

• UI must be laid out accordingly • For tablets, two columns work well • Foldables are like tablets with a fold or hinge

Slide 9

Slide 9 text

Two columns to the rescue

Slide 10

Slide 10 text

• Creating two columns layouts is easy using classic Views • And it certainly is easy using Jetpack Compose • But what about the hinge? Introducing Jetpack WindowManager

Slide 11

Slide 11 text

• Support new device form factors and multi-window environments • Provides a common API surface for API versions >= 14 • Initial release targets foldable devices

Slide 12

Slide 12 text

• Helps … • computing window metrics • getting window layout information • Nice Flow-centred API • Other asynchronous APIs are supported, too

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Hinge width: 84 pixel Hinge height: 1800 pixel 1350 – 0 = 1350 pixel 2784 – 1434 = 1350 pixel 1800 pixel OcclusionType: NONE, FULL Orientation: VERTICAL, HORIZONTAL State: FLAT, HALF_OPENED

Slide 16

Slide 16 text

Hinge width: 1 pixel Hinge height: 2480 pixel

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

NavigationRail / NavigationRailItem • NavigationRail() is used to move between primary app destinations • Displays three to seven destinations; optionally: • FloatingActionButton() • logo inside a header • NavigationRailItem() represents primary destinations

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Wrap up

Slide 27

Slide 27 text

• Two columns work great for tablets and foldables • Jetpack WindowManager helps determining size and location • Sometimes the hinge obstructs top-level UI elements • Material Design interaction patterns help minimizing the impact

Slide 28

Slide 28 text

Resources • Hacking the hinge: https://dev.to/tkuenneth/hacking-the-hinge-4a5m • WindowManagerDemo: https://github.com/tkuenneth/android- demos/tree/master/misc/WindowManagerDemo2 • FoldableDemo: https://github.com/tkuenneth/android- demos/tree/master/compose/FoldableDemo • NavigationRailDemo: https://github.com/PacktPublishing/Android-UI- Development-with-Jetpack- Compose/tree/main/chapter_11/NavigationRailDemo

Slide 29

Slide 29 text

Thank you! thomas@thomaskuenneth.eu @tkuenneth @tkuenneth https://thomaskuenneth.eu/ @tkuenneth