Compose Material 3 Adaptive, a library meant to create adaptive UIs able to adapt themselves automatically according to the current window size or device orientation, has reached 1.0 and is ready to be used in production apps.
Leveraging Letpack Compose, the new library makes it easier for developers to create apps that run on a variety of form factors, including foldable phones and wall‑mounted TVs, and adapt to configuration changes like orientation changes and window resizing in split‑screen and free‑form windowing modes.
The idea behind adaptive UIs is simple: use different UI components depending on the window size to better use any available space. For example, panes naturally lend themselves to create adaptive list-detail layouts, where you navigate from the list to the detail view on smaller screens while larger devices show both the list and the detail view in the same layout. Alternatively, you can create supporting-pane layouts, where a larger portion of the screen is occupied by the primary content area and a supporting pane, which can be displayed or not, shows the secondary content area. Along the same lines, you can use a bottom navigation bar on compact displays and replace it with a vertical navigation rail on larger windows.
The library provides several components and APIs to make it easier to create adaptive experiences and allow developers to reuse proven solutions to common problems without having to reinvent the wheel. For example, developers can use NavigationSuiteScaffold to switch between navigation bar and navigation rail based on app window size class, ListDetailPaneScaffold to implement a list-detail layout self-adapting to the app window size, and SupportingPaneScaffold to implement the supporting pane canonical layout.
The components listed above transparently adapt the information they display based on window size according to a definition of what Google calls canonical layouts, which makes it possible to pack complex behavior into simple declarations. For example, this is all you need to create an adaptive navigable list-detail layout:
val navigator = rememberListDetailPaneScaffoldNavigator<Any>()
NavigableListDetailPaneScaffold(
navigator = navigator,
listPane = {
// List pane
},
detailPane = {
// Detail pane
},
)
In case you need to customize the canonical behavior in any ways, you can access the lower-level APIs provided by the library. For example, NavigableListDetailPaneScaffold is made of a BackHandler and a ListDetailPaneScaffold and you can directly tweak the latter to make it display two panes not only on larger displays but also at a smaller medium width, or change the policy it uses to adapt to different window sizes.
Another area where Compose Material 3 Adaptive helps developers is adding support for alternative input devices, like external keyboards, mice, and styluses. In particular, the library allows developers to seamlessly add support for using a stylus to write into any TextField component.