Adapting Android Apps for Large Screens and Foldable Devices with WindowSizeClass and Jetpack Tools

In the past year, about 100 million new tablet devices were activated and Chrome OS activations grew 92%, meaning more than 250 million large‑screen Android devices are in use, with foldable device adoption increasing over 250%. Manufacturers now see large‑screen optimization as a key opportunity.

Developers are encouraged to treat the ecosystem as a whole rather than separating phones and tablets. New APIs and tools are introduced to help quickly enter this segment.

WindowSizeClass – a set of subjective viewport breakpoints (Compact, Medium, Expanded) that replace error‑prone isTable logic. The new WindowSizeClass API is available in Jetpack WindowManager 1.1 and provides widthClass and heightClass properties.

class WindowMetrics {
class WindowSizeClass(val name: String) {
companion object {
val COMPACT = WindowSizeClass("COMPACT")
val MEDIUM = WindowSizeClass("MEDIUM")
val EXPANDED = WindowSizeClass("EXPANDED")
}
}
val widthClass: WindowSizeClass get = ...
val heightClass: WindowSizeClass get = ...
}

From Android 12 onward, apps can be freely resized and run in multi‑window mode. Reference Devices (Phone, Foldable, Tablet, Desktop) are provided in Android Studio Bumblebee to test layouts across the full range of window size classes.

Practical example – Trackr

The open‑source task‑manager app Trackr is updated to support large screens. The bottom navigation bar is replaced with a NavigationRailView for width ≥ 600 dp, and a SlidingPaneLayout is used to show a two‑pane list/detail UI on expanded devices.

// main_activity.xml
<androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.navigationrail.NavigationRailView
android:id="@+id/navigation_rail"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:headerLayout="@layout/navigation_rail_header"
app:labelVisibilityMode="unlabeled"
app:menu="@menu/navigation_rail" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Resource‑qualified layouts (e.g., layout-w600dp ) ensure the NavigationRail only appears on wider screens, while the bottom bar and FAB are removed from the tablet layout.

// w600dp/tasks_fragment.xml
<layout>
<androidx.coordinatorlayout.widget.CoordinatorLayout>
...
<!-- BottomAppBar removed for w600dp -->
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

For two‑pane navigation, a SlidingPaneLayout hosts a FragmentContainerView for the task list and another for the detail fragment.

// tasks_two_pane_fragment.xml
<layout>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
android:id="@+id/sliding_pane_layout">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/list_pane"
android:name="com.example.android.trackr.ui.tasks.TasksFragment"
... />
<androidx.fragment.app.FragmentContainerView
android:id="@+id/detail_pane"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/task_detail" />
</androidx.slidingpanelayout.widget.SlidingPaneLayout>
</layout>

In Jetpack Compose, the same concepts are applied using WindowSizeClass to switch between a modal drawer on compact devices and a NavigationRail on larger screens. The JetnewsApp composable demonstrates this adaptive pattern.

@Composable
fun JetnewsApp() {
val windowSize = rememberWindowSizeState()
val isDrawerActive = windowSize == WindowSize.Compact
ModalDrawer(gesturesEnabled = isDrawerActive, drawerContent = { … }) {
val showNavRail = isDrawerActive
Row {
if (showNavRail) AppNavRail()
JetnewsNavGraph()
}
}
}

Compose also supports a two‑pane list/detail layout for expanded screens by placing PostList and PostContent side‑by‑side inside a Row , with animated cross‑fade transitions.

Testing across the diverse device set is streamlined with Gradle‑managed virtual devices and device groups. Developers can define devices (e.g., Pixel 2 API 29, Nexus 9 API 30) and run instrumentation tests on all of them with a single command, optionally using headless automated test devices to reduce resource consumption.

testOptions {
devices {
pixel2api29(com.android.build.api.dsl.ManagedVirtualDevice) {}
nexus9api30(com.android.build.api.dsl.ManagedVirtualDevice) {
device = "Nexus 9"
apiLevel = 30
systemImageSource = "google"
abi = "x86"
}
}
deviceGroups {
mediumAndExpandedWidth {
targetDevices.addAll(devices.pixel2api29)
targetDevices.addAll(devices.nexus9api30)
}
}
}

Gradle can also shard tests across multiple managed devices and use headless automated test devices to lower CPU and memory usage, making large‑scale UI testing feasible.

In summary, the new design guidelines, WindowSizeClass API, Reference Devices, and updated tooling enable Android developers to create adaptive, high‑quality experiences for the rapidly expanding large‑screen and foldable market.