Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Make your Compose UI foldable

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.



Thomas Künneth

February 24, 2022

More Decks by Thomas Künneth

Other Decks in Technology


  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
  4. None
  5. None
  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
  13. None
  14. None
  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

  17. None
  18. None
  19. None
  20. None
  21. None
  22. ?

  23. None
  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
  25. None
  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