New APIs for adaptive layouts in Jetpack Compose

Ian G. Clifton on 2023-11-15

New APIs for adaptive layouts in Jetpack Compose

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.

Material adaptive layouts

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.

List-detail layout

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.

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.

Navigation bar or navigation rail

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.

What’s next?

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.