Adaptive apps are designed to change their layout and behavior based on the device they’re running on. Whether it’s a small phone, a tablet, or a foldable device, these apps adjust elements like the interface, content, and navigation to suit the screen size and resolution. Rather than simply resizing items, adaptive apps reorganize components to make the most of the available space.
Why Use Adaptive Apps?
- Single codebase, multiple screens
Write once — your app runs smoothly on phones, tablets, foldables, and desktops. - Seamless cross-device experience
Users move between devices and expect their progress to follow — from phone to tablet, without interruption. - Supports different orientations
Adaptive apps adjust layout automatically — no more frustration when switching between portrait and landscape modes. - No need for separate versions
Avoid maintaining multiple APKs or special tablet-only builds.
How to get started
To create an adaptive app that supports all display sizes and configurations, do the following:
- Use window size classes to make layout decisions
- Build with the Compose Material 3 Adaptive library
- Use Adaptive Navigation Suite
- Test on all device types
Window size class
Window size classes are helpful tools that group screen sizes into simple categories like compact, medium, and expanded. These categories are based on how much space is available on the screen, both in width and height. By using these, developers can easily adjust how the app looks and works on different devices, like phones, tablets, and foldables — so the layout always feels just right
Add the following dependency for material3-adaptive (or use the latest version):
| implementation("androidx.compose.material3:material3-adaptive:1.1.0") |
| when (windowSizeClass.windowWidthSizeClass) { | |
| WindowWidthSizeClass.COMPACT -> { | |
| // < 600 dp Phones in portrait | |
| } | |
| WindowWidthSizeClass.MEDIUM -> { | |
| // 600 – 839 dp Phones in landscape, small tablets | |
| } | |
| WindowWidthSizeClass.EXPANDED -> { | |
| ≥ 840 dp Large tablets, foldables (unfolded), desktop | |
| } | |
| } |
Still curious? You can explore more in the official guide here.
Content panes
In Android, an activity’s layout is often referred to as a screen, such as a home screen, a list screen, or a detail screen. This is because, on most devices, one activity typically occupies the entire screen.
But on larger devices (tablets or foldables), the screen can be wide enough to show multiple activity screens side by side. In these cases, the word pane is used instead of screen to describe each section of content.
Window size classes help you decide how many panes to show at once. This way, your app can use the extra space and give users a better experience with a multi-pane layout.
Use the code below to identify the screen size and call the SinglePane and TwoPane functions to render the screen differently on the small and large devices
| when (windowSizeClass.windowWidthSizeClass) { | |
| WindowWidthSizeClass.COMPACT -> { | |
| SinglePane(selectedItem, sampleItems) | |
| } | |
| WindowWidthSizeClass.MEDIUM -> { | |
| TwoPane(sampleItems, selectedItem) | |
| } | |
| WindowWidthSizeClass.EXPANDED -> { | |
| TwoPane(sampleItems, selectedItem) | |
| } | |
| } |
| @Composable | |
| private fun SinglePane( | |
| selectedItem: Item?, | |
| sampleItems: List<Item>, | |
| ) { | |
| val selectedItemState = remember { mutableStateOf(selectedItem) } | |
| val currentItem = selectedItemState.value | |
| if (currentItem == null) { | |
| ItemListScreen( | |
| items = sampleItems, | |
| onItemClick = { item -> selectedItemState.value = item }, | |
| modifier = Modifier.fillMaxSize() | |
| ) | |
| } else { | |
| ItemDetailScreen( | |
| item = currentItem, | |
| modifier = Modifier.fillMaxSize() | |
| ) | |
| // Handle back press to go from detail to list on small screens | |
| BackHandler(enabled = selectedItemState.value != null) { | |
| selectedItemState.value = null | |
| } | |
| } | |
| } |
| @Composable | |
| private fun TwoPane( | |
| sampleItems: List<Item>, | |
| selectedItem: Item? | |
| ) { | |
| val selectedItemState = remember { mutableStateOf(selectedItem) } | |
| val currentItem = selectedItemState.value | |
| Row(modifier = Modifier.fillMaxSize()) { | |
| ItemListScreen( | |
| items = sampleItems, | |
| onItemClick = { item -> selectedItemState.value = item }, | |
| modifier = Modifier.weight(1f) | |
| ) | |
| if (currentItem != null) { | |
| ItemDetailScreen( | |
| item = currentItem, | |
| modifier = Modifier.weight(2f) | |
| ) | |
| } else { | |
| // Placeholder for detail area when no item is selected in two-pane | |
| Box( | |
| modifier = Modifier | |
| .weight(2f) | |
| .padding(16.dp), | |
| contentAlignment = Alignment.Center | |
| ) { | |
| Text( | |
| "Select an item to view its details.", | |
| style = MaterialTheme.typography.titleMedium | |
| ) | |
| } | |
| } | |
| } | |
| } |
Still curious? You can explore more in the official guide here.
Compose Material 3 Adaptive
NavigationSuiteScaffold: Automatically switches between navigation bar and navigation rail depending on app window size class and device posture.ListDetailPaneScaffold: Implements the list-detail canonical layout. Adapts the layout to the app window size. Presents a list and the detail of a list item in side‑by‑side panes on the expanded window size class, but just the list or the detail on compact and medium window size classes.SupportingPaneScaffold: Implements the supporting pane canonical layout. Presents the main content pane and a supporting pane on the expanded window size class, but just the main content pane on compact and medium window size classes.
How to test adaptive apps
Test different screen and window sizes and different device configurations. Use host‑side screenshots and Compose previews to check your app layouts. Run your app on Android Studio emulators and remote Android devices hosted in Google data centers.
I’ve created a sample Android app demonstrating adaptive layouts using Jetpack Compose. Do check it out! It showcases how to build responsive UIs that seamlessly adjust across different screen sizes, from compact phones to tablets
Job Offers
Jobs
Additional resources
- I/O presentation: Building adaptive Android apps
- Designing Adaptive Apps
Found this article useful? Follow me (Suchi Bansal) on Medium, and check out my other popular articles below!
Managing Text Overflow in Jetpack Compose Buttons
Make Android apps more accessible to all
This article was previously published on proandroiddev.com
