Unfolding the mystery

Foldable devices 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. We'll look at relevant APIs, cover important interaction patterns, and learn how to glue all together.

Transcript

1. Unfolding the mystery Thomas Künneth
2. Sony Tablet P, 2011 (Honeycomb) https://www.tabletblog.de/sony-tablet-p-bald-in-deutschland-fur-599-euro-erhaltlich/ Once upon a time
5. • 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 may have one, two, or possibly more 😎 display areas • Biggest area may be provided by more than one physical screen • If so, they are connected by a hinge
7. • Even with one screen there may be a hinge (or fold) • It may block or obstruct parts of the display
8. • A blocking hinge may cause no problems at all • May make the UX a little less pleasing • May require changes to the user interface
9. 🤔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
10. So, why not learn from them? Opened foldables resemble tablets
11. https://de.wikipedia.org/wiki/Android_Honeycomb#/media/Datei:Android3.0.png
12. Two columns 33 : 66
15. 🤔Listen, I‘ve been thinking • Creating two column layouts is easy using classic Views • And it certainly is easy using Jetpack Compose • But … • what about the fold / hinge… • and how do we get information about the screen(s)?
16. Introducing Jetpack WindowManager
17. • 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)
18. Hinge width: 66 pixel Hinge height: 1892 pixel 1344 – 0 = 1344 pixel 2754 – 1410 = 1344 pixel 1892 pixel 2754 pixel
19. Hinge width: 1 pixel Hinge height: 2208 pixel
27. ✓ ❌
29. 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
31. Wrap up
32. • Two columns work great for tablets and foldables • Jetpack WindowManager helps determining size and location
33. • Sometimes the hinge obstructs top-level UI elements • Material Design interaction patterns help minimizing the impact
34. https://lehtimaeki.medium.com/why-i-will-never-by-another-samsung-device-2237a40002a6
35. Resources • https://github.com/PacktPublishing/Android-UI-Development-with-Jetpack- Compose/tree/compose_1.2/chapter_11/NavigationRailDemo • https://github.com/tkuenneth/android- demos/tree/master/compose/FoldableDemo • https://github.com/tkuenneth/android- demos/tree/master/misc/WindowManagerDemo2
36. https://speakerdeck.com/tkuenneth Thank you! @tkuenneth @tkuenneth @tkuenneth