Skip to content
Get packs

Adaptive Android UI

Makes Compose Android UIs adapt to phones, tablets, foldables, desktop and more

Source Download skill
Repository
android/skills
Stars
10,278
Licence
Apache-2.0
Files
15 files

What it does

When installed, the agent gets step-by-step guidance for making an Android app's screen layouts respond to different device sizes and types, such as phones, tablets, foldables, laptops and TVs. It explains how to switch to navigation rails on larger screens, build list-detail and multi-pane layouts with Navigation 3, use adaptive grid and flexbox layouts, keep UI state through rotation or folding, and add desktop touches like keyboard shortcuts and custom cursors. It also points to screenshot-test previews for each form factor.

Great for

  • Android developers adapting an existing Jetpack Compose app to tablets, foldables or desktop
  • Teams using Navigation 3 who want multi-pane list-detail layouts
  • Developers who need to preserve state across configuration changes such as folding or resizing

Skip it if

  • Apps still built with Fragments or Views or not using Navigation 3, since the skill says these must be migrated first using other skills; the guidance will not apply cleanly
  • Non-developers looking for a finished app or design, since it gives coding instructions rather than ready-made output
  • Projects needing the deprecated ListDetailPaneScaffold or SupportingPaneScaffold, because the skill explicitly forbids them in favour of Navigation 3 SceneStrategy

Try asking

  • “Make my Compose app's bottom navigation switch to a navigation rail on tablets”
  • “Add a list-detail layout to my notes screen that works on foldables and tablets”
  • “Set up screenshot tests with phone, foldable, tablet and desktop previews for my feed screen”
  • “Keep scroll and media playback state when the user rotates the device or resizes the window”
Step-by-step guide: how to use Adaptive Android UIInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the Apache-2.0 licence and an attribution note.

    adaptive.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip adaptive.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip adaptive.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask the agent to verify the current UI with screenshot tests first (Step 1), so you can compare before and after changes.
  • Name the specific screen you want adapted, such as a list-detail feed, so the agent applies only the relevant steps.
  • Check the referenced Kotlin code against current Material 3 adaptive library versions before shipping, since the skill's last-updated date is 2026-10-24 and APIs may change.

What's inside

  • references/android/develop/ui/compose/layouts/adaptive/flexbox/container-behavior.md
  • references/android/develop/ui/compose/layouts/adaptive/flexbox/get-started.md
  • references/android/develop/ui/compose/layouts/adaptive/flexbox/index.md
  • references/android/develop/ui/compose/layouts/adaptive/flexbox/item-behavior.md
  • references/android/develop/ui/compose/layouts/adaptive/grid/container-properties.md
  • references/android/develop/ui/compose/layouts/adaptive/grid/get-started.md
  • references/android/develop/ui/compose/layouts/adaptive/grid/index.md
  • references/android/develop/ui/compose/layouts/adaptive/grid/item-properties.md
  • references/android/develop/ui/compose/layouts/adaptive/mediaquery/index.md
  • references/android/guide/navigation/navigation-3/recipes/material-listdetail.md
  • references/android/guide/navigation/navigation-3/save-state.md
  • references/android/studio/preview/compose-screenshot-testing-with-testsuites.md
  • references/custom_cursors.md
  • references/foldable-tabletop.md
  • SKILL.md

Redistributed unmodified from android/skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.