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

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. • What are large screens? • What are foldables? •

    How are foldables different from tablets? • Coding for foldables and tablets • Questions and answers, discussion
  2. • Now there is Jetpack Compose • We no longer

    should use Views • We no longer should use Fragments
  3. • Very compact • Must be opened for full usage

    • Main screen essentially is Smartphone-sized • A small screen for ad hoc interactions
  4. 🤔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
  5. • Feels like a smartphone when closed • Essentially becomes

    a tablet when opened • Various postures, but no 360 degrees
  6. • 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
  7. App layout changed when … • a Freeform window was

    resized • a foldable device was folded / unfolded
  8. App window size also changes when • rotating the device

    (portrait / landscape) • entering / leaving split-screen mode • entering / leaving picture in picture mode
  9. • 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
  10. Compact 480 dp 900 dp 600 dp 840 dp Expanded

    Medium Compact Medium Expanded
  11. 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
  12. • Foldables divide the content area into two parts •

    The hinge may create a noticeable gap
  13. • 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.
  14. • 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
  15. • 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.
  16. • 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
  17. • 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
  18. • 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
  19. • 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
  20. 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
  21. • Not only for Jetpack Compose • Can be used

    to make View-based apps fold-aware
  22. • Setup Jetpack WindowManager • Get information about the app

    window • Get information about the hinge / fold • Create an app layout
  23. 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