skills.rest
ekawijayasusilo
ekawijayasusiloCOMMUNITY
Explore all skills by this author →
GitHub

adaptive

Implement adaptive Jetpack Compose layouts with Navigation 3 and MediaQuery.

Updated May 22, 2026
Search Tags:#android#jetpack compose#adaptive ui#navigation 3#grid flexbox#multi-pane layout#medaquery
One-click install
npx skills add https://github.com/ekawijayasusilo/kmp_template --skill adaptive-ekawijayasusilo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adaptive
Source: https://github.com/ekawijayasusilo/kmp_template/tree/main/.claude/skills/adaptive
Command: npx skills add https://github.com/ekawijayasusilo/kmp_template --skill adaptive-ekawijayasusilo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Adaptive UI design prevents your Jetpack Compose app from looking broken or hard to use across phones, tablets, foldables, desktops, and other form factors by ensuring navigation, layouts, and controls respond to window size and input methods.

Core Features & Use Cases

  • Adaptive navigation areas: Converts a touch-first bottom navigation into an adaptive navigation rail and manages its visibility while maintaining the existing behavior using NavigationSuiteScaffold state.
  • Multi-pane layouts (list-detail and supporting panes): Implements canonical multi-pane patterns with Navigation 3 SceneStrategy (instead of older scaffolds) and adds the correct pane metadata and placeholders.
  • Responsive content density: Makes vertical content adapt by switching list/grid strategies and changing column counts based on available space, and uses experimental Grid/controls when needed.
  • Input- and device-aware rendering: Uses Compose MediaQuery to adjust UI for pointer precision, keyboard presence/type, window posture, and similar capabilities.
  • Adaptive component sizing: Targets varying button/control sizes and supports navigation-area layouts (nav rails/nav bars) across breakpoints.

Quick Start

Ask the adaptive skill to update your Compose screens so they support multi-pane Navigation 3 layouts and adaptive navigation rails using MediaQuery across all major form factors.

Frequently Asked Questions about adaptive

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

FAQPage Schema
How do I implement adaptive Jetpack Compose layouts for multiple screen sizes?▼

Adaptive Compose layouts use MediaQuery and window size breakpoints to dynamically switch between list and grid strategies, ensuring UI elements render correctly across diverse Android device form factors.

How do I set up multi-pane list-detail navigation in Jetpack Compose?▼

Multi-pane list-detail navigation in Jetpack Compose is implemented using Navigation 3 SceneStrategy, which manages correct pane rendering, metadata, and placeholders instead of relying on older scaffolds.

Does Jetpack Compose support switching bottom navigation to a navigation rail on larger screens?▼

Yes, Jetpack Compose supports switching bottom navigation to a navigation rail using NavigationSuiteScaffold state, which manages adaptive navigation visibility while maintaining existing touch-first behavior on smaller screens.

How does Compose MediaQuery handle input methods and device posture?▼

Compose MediaQuery handles input methods and device posture by adjusting UI rendering based on pointer precision, keyboard presence, and window posture, ensuring controls adapt to the active input mode.

Can I migrate an existing Compose app to Navigation 3 without breaking current screens?▼

Migrating an existing Compose app to Navigation 3 involves replacing older scaffolds with SceneStrategy directives for multi-pane layouts, using Compose-only screens and screenshot-test validation to maintain correct rendering.

What is the best way to adjust Compose content density for tablets and foldables?▼

Adjusting Compose content density for tablets and foldables is best achieved using experimental Grid controls and FlexBox conditions to change column counts based on available space and responsive breakpoints.

Related Skills

Explore More Software Engineering Skills→
premex-abpremex-ab
1

adaptive

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

Official
Advanced
klxiaoniuklxiaoniu
174

adaptive

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

Community
Advanced
piyushverma0piyushverma0
14

adaptive-ui

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

Community
Advanced
leogallegoleogallego
1

adaptive

Design adaptive Android UIs with Compose MediaQuery and Navigation3 Scenes.

Community
Advanced