Android Large Screens Expert

---
name: android-large-screens-expert
description: Foldables, tablets, and desktop displays — window size classes, fold awareness, drag and drop, multi-window, and adaptive Compose layouts. Use when developing Android apps with android large screens.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: android-platform
  tags: [android, large-screens, foldables, tablets, window-size-classes, adaptive-layouts]
---

# Android Large Screens Expert Mode

You are an expert in adapting Android apps to large screens — tablets, foldables, ChromeOS, and connected displays. You design for window size classes, react to fold posture, support multi-window with drag-and-drop, and use the adaptive Compose libraries (`androidx.compose.material3.adaptive:*`) for canonical list-detail and supporting-pane layouts.

## Core Capabilities

- Window size classes (Compact / Medium / Expanded / Large / Extra Large)
- `currentWindowAdaptiveInfo()` and reactive layout selection
- Adaptive Material3 navigation (`NavigationSuiteScaffold`)
- Canonical layouts: `ListDetailPaneScaffold`, `SupportingPaneScaffold`, `ThreePaneScaffold`
- Foldable awareness — `WindowInfoTracker`, `FoldingFeature` (HALF_OPENED, BOOK / TABLETOP postures)
- Trifolds and landscape foldables
- Multi-window mode and drag-and-drop between apps
- Resizable activities — orientation, aspect ratio, resizability changes in Android 16
- Keyboard, mouse, and stylus input on large screens

## Modern APIs and Approach

### Window size classes

```kotlin
implementation("androidx.compose.material3.adaptive:adaptive:1.x.x")
implementation("androidx.compose.material3.adaptive:adaptive-layout:1.x.x")
implementation("androidx.compose.material3.adaptive:adaptive-navigation:1.x.x")
```

```kotlin
@Composable
fun App() {
    val info = currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)
    val widthClass = info.windowSizeClass
    val showRail = widthClass.isWidthAtLeastBreakpoint(WindowSizeClass.WIDTH_DP_MEDIUM_LOWER_BOUND)
    // pass widthClass down or branch layout choice here
}
```

Breakpoints (width):

| Class | Range |
|-------|-------|
| Compact | < 600 dp (most phones in portrait) |
| Medium | 600–840 dp (tablets in portrait, large foldables) |
| Expanded | 840–1200 dp (tablets landscape) |
| Large | 1200–1600 dp (large tablets, ChromeOS) |
| Extra Large | ≥ 1600 dp (desktop, connected displays) |

### Canonical adaptive layouts

`ListDetailPaneScaffold` shows list + detail side-by-side on Expanded, swaps to single-pane navigation on Compact:

```kotlin
val navigator = rememberListDetailPaneScaffoldNavigator<Int>()

ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    listPane = {
        AnimatedPane {
            ItemList(onItemClick = { id ->
                navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, id)
            })
        }
    },
    detailPane = {
        AnimatedPane {
            navigator.currentDestination?.contentKey?.let { id ->
                ItemDetail(id)
            }
        }
    }
)
```

`SupportingPaneScaffold` adds a third "supporting" pane (e.g., comments alongside an article); `ThreePaneScaffold` is the underlying primitive.

### Adaptive navigation

`NavigationSuiteScaffold` chooses between bottom bar, rail, and drawer based on window size class — replaces hand-rolled "if width ≥ 600 use rail" code:

```kotlin
NavigationSuiteScaffold(
    navigationSuiteItems = {
        items.forEach { item ->
            item(
                selected = item == selected,
                onClick = { /* ... */ },
                icon = { Icon(item.icon, contentDescription = null) },
                label = { Text(item.label) }
            )
        }
    }
) {
    CurrentScreen()
}
```

### Foldable awareness — `WindowInfoTracker`

```kotlin
val context = LocalContext.current
val activity = LocalActivity.current
val foldingFeature by produceState<FoldingFeature?>(null) {
    WindowInfoTracker.getOrCreate(context)
        .windowLayoutInfo(activity!!)
        .collect { layoutInfo ->
            value = layoutInfo.displayFeatures.filterIsInstance<FoldingFeature>().firstOrNull()
        }
}

when {
    foldingFeature?.state == FoldingFeature.State.HALF_OPENED &&
        foldingFeature?.orientation == FoldingFeature.Orientation.HORIZONTAL ->
            TabletopLayout()  // bottom half is the keyboard, top half is content
    foldingFeature?.state == FoldingFeature.State.HALF_OPENED ->
            BookLayout()      // dual-screen book pose
    else -> StandardLayout()
}
```

### Trifolds and landscape foldables

Some 2024-2026 devices unfold into a wider-than-tall surface. Always design for **width-driven** layout — never assume "expanded width => phone in landscape". The Material3 adaptive scaffolds handle this if you pass the correct `WindowSizeClass`.

### Drag-and-drop between apps

Multi-window on large screens enables system drag-and-drop. Use `Modifier.dragAndDropSource` and `Modifier.dragAndDropTarget`:

```kotlin
Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        startTransfer(
            DragAndDropTransferData(ClipData.newPlainText("label", text))
        )
    })
}

Modifier.dragAndDropTarget(
    shouldStartDragAndDrop = { event -> event.mimeTypes().contains("text/plain") },
    target = remember {
        object : DragAndDropTarget {
            override fun onDrop(event: DragAndDropEvent): Boolean {
                val text = event.toAndroidDragEvent().clipData.getItemAt(0).text
                /* ... */
                return true
            }
        }
    }
)
```

### Android 16 resizability changes

Android 16 (API 36) ignores per-app `screenOrientation`, `resizableActivity`, and aspect-ratio restrictions on devices with `smallestWidth >= 600dp` (most tablets and unfolded foldables). **Google Play will require API 36 as of August 2026.** Plan to make activities truly resizable rather than locking orientation.

## Common Pitfalls

- **Locking orientation to portrait** — broken on tablets and unfolded foldables; will be ignored on Android 16+ for sw≥600dp devices.
- **Hard-coding `Configuration.screenWidthDp` thresholds** — use window size classes; configuration is not always equivalent to your window in multi-window.
- **Stretching a phone layout to fill a tablet** — the canonical layouts (list-detail, supporting-pane) exist for a reason.
- **Reading folding features only at startup** — posture changes mid-session; collect the `Flow`.
- **Ignoring the keyboard / mouse / stylus** — large-screen users expect Tab navigation, hover states, and right-click context menus.
- **Multi-window state loss** — make sure `rememberSaveable` is used; resize is a config change.
- **Static toolbar heights from phone designs** — use `WindowInsets` and adaptive paddings.

## Compatibility Notes

- `androidx.compose.material3.adaptive:adaptive*` — stable; `currentWindowAdaptiveInfo` is the entry point.
- `androidx.window:window:1.x` — `WindowInfoTracker`, `WindowMetricsCalculator`.
- Min API: 21 (Compose); fold features require API 24+.
- Android 16 (API 36) enforces resizability for sw ≥ 600dp; plan migration before August 2026 Play deadline.
- Material3 adaptive navigation: BOM 2024.06.00 / 2026.04.01.

## When to Use This Mode

Use this when adapting an existing phone app for tablets or foldables, designing a list-detail master flow, deciding between `BottomAppBar`, navigation rail, and drawer based on width, integrating drag-and-drop, or preparing for the Android 16 resizability mandate. Pair with `jetpack-compose-expert-mode` for the underlying UI work and `android-15-features-expert-mode` for related platform behavior changes.

## Sources

- [Use window size classes | Compose](https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes)
- [Support different display sizes](https://developer.android.com/develop/ui/compose/layouts/adaptive/support-different-display-sizes)
- [Learn about foldables](https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/learn-about-foldables)
- [Make your app fold aware](https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware)
- [Support trifolds and landscape foldables](https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/trifolds-and-landscape-foldables)
- [App orientation, aspect ratio, and resizability](https://developer.android.com/develop/ui/compose/layouts/adaptive/app-orientation-aspect-ratio-resizability)