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
   

   View Slide

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

   View Slide

3. View Slide

4. View Slide

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
   

   View Slide

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
   

   View Slide

7. • Even with one screen there may be a hinge (or fold)
   • It may block or obstruct parts of the display
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. So, why not learn from them?
    Opened foldables resemble tablets
    

    View Slide

11. https://de.wikipedia.org/wiki/Android_Honeycomb#/media/Datei:Android3.0.png
    

    View Slide

12. Two columns
    33 : 66
    

    View Slide

13. View Slide

14. View Slide

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)?
    

    View Slide

16. Introducing Jetpack
    WindowManager
    

    View Slide

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)
    

    View Slide

18. Hinge width: 66 pixel
    Hinge height: 1892 pixel
    1344 – 0 = 1344 pixel
    2754 – 1410 = 1344 pixel
    1892 pixel
    2754 pixel
    

    View Slide

19. Hinge width: 1 pixel
    Hinge height: 2208 pixel
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. ✓ ❌
    

    View Slide

28. View Slide

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
    

    View Slide

30. View Slide

31. Wrap up
    

    View Slide

32. • Two columns work great for tablets and foldables
    • Jetpack WindowManager helps determining size and location
    

    View Slide

33. • Sometimes the hinge obstructs top-level UI elements
    • Material Design interaction patterns help minimizing the impact
    

    View Slide

34. https://lehtimaeki.medium.com/why-i-will-never-by-another-samsung-device-2237a40002a6
    

    View Slide

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
    

    View Slide

36. https://speakerdeck.com/tkuenneth
    Thank you!
    @tkuenneth
    @tkuenneth
    @tkuenneth
    

    View Slide