Announcing new composables for large screen optimizations
Building for phones, foldables, and tablets just got easier with the new Material adaptive layouts now in alpha!
The variety of Android device sizes available on the market challenges the usual assumptions about screen size when building apps. Developers shouldn’t assume the screen is flat or that the screen the app started on is the one it’s currently displayed on. Instead, developers should adapt apps to the device they’re currently running on to be more useful for users.
Jetpack Compose simplifies dynamic UI design and component reuse, providing a modern user interface development alternative to views and XML layout files. On top of that, window size classes define specific display sizes on which you can base decisions such as whether to show one pane on screen or two. In our CanonicalLayouts GitHub repository, you can see examples of how to do this today.
For a large number of apps, the rules around handling different window sizes can be the same. For example, at some specific window size, it makes sense to show two panes side by side or to switch to a navigation rail. But most apps shouldn’t individually have to define this behavior. We want to simplify these layout decisions for you while also giving you flexibility for custom designs and behavior.
To that end, we’ve released the first alpha of our new Material adaptive layouts. The components we’ve focused on first are ListDetailPaneScaffold and NavigationSuiteScaffold.
The ListDetailPaneScaffold is a composable that takes a composable for a list and a composable for details and handles all the logic of whether to display one at a time or both side by side.
To use ListDetailPaneScaffold, include the following new dependency in your app’s module build.gradle file:
androidx.compose.material3:material3-adaptive
Store the scaffold’s state with rememberListDetailPaneScaffoldState, store the currently selected item (if any), and call ListDetailPaneScaffold with your composables:
The code automatically handles whether to display one pane or both panes when the app starts or when a configuration change happens, such as rotating the device or switching to split-screen mode.
ListDetailPaneScaffold means the correct number of panes, size of panes, and even spacing will be automatically handled.For more details about using ListDetailPaneScaffold, see Build a list-detail layout.
Note: We haven’t yet integrated navigation-compose library support, but it’s on our roadmap.
NavigationSuiteScaffold automatically uses the most appropriate top-level navigation UI for your app to maximize reachability. Based on the app’s current window size, the UI switches between a bottom navigation bar and a side navigation rail.
To use NavigationSuiteScaffold, include the following new dependency in your app’s build.gradle file:
androidx.compose.material3:material3-adaptive-navigation-suite
Then create your navigation UI:
If you’re using a standard Scaffold to display only a bottom navigation bar and content, you can completely replace the scaffold with NavigationSuiteScaffold. If you’re using a scaffold to display other elements such as a top app bar, floating action button, or bottom sheet, you can move the scaffold into the content lambda of the NavigationSuiteScaffold.
This release of Material adaptive layouts is an alpha, so there’s a lot more to do. We’re actively improving the components and adding new ones. We’re also working on splitting the more general adaptive composables that are not Material specific out of the material3-adaptive library.
In the meantime, we’d love to have your input. Add adaptive layouts to your apps with ListDetailPaneScaffold and NavigationSuiteScaffold, and let us know what you think by filing a bug or feature request.
