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. • 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
  2. • 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
  3. • A blocking hinge may cause no problems at all

    • May make the UX a little less pleasing • May require changes to the user interface
  4. • UI must be laid out accordingly • For tablets,

    two columns work well • Foldables are like tablets with a fold or hinge
  5. • 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
  6. • Support new device form factors and multi-window environments •

    Provides a common API surface for API versions >= 14 • Initial release targets foldable devices
  7. • Helps … • computing window metrics • getting window

    layout information • Nice Flow-centred API • Other asynchronous APIs are supported, too
  8. 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
  9. ?

  10. 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
  11. • 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
  12. 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