# Android Adaptive UI

Makes an Android app UI adapt to phones, tablets, foldables, TV and desktop.

- Repository: https://github.com/android/skills (10219 stars)
- Category: Mobile
- License: Complete terms in LICENSE.txt
- Last updated: 2026-10-29
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add android/skills --skill adaptive -g -a claude-code -y`
Codex: `npx skills add android/skills --skill adaptive -g -a codex -y`
Cursor: `npx skills add android/skills --skill adaptive -g -a cursor -y`
Gemini CLI: `npx skills add android/skills --skill adaptive -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add android/skills`

## Description

Instructions to make or update an app's UI so that it adapts to different Android devices including phones, tablets, foldables, laptops, desktop, TV, Auto, and XR. It includes how to handle different window sizes, pointing devices (such as mouse) and text entry devices (such as keyboard) using the Compose MediaQuery API, and how to preserve UI, navigation, scroll, and media playback state across configuration changes (such as folding/unfolding a foldable, rotating a device, or resizing a window). It also covers multi-pane layouts using Navigation3 Scenes, adaptive UI components (such as buttons) with varying target sizes, and adaptive layouts (including navigation areas - nav rails and nav bars) using the Compose Grid and FlexBox APIs. It also covers desktop experiences with keyboard shortcuts, tooltips and custom cursors.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

## Prerequisites

The app must:

- Use Compose for all screens. If it's still using Fragments or Views, suggest using the XML to Compose skill to migrate those screens.
- Use Jetpack Navigation 3. If it doesn't, suggest the Navigation 3 skill to migrate the app.

## Workflow to make an app adaptive

To make an app adaptive, follow these steps or a subset of them adapting to the
task.

- Step 1: Verify current UI
- Step 2: Make the navigation bar adaptive
- Step 3: Add multi-pane layouts
- Step 4: Make vertical lists adaptive by changing the number of columns
- Step 5: Hide app bars when scrolling
- Step 6: Preserve UI state across configuration changes
- Step 7: Add desktop experiences
- Step 8: Support foldable devices

## Step 1. Verify current UI

Ensure that screenshot tests exist to verify the current UI on different form
factors. If they don't exist, add the [Compose Preview Screenshot Testing
tool](references/android/studio/preview/compose-screenshot-testing-with-testsuites.md). Use the following annotation to create previews for all the major form
factors. For example:


```kotlin
@Preview(name = "Phone", device = Devices.PHONE, showBackground = true)
@Preview(name = "Foldable", device = Devices.FOLDABLE, showBackground = true)
@Preview(name = "Tablet", device = Devices.TABLET, showBackground = true)
@Preview(name = "Desktop", device = Devices.DESKTOP, showBackground = true)
annotation class FormFactorPreviews

@PreviewTest
@FormFactorPreviews
@Composable
fun FeedScreenPreview() {
    SnippetsTheme {
        Box {
            Text("My Screen")
        }
    }
}
```

<br />

## Step 2. Make the navigation bar adaptive

Bottom navigation bars are optimized for touch input when the user is holding a
phone in portrait mode. On larger screen hand-held devices, like tablets and
unfolded foldables, the navigation area must be accessible from the edge of the
screen (navigation rail).

The rest: https://github.com/android/skills/blob/HEAD/jetpack-compose/adaptive/SKILL.md