Foldables on Android - What's new?

Not to much surprise, Google has released the second iteration of the Pixel Fold in 2024. But what about the APIs and frameworks that make apps look great on foldables and large screens? Last year, while some of the basic building blocks were in place, a lot of (perceived) low-level plumbing still had to be done by the app developer. Think of canonical layouts: shouldn't there be more stuff ... just there? In this talk, we'll look at Material3 Adaptive and how it simplifies foldable and large screen support on Android. You will learn how List-detail and Supporting pane help build adaptive layouts, and how the new NavigationSuiteScaffold() composable makes top-level navigation based on window size classes a breeze

Transcript

1. Foldables on Android What's new? Thomas Künneth
2. • What are foldables anyway? • Window size classes and why do we need them • Canonical layouts • Material3 Adaptive Agenda
3. What are foldables anyway? • Book-like experience • Typically, 360-degree hinge • Various postures depending on intended use • Very compact • Must be opened for full usage • Main screen essentially is Smartphone-sized • A small screen for ad hoc interactions • Feels like a smartphone when closed • Essentially becomes a tablet when opened • Various postures, but no 360 degrees Not all foldables have large screens
4. Not all large screen devices are foldables • Large screen • Natural orientation portrait or landscape • May offer a Freeform experience
6. Compact 480 dp 900 dp 600 dp 840 dp Expanded Medium Compact Medium Expanded
7. Compact 480 dp 900 dp 600 dp 840 dp Expanded Medium Compact Medium Expanded
8. Window size classes affect the location and size of both navigation and content area, as well as which components we use
9. • Concept of window size classes introduced in 2021 • Two implementations (Jetpack WindowManager and material3- window-size-class) • Until recently, logic which navigation composable to be used needed to be done in the app code
10. • Navigation bar for compact horizontal window size class • Navigation rail for medium or expanded horizontal window size class • Navigation drawer for expanded horizontal window size class • Considerable amount of boilerplate code
11. What’s inside the content area?
14. • Template for a specific type of layout or design • Based on logical panes • Implementations should use Window Size Classes to determine … • which panes are visible • size, location, and content of panes • Until recently, no ready-to-use Jetpack Compose implementations Canonical layouts
15. • 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. 1 2
16. • 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 These are no panes
17. • Primary section for the main app content • Secondary section supports the main app content • Optional tertiary section for additional content Supporting pane Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 1 3 2
18. • Navigation components based on window size classes • Implementations of List-detail and Supporting pane • Heavily relies on the pane concept Material3 Adaptive
22. Top-level navigation
27. How the scaffold should arrange its panes Indicates how each pane of the scaffold is adapted Home pane: list and detail of current item
29. The list
31. Details
33. Example of a supporting pane
37. Conclusion • Material3 Adaptive greatly simplifies layout on large screens • … and smartphones … • The API feels intuitive to use • Can be customized easily • There’s no excuse for not using it, at least in new apps • Mileage may vary for existing apps
38. https://github.com/tkuenneth/kkon_2024
39. Thank you @tkuenneth@snapp.social @tkuenneth @tkuenneth @tkuenneth