skills.rest
RavitejaKarra24
RavitejaKarra24COMMUNITY
Explore all skills by this author →
𝕏@RavitejaKarra24GitHub

adaptive

Migrate Android Compose UIs to adaptive layouts for phones, tablets, foldables, and desktops.

Updated Mar 12, 2026
Search Tags:#android#jetpack compose#grid#mediaquery#foldables#adaptive layout#navigation 3
One-click install
npx skills add https://github.com/RavitejaKarra24/dotfiles --skill adaptive-ravitejakarra24
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adaptive
Source: https://github.com/RavitejaKarra24/dotfiles/tree/main/pi/.pi/agent/skills/adaptive
Command: npx skills add https://github.com/RavitejaKarra24/dotfiles --skill adaptive-ravitejakarra24

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Android apps built only for phones break or waste space on tablets, foldables, desktops, TVs, and other form factors. This Skill provides a step-by-step workflow to make a Jetpack Compose app adapt its navigation, layouts, and lists to different window sizes, postures, and input devices. ## Core Features & Use Cases - Adaptive Navigation: Convert bottom navigation bars into NavigationSuiteScaffold layouts that switch between nav bars and nav rails, with controllable visibility on scroll. - Multi-Pane Layouts: Implement list-detail and supporting-pane layouts using Navigation 3 SceneStrategy APIs (ListDetailSceneStrategy, SupportingPaneSceneStrategy). - Adaptive Lists and Grids: Migrate LazyColumn to LazyVerticalGrid with adaptive cells, and replace fixed Column layouts with the experimental Grid and FlexBox APIs. - Device Capability Queries: Use the mediaQuery API to react to window size, posture, pointer precision, keyboard type, and viewing distance. - Use Case: You have a Compose email app that shows one screen at a time on a tablet. Use this Skill to convert it into a two-pane list-detail layout with a navigation rail and adaptive grid lists. ## Quick Start Use the adaptive skill to make my Compose app's navigation and list-detail screens adapt to tablets and foldables.

Frequently Asked Questions about adaptive

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

FAQPage Schema
How do I make my Android Compose app adaptive for tablets and foldables?▼

Follow a five-step workflow: add screenshot tests for form factors, replace the bottom navigation bar with NavigationSuiteScaffold, add list-detail or supporting-pane layouts with Navigation 3 SceneStrategy, make lists use adaptive grid columns, and hide app bars on scroll.

How to build a list-detail layout with Navigation 3 in Compose?▼

Add the androidx.compose.material3.adaptive:adaptive-navigation3 library, create a ListDetailSceneStrategy with rememberListDetailSceneStrategy, pass it to NavDisplay, and mark entries with listPane and detailPane metadata. Do not use ListDetailPaneScaffold.

Should I use NavigationSuiteScaffold or a bottom navigation bar?▼

Use NavigationSuiteScaffold from the Material 3 adaptive layouts library. It automatically shows a bottom navigation bar on phones and a navigation rail on tablets and unfolded foldables, and its state parameter lets you control visibility.

Can I use the Compose Grid and FlexBox APIs in production?▼

Grid and FlexBox are experimental APIs available from Compose 1.11.0-beta01 and require opt-in annotations such as @OptIn(ExperimentalGridApi::class). Confirm with your team before adopting them, since the APIs may change.

What are the prerequisites for using this adaptive workflow?▼

The app must use Jetpack Compose for all screens and Jetpack Navigation 3 for navigation. If it still uses Fragments, Views, or an older navigation version, migrate those first with the appropriate migration skills.

Why does placing a LazyColumn inside a Grid flexible track crash?▼

Compose prohibits querying intrinsic sizes of lazy layouts, so a standard flexible track throws IllegalStateException. Use GridTrackSize.MinMax with an explicit minimum size such as 0.dp to bypass the intrinsic measurement pass.

Related Skills

Explore More Software Engineering Skills→
Binh230199Binh230199
1

android-xml-to-compose-migration

Migrate Android XML layouts and View-based screens to Jetpack Compose.

Community
Advanced
tvh25082004tvh25082004

adaptive

Adapts Android Compose UIs to phones, tablets, foldables, and desktops using Navigation 3 Scenes, Grid, FlexBox, and MediaQuery.

Community
Advanced
decoutkhanqindevdecoutkhanqindev

debugging-recompositions

Diagnose Jetpack Compose recompositions using Layout Inspector counts and Argument Change Reasons.

Community
Intermediate
citytexicitytexi
1

adaptive

Migrates Android Compose UIs to adaptive layouts across phones, tablets, foldables, and desktops.

Community
Advanced