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

Transcript

1. Composing large screens Thomas Künneth
2. @tkuenneth @tkuenneth @tkuenneth@snapp.social @tkuenneth
3. • What are large screens? • What are foldables? • How are foldables different from tablets? • Coding for foldables and tablets • Questions and answers, discussion
4. What are large screens? And why do we need to talk about it?
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
6. • Now there is Jetpack Compose • We no longer should use Views • We no longer should use Fragments
10. What are large screens? • TVs • Tablets and Freeform experiences • Foldables
11. Sony Tablet P, 2011 (Honeycomb) https://www.tabletblog.de/sony-tablet-p-bald-in-deutschland-fur-599-euro-erhaltlich/ Once upon a time
12. • Very compact • Must be opened for full usage • Main screen essentially is Smartphone-sized • A small screen for ad hoc interactions
13. • Book-like experience • Typically, 360-degree hinge • Various postures depending on intended use
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
17. • Feels like a smartphone when closed • Essentially becomes a tablet when opened • Various postures, but no 360 degrees
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
21. App layout changed when … • a Freeform window was resized • a foldable device was folded / unfolded
22. App window size also changes when • rotating the device (portrait / landscape) • entering / leaving split-screen mode • entering / leaving picture in picture mode
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
25. Daniel McCullough https://unsplash.com/photos/-FPFq_trr2Y Material Design encourages app layout based on Window Size Classes
26. Compact 480 dp 900 dp 600 dp 840 dp Expanded Medium Compact Medium Expanded
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
28. What’s inside the content area?
29. • Foldables divide the content area into two parts • The hinge may create a noticeable gap
30. What’s inside the content area and how do we lay it out?
31. Daniel McCullough https://unsplash.com/photos/-FPFq_trr2Y Material Design encourages app layout based on Canonical Layouts
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.
33. https://developer.android.com/about/versions/android-3.0-highlights#ui
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
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.
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
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
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
39. An alternative approach…
40. Some more thoughts on tablets and foldables
41. Two columns 33 : 66
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
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
46. • Not only for Jetpack Compose • Can be used to make View-based apps fold-aware
47. Window Size Classes • Jetpack WindowManager • androidx.compose.material3:material3-window-size-class
48. Code Walkthrough https://github.com/tkuenneth/android-demos/tree/master/compose/FoldableDemo
50. • Setup Jetpack WindowManager • Get information about the app window • Get information about the hinge / fold • Create an app layout
51. compileSdk >= 34
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
67. https://github.com/tkuenneth/comp ose_adaptive_scaffold
68. Thank you @tkuenneth @tkuenneth @tkuenneth@snapp.social @tkuenneth