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 full-size slide

  2. [email protected]
    @tkuenneth
    @tkuenneth
    https://thomaskuenneth.eu/
    @tkuenneth

    View full-size 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 full-size slide

  4. • 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 full-size slide

  5. • 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 full-size slide

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

    View full-size slide

  7. Two columns to the rescue

    View full-size slide

  8. • 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 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 full-size slide

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

    View full-size slide

  13. 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 full-size slide

  14. • 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 full-size slide

  15. 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 full-size slide

  16. Thank you!
    [email protected]
    @tkuenneth
    @tkuenneth
    https://thomaskuenneth.eu/
    @tkuenneth

    View full-size slide