skills.rest
yash-garg
yash-gargCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

adaptive

Adapt Android Jetpack Compose UIs for responsive layouts across device form factors.

Updated Jun 26, 2026
Search Tags:#android#jetpack compose#flexbox#grid#navigation3#mediaquery#adaptive ui
One-click install
npx skills add https://github.com/yash-garg/pi-config --skill adaptive-yash-garg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adaptive
Source: https://github.com/yash-garg/pi-config/tree/main/skills/adaptive
Command: npx skills add https://github.com/yash-garg/pi-config --skill adaptive-yash-garg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers transform fixed Android interfaces into responsive experiences that work across phones, tablets, foldables, desktops, TVs, Auto, and XR devices.

Core Features & Use Cases

  • Adaptive Compose Layouts: Guide the migration of Jetpack Compose screens to support changing window sizes, device postures, and input methods.
  • Multi-pane Navigation: Implement responsive list-detail and supporting-pane experiences using Navigation 3 Scene strategies.
  • Responsive UI Components: Apply adaptive navigation areas, Grid, FlexBox, and MediaQuery APIs for modern Android form factors.
  • Use Case: Convert a phone-only Compose app into a tablet and foldable-ready experience with adaptive navigation, multi-pane layouts, and device-aware UI behavior.

Quick Start

Use the adaptive skill to review my Compose app and update its layouts for phones, tablets, and foldable devices.

Frequently Asked Questions about adaptive

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

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

Adaptive Compose UIs for tablets and foldables use window size classes, MediaQuery, and FlexBox patterns to adjust layouts dynamically. This Skill guides the migration of fixed phone screens into responsive experiences that support changing window sizes and device postures.

What's the best way to implement multi-pane list-detail layouts in Android?▼

Multi-pane list-detail layouts in Android are best implemented using Navigation 3 Scene strategies. This Skill helps you configure responsive supporting-pane experiences that adapt their layout based on the available window size and device form factor.

How do I use MediaQuery and Grid patterns to build responsive Android UI?▼

MediaQuery and Grid patterns build responsive Android UI by evaluating window size classes and restructuring composables accordingly. This Skill applies these APIs alongside FlexBox to create layouts that automatically adapt to changing device dimensions.

Can I use Navigation 3 Scene strategies for adaptive navigation in Compose?▼

Yes, Navigation 3 Scene strategies can be used for adaptive navigation in Compose. This Skill configures responsive navigation areas and multi-pane experiences, allowing your app to switch navigation behavior based on the current device form factor.

When do I need to migrate my Android app to support changing device postures?▼

Migrating to support changing device postures is needed when targeting foldables or multi-window environments. This Skill transforms fixed interfaces into responsive Compose layouts that react dynamically to posture changes and varying input methods.

Related Skills

Explore More Software Engineering Skills→
rock-hurock-hu

xml-to-compose-migration

Convert Android XML layouts to Jetpack Compose equivalents.

Community
Intermediate
klxiaoniuklxiaoniu
174

adaptive

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

Community
Advanced
lionheartapplionheartapp

mobile-android-design

Design and implement Material Design 3 interfaces with Jetpack Compose.

Community
Intermediate
piyushverma0piyushverma0
14

adaptive-ui

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

Community
Advanced