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

Foldables on Android - What's new?

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

Thomas Künneth

September 16, 2024
Tweet

More Decks by Thomas Künneth

Other Decks in Technology

Transcript

  1. • What are foldables anyway? • Window size classes and

    why do we need them • Canonical layouts • Material3 Adaptive Agenda
  2. 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
  3. Not all large screen devices are foldables • Large screen

    • Natural orientation portrait or landscape • May offer a Freeform experience
  4. Compact 480 dp 900 dp 600 dp 840 dp Expanded

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

    Medium Compact Medium Expanded
  6. Window size classes affect the location and size of both

    navigation and content area, as well as which components we use
  7. • 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
  8. • 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
  9. • 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
  10. • 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
  11. • 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
  12. • 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
  13. • Navigation components based on window size classes • Implementations

    of List-detail and Supporting pane • Heavily relies on the pane concept Material3 Adaptive
  14. How the scaffold should arrange its panes Indicates how each

    pane of the scaffold is adapted Home pane: list and detail of current item
  15. 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