skills.rest
premex-ab
premex-abOFFICIAL
Explore all skills by this author →
GitHub

adaptive

Create adaptive Jetpack Compose UI layouts using MediaQuery and Navigation 3 SceneStrategy.

1|Updated Mar 17, 2026
Search Tags:#android#jetpack compose#adaptive ui#navigation 3#multi-pane layouts#medialquery#grid flexbox
One-click install
npx skills add https://github.com/premex-ab/claude-marketplace --skill adaptive
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adaptive
Source: https://github.com/premex-ab/claude-marketplace/tree/main/plugins/android-adaptive/skills/adaptive
Command: npx skills add https://github.com/premex-ab/claude-marketplace --skill adaptive

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The adaptive skill helps you redesign an Android Jetpack Compose UI so it looks and behaves correctly across phones, tablets, foldables, desktop-like screens, TV, Auto, and XR—handling window size, posture, input devices, multi-pane navigation, and responsive layouts.

Core Features & Use Cases

  • Adaptive layout planning with verification: Ensures you have screenshot tests for major form factors and uses Compose preview screenshot testing guidance when they are missing.
  • Responsive navigation areas and multi-pane UI: Migrates bottom navigation to adaptive navigation (rail vs bar) and implements multi-pane layouts using Navigation 3 SceneStrategy (list-detail and supporting pane).
  • Device capability–aware UI decisions: Uses Compose MediaQuery concepts to vary layout and interaction patterns based on pointer precision, keyboard type, and screen/window characteristics.
  • Scalable content layouts: Adapts vertical lists and grids by switching to adaptive column counts and using Grid/FlexBox-based approaches for varying screen sizes and densities.

Quick Start

Use the adaptive skill to migrate your app to Jetpack Compose (screens), verify screenshot coverage for key form factors, then update navigation and layout using Navigation 3 SceneStrategy for multi-pane support.

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 across Android phones, tablets, and foldables?▼

To make Jetpack Compose UI adaptive, use MediaQuery-driven layout decisions to adjust components based on window size and posture. This involves migrating bottom navigation to a navigation rail and utilizing multi-pane layouts to ensure correct rendering across varying form factors.

How do I implement multi-pane navigation with list-detail layouts in Compose?▼

Implement multi-pane navigation in Compose using Navigation 3 SceneStrategy to manage list-detail and supporting panes. This approach allows you to configure adaptive scenes that display simultaneously on larger screens like tablets and foldables while collapsing on phones.

When should I switch bottom navigation to a navigation rail in Android?▼

Switch bottom navigation to a navigation rail when adapting your Android UI for expanded window sizes. MediaQuery assesses screen width and device posture, triggering the layout migration to a navigation rail to optimize vertical space on tablets and foldables.

Does adaptive Compose UI require specific screenshot testing for different form factors?▼

Adaptive Compose UI requires screenshot tests for major form factors to verify layout migrations. The skill guides you to use Compose preview screenshot testing when coverage is missing, ensuring responsive navigation and multi-pane layouts render correctly.

How do I adapt grid and list column counts for varying Android screen densities?▼

Adapt grid and list column counts by switching to scalable content layouts using Grid and FlexBox-based Compose APIs. These approaches dynamically adjust vertical lists and grid structures based on MediaQuery window size characteristics and screen densities.

Can I use Compose MediaQuery to handle device capability-aware UI decisions like keyboard type?▼

Yes, you can use Compose MediaQuery concepts to make device capability-aware UI decisions. This allows your layout and interaction patterns to vary based on pointer precision, keyboard type, and specific screen or window characteristics.

Related Skills

Explore More Software Engineering Skills→
ekawijayasusiloekawijayasusilo

adaptive

Implement adaptive Jetpack Compose layouts with Navigation 3 and MediaQuery.

Community
Advanced
klxiaoniuklxiaoniu
174

adaptive

Develop adaptive Compose Android UI layouts using Navigation 3 SceneStrategy and MediaQuery.

Community
Advanced
fornewidfornewid
5

https://developer.android.com/agents/skills/jetpack-compose/adaptive/skill

Implement adaptive Jetpack Compose UI patterns for multi-window and large-screen form factors.

Community
Advanced
piyushverma0piyushverma0
14

adaptive-ui

Provide adaptive UI guidelines for Android apps across devices and WindowSizeClass breakpoints.

Community
Advanced