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
   

   View Slide

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

   View Slide

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
   

   View Slide

4. View Slide

5. View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

9. Two columns to the rescue
   

   View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

13. View Slide

14. View Slide

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
    

    View Slide

16. Hinge width: 1 pixel
    Hinge height: 2480 pixel
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. ?
    

    View Slide

23. View Slide

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
    

    View Slide

25. View Slide

26. Wrap up
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide