adaptive

Migrate Jetpack Compose navigation and layouts to Navigation 3 adaptive multi-pane UIs.

6.6k|388|Updated Mar 16, 2026
One-click install
npx skills add https://github.com/android/skills --skill adaptive-android
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: adaptive
Source: https://github.com/android/skills/tree/main/jetpack-compose/adaptive
Command: npx skills add https://github.com/android/skills --skill adaptive-android

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you redesign an existing Jetpack Compose UI so it looks and works correctly across many Android device types and window sizes, including phones, tablets, foldables, desktops, TVs, Auto, and XR.

Core Features & Use Cases

  • Adaptive UI verification: Add screenshot-based validation for key form factors so regressions are caught early.
  • Adaptive navigation and multi-pane layouts: Migrate from fixed bottom navigation and single-pane navigation to Navigation 3 adaptive patterns using Material 3 adaptive layouts (NavigationSuiteScaffold) and multi-pane SceneStrategy (list-detail, supporting pane).
  • Responsive content layout: Improve readability by adapting vertical lists into adaptive column grids and using adaptive Grid and FlexBox approaches for varying space and input methods.

Quick Start

Update your Compose screens by migrating to Navigation 3 and rebuilding navigation and layouts with Material 3 adaptive components, ensuring multi-pane behavior is implemented via Navigation 3 SceneStrategy.

Frequently Asked Questions about adaptive

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a Jetpack Compose UI adaptive for tablets and foldables?

To make a Jetpack Compose UI adaptive, migrate to Navigation 3 and rebuild layouts using Material 3 adaptive components like NavigationSuiteScaffold and multi-pane SceneStrategy for list-detail and supporting panes.

How does Navigation 3 SceneStrategy handle multi-pane layouts on large screens?

Navigation 3 SceneStrategy handles multi-pane layouts by driving visibility for list-detail and supporting panes, allowing Compose screens to dynamically adapt across phones, tablets, and foldables.

Can I migrate an existing Android app to Material 3 adaptive navigation?

You can migrate existing Android apps by replacing fixed bottom navigation with NavigationSuiteScaffold and implementing Navigation 3 multi-pane SceneStrategy to support large-screen window sizes.

What's the best way to verify adaptive UI layouts across different window sizes?

The best way to verify adaptive Compose UIs is by adding screenshot-based validation for key form factors, ensuring visual correctness and catching regressions early across varying window sizes.

How do I convert vertical lists to adaptive grids in Jetpack Compose?

Convert vertical lists to adaptive grids by applying adaptive column strategies and FlexBox approaches in Jetpack Compose, improving readability and adapting content layout for varying space and input methods.

Does this approach support scroll-aware app bar behavior in adaptive layouts?

Yes, adaptive Compose layouts support scroll-aware app bar behavior alongside adaptive grid column strategies and multi-pane navigation, ensuring usable UI across changing window sizes and device form factors.