Android Adaptive UI Skill
Make Jetpack Compose apps adaptive to phones, tablets, foldables, desktops, and more — with multi-pane layouts and flexible components.
The skill requests no permissions or performs sensitive operations, only providing code modification guidance. No malicious behavior, data leakage, or destructive defaults identified. Dependencies on external libraries (Compose 1.11.0-beta01, 1.12.0-beta02) and network resources (developer.android.com) are within the user's project, risk is manageable. Publisher identity unverified but not negative evidence. Score 20: data flow transparent, no over-permission, but user confirmation mechanisms incomplete (e.g., Step 4.2 only requires confirmation for experimental API use, other changes no explicit confirmation).
Instructions internally consistent, steps clear, but key paths depend on experimental APIs (Grid, FlexBox), and referenced docs may mismatch due to version differences. No test suite or CI verification provided; static read cannot verify reproducibility. Limited failure feedback, some steps lack diagnostic guidance on failure. Score 12: happy path plausible, but tests, edge cases, and error handling thin.
Use case clear (Compose UI adaptation), audience Android developers. Trigger conditions clear (when need to adapt UI to different devices). Environment fit: docs and target platforms aim at global developers, but core dependency on developer.android.com may be inaccessible in mainland China, with no alternative provided. Score 13: scenario and boundaries clear, but environment dependency not fully addressed.
Well-structured documentation, prerequisites, steps, examples, reference links complete, license clear (Apache-2.0), metadata includes author and update date. Version info partially clear (experimental APIs), but lacks changelog and maintenance responsibility statement. Score 14: information architecture good, but versioning and governance incomplete.
Skill claims to guide making UI adaptive, steps concrete and actionable. But as static read, cannot verify output directly usable; some steps rely on user manual verification (e.g., screenshot tests), and no alternative or cost-benefit analysis. Score 7: core task can be completed, but evidence of output completeness and direct usability limited.
Content based mainly on official Google docs, but no independent validation or third-party evidence. Reference paths exist but cannot confirm accessibility. No tests or CI covering key skill paths. Score 5: auditable reference material, but static read cannot reproduce, and coverage insufficient.
- The experimental APIs (Grid, FlexBox) referenced may change and require Compose 1.12.0-beta02; users need to verify version compatibility.
- Core documentation is hosted on developer.android.com, which may be unstable in mainland China; prepare alternatives in advance.
- Skill requires Jetpack Navigation 3 and Compose; if not yet used, migration adds implementation cost.
- Some steps (e.g., screenshot tests) require manual verification; cannot be fully automated.
What does this skill do, and when should you use it?
This skill provides step-by-step instructions to transform a Jetpack Compose app into an adaptive UI that responds to different screen sizes, input methods (mouse, keyboard), and device types. It covers replacing bottom nav bars with adaptive navigation suites, implementing multi-pane layouts (list-detail and supporting pane) via Navigation 3 scenes, making lists adapt their column count, and hiding app bars on scroll. It also emphasizes screenshot testing and proper use of Compose experimental APIs like Grid and FlexBox.
The skill walks through five steps: verifying current UI with screenshot tests, migrating navigation bar to NavigationSuiteScaffold (with visibility control), adding list-detail and supporting pane layouts using Navigation 3 SceneStrategy, making vertical lists adaptive by switching to LazyVerticalGrid or Grid with adaptive cell sizes, and hiding app bars on scroll. It uses MediaQuery to query device capabilities and provides code snippets for each transformation. It requires the app to already use Compose and Jetpack Navigation 3.
- Developers wanting to add a list-detail two-pane layout on tablets for an email or notes app.
- Teams needing to replace a bottom navigation with a navigation rail on larger screens.
- Developers who want to make a LazyColumn adapt its number of columns based on screen width.
- Developers who need to verify UI across phone, foldable, tablet, and desktop via screenshot tests.
- Apps that benefit from hiding the app bar when scrolling to focus on content.
What are this skill's strengths and limitations?
- Clear, step-by-step workflow with code examples.
- Uses modern Navigation 3 SceneStrategy instead of deprecated pane scaffolds.
- Covers a wide range of adaptive APIs (MediaQuery, Grid, FlexBox) with links to official docs.
- Emphasizes testing via screenshot previews and tests.
- Guides on handling navigation visibility and back button behavior appropriately.
- Strict prerequisites: requires full Compose and Navigation 3, making migration hard for older apps.
- Some APIs (Grid, FlexBox) are experimental and require Compose 1.11.0-beta01+, which may not be acceptable.
- No automated migration; relies on manual steps and screenshot verification.
- List-detail pattern is discouraged for detail screens that benefit from full-screen content.
How do you install this skill?
This skill is part of the Android skills repository. Install it using Android CLI: run android skills add --skill=adaptive --project=. in your project directory or android skills add --all to install all skills. The SKILL.md will be placed under jetpack-compose/adaptive/.
How do you use this skill?
Invoke the skill via an AI assistant by saying something like 'Make this app adaptive for tablets'. The AI will follow the SKILL.md workflow, inspect your Compose code, and apply the recommended changes step by step, possibly suggesting to add screenshot tests and use preview annotations.
How does this skill compare with similar options?
Compared to manually writing adaptive layouts, this skill offers a standardized, best-practice-driven approach, specifically recommending Navigation 3 Scenes over older ListDetailPaneScaffold, which is now considered outdated.