Make your Compose UI foldable

Foldable devices are a relatively young device category. They made quite a buzz from the start. In the beginning, because they were not very robust. 🤣 Now, because they ARE robust enough for daily usage. And they make large screens pocketable. This talk shows you how to make beautiful user interfaces that work well on smartphones, tablets, and foldables using Jetpack Compose and Jetpack WindowManager.

https://gdg.community.dev/events/details/google-gdg-cape-town-presents-a-deep-dive-into-jetpack-compose/

Transcript

1. Make your Compose UI foldable Thomas Künneth
2. thomas@thomaskuenneth.eu @tkuenneth @tkuenneth https://thomaskuenneth.eu/ @tkuenneth
3. • 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
6. • 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
7. • A blocking hinge may cause no problems at all • May make the UX a little less pleasing • May require changes to the user interface
8. • UI must be laid out accordingly • For tablets, two columns work well • Foldables are like tablets with a fold or hinge
9. Two columns to the rescue
10. • 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
11. • Support new device form factors and multi-window environments • Provides a common API surface for API versions >= 14 • Initial release targets foldable devices
12. • Helps … • computing window metrics • getting window layout information • Nice Flow-centred API • Other asynchronous APIs are supported, too
15. 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
16. Hinge width: 1 pixel Hinge height: 2480 pixel
22. ?
24. 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
26. Wrap up
27. • 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
28. 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
29. Thank you! thomas@thomaskuenneth.eu @tkuenneth @tkuenneth https://thomaskuenneth.eu/ @tkuenneth