Skip to content
Back to skills

Android Large Screens Expert

ASecurity

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.

  • 9 stars
  • 0 votes
  • 0 copies
  • 4 views
  • Added September 8, 2026
developmentgokotlinreactapi

Works with

  • cli
  • api

Security analysis

A100/100

Scanned September 8, 2026

npx -y skills add anubhavg-icpl/vibe --skill android-large-screens-expert --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Android Large Screens Expert?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Android Large Screens Expert
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/anubhavg-icpl-android-large-screens-expert/badge)](https://www.skillsdirectory.com/skills/anubhavg-icpl-android-large-screens-expert)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
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)

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.