$30 off During Our Annual Pro Sale. View Details »

Composing large screens

Composing large screens

Android has always embraced different form factors. But given Googles latest hardware, a tablet and a foldable, it's more important than ever to make your app look great on large screens. How do you do that? Which tools and libraries are needed? What screen layout is best? This talk walks you through Jetpack WindowManager, a Jetpack library that provides all information your app needs to make the best of all screen sizes. And we'll look at Material Design Canonical Layouts, ready-to-use compositions that help layouts adapt for common use cases and screen sizes. On top of that, you'll learn about compose_adaptive_scaffold, a small open source library that minimizes your efforts for making your Compose apps become a first class citizen on large screens

droidcon Berlin 2023

Thomas Künneth

July 06, 2023
Tweet

More Decks by Thomas Künneth

Other Decks in Technology

Transcript

  1. Composing
    large screens
    Thomas Künneth

    View Slide

  2. @tkuenneth
    @tkuenneth
    @[email protected]
    @tkuenneth

    View Slide

  3. • What are large screens?
    • What are foldables?
    • How are foldables different from tablets?
    • Coding for foldables and tablets
    • Questions and answers, discussion

    View Slide

  4. What are large screens?
    And why do we need to
    talk about it?

    View Slide

  5. https://developer.android.com/about/versions/android-3.0-highlights#ui
    • Alternartive resources available
    since the beginning
    • Fragments: Android 3
    • We even had
    ActivityGroup
    Android ❤️ different form factors

    View Slide

  6. • Now there is Jetpack Compose
    • We no longer should use Views
    • We no longer should use Fragments

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. What are large screens?
    • TVs
    • Tablets and Freeform
    experiences
    • Foldables

    View Slide

  11. Sony Tablet P, 2011 (Honeycomb)
    https://www.tabletblog.de/sony-tablet-p-bald-in-deutschland-fur-599-euro-erhaltlich/
    Once upon a time

    View Slide

  12. • Very compact
    • Must be opened for full usage
    • Main screen essentially is Smartphone-sized
    • A small screen for ad hoc interactions

    View Slide

  13. • Book-like experience
    • Typically, 360-degree hinge
    • Various postures depending on intended use

    View Slide

  14. View Slide

  15. View Slide

  16. 🤔So what?
    • Ignore devices with obstructing hinges
    • Make our apps first class citizens on as many devices as possible
    • Either way we need to deal with the large screen real estate

    View Slide

  17. • Feels like a smartphone when closed
    • Essentially becomes a tablet when opened
    • Various postures, but no 360 degrees

    View Slide

  18. • Foldables have one, two, or possibly more
    display areas
    • Biggest area
    • divided into two parts separated by a
    hinge
    • comprises of ONE or TWO physical
    screens
    • Not all foldables provide a large display area
    Clem Onojeghuo
    https://unsplash.com/photos/P7-_EB3gQuA

    View Slide

  19. View Slide

  20. View Slide

  21. App layout changed when …
    • a Freeform window was resized
    • a foldable device was folded / unfolded

    View Slide

  22. App window size also changes when
    • rotating the device (portrait / landscape)
    • entering / leaving split-screen mode
    • entering / leaving picture in picture mode

    View Slide

  23. • Apps don’t always use the whole screen
    • App layout is based on the app window size
    Clem Onojeghuo
    https://unsplash.com/photos/P7-_EB3gQuA

    View Slide

  24. View Slide

  25. Daniel McCullough
    https://unsplash.com/photos/-FPFq_trr2Y
    Material Design encourages app layout
    based on Window Size Classes

    View Slide

  26. Compact
    480 dp
    900 dp
    600 dp 840 dp
    Expanded
    Medium
    Compact
    Medium
    Expanded

    View Slide

  27. Window Size Classes affect which
    components we use and the location and size
    of the content area
    Clem Onojeghuo
    https://unsplash.com/photos/P7-_EB3gQuA

    View Slide

  28. What’s inside the
    content area?

    View Slide

  29. • Foldables divide the
    content area into two
    parts
    • The hinge may create a
    noticeable gap

    View Slide

  30. What’s inside the
    content area and
    how do we lay it out?

    View Slide

  31. Daniel McCullough
    https://unsplash.com/photos/-FPFq_trr2Y
    Material Design encourages app layout
    based on Canonical Layouts

    View Slide

  32. • Scrollable lists of items
    • Item detail containing
    supplementary information
    List-detail
    Lorem Ipsum
    Lorem ipsum dolor sit amet,
    consectetur adipisici elit, sed
    eiusmod tempor incidunt ut labore
    et dolore magna aliqua.

    View Slide

  33. https://developer.android.com/about/versions/android-3.0-highlights#ui

    View Slide

  34. • Organizes cards in a grid
    • Easily browse a large amount
    of content
    Feed
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum

    View Slide

  35. • Primary section for the main
    app content
    • Secondary section supports
    the main app content
    Supporting pane
    Lorem Ipsum
    Lorem ipsum dolor sit
    amet, consectetur adipisici
    elit, sed eiusmod tempor
    incidunt ut labore et dolore
    magna aliqua.

    View Slide

  36. • Based on logical panes
    • Implementation uses Window Size Classes to
    determine …
    • which panes are visible
    • size, location, and content of panes
    Clem Onojeghuo
    https://unsplash.com/photos/P7-_EB3gQuA

    View Slide

  37. • Currently, no fully implemented
    components
    • A couple of samples:
    https://github.com/android/user-interface-
    samples/tree/main/CanonicalLayouts
    Clem Onojeghuo
    https://unsplash.com/photos/P7-_EB3gQuA

    View Slide

  38. • Samples help understand Window Size
    Classes and Canonical Layouts
    • Currently, some honour the hinge, while
    others don’t
    • Those that do require experimental
    accompanist-adaptive

    View Slide

  39. An alternative
    approach…

    View Slide

  40. Some more thoughts on
    tablets and foldables

    View Slide

  41. Two columns
    33 : 66

    View Slide

  42. View Slide

  43. View Slide

  44. • Utilize logical panes
    • On large screens, show two logical panes
    • On (large screen) foldables, respect the
    areas defined by the hinge / fold
    Clem Onojeghuo
    https://unsplash.com/photos/P7-_EB3gQuA

    View Slide

  45. Jetpack WindowManager
    • Window metrics for an activity
    • Features of a foldable device
    • Position and size of the hinge
    • Orientation (vertical, horizontal)
    • Occlusion type (none, full)
    • State (flat, half opened)
    • Activity embedding

    View Slide

  46. • Not only for Jetpack Compose
    • Can be used to make View-based apps fold-aware

    View Slide

  47. Window Size Classes
    • Jetpack WindowManager
    • androidx.compose.material3:material3-window-size-class

    View Slide

  48. Code Walkthrough
    https://github.com/tkuenneth/android-demos/tree/master/compose/FoldableDemo

    View Slide

  49. View Slide

  50. • Setup Jetpack WindowManager
    • Get information about the app window
    • Get information about the hinge / fold
    • Create an app layout

    View Slide

  51. compileSdk >= 34

    View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. Recap
    • This demo is based on panes, but wraps then inside composables
    • FoldableScreen
    • LargeScreen
    • SmartphoneScreen
    • … to make the code a little easier to understand
    • My open source library compose_adaptive_scaffold puts panels
    center stage

    View Slide

  67. https://github.com/tkuenneth/comp
    ose_adaptive_scaffold

    View Slide

  68. Thank you
    @tkuenneth
    @tkuenneth
    @[email protected]
    @tkuenneth

    View Slide