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.

https://gdg.community.dev/events/details/google-gdg-cape-town-presents-a-deep-dive-into-jetpack-compose/

Thomas Künneth

February 24, 2022
Tweet

More Decks by Thomas Künneth

Other Decks in Technology

Transcript

  1. Make your
    Compose UI
    foldable
    Thomas Künneth

    View Slide

  2. [email protected]
    @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!
    [email protected]
    @tkuenneth
    @tkuenneth
    https://thomaskuenneth.eu/
    @tkuenneth

    View Slide