skills.rest
kabindra-shrestha
kabindra-shresthaCOMMUNITY
Explore all skills by this author →
GitHub

adaptive

Migrates Jetpack Compose UIs to adaptive layouts across phones, tablets, foldables, and desktop form factors.

3|Updated Aug 4, 2024
Search Tags:#android#jetpack compose#grid#mediaquery#multi-pane#adaptive layout#navigation 3
One-click install
npx skills add https://github.com/kabindra-shrestha/Clean-Architecture-Kotlin-Compose-Multiplatform --skill adaptive-kabindra-shrestha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adaptive
Source: https://github.com/kabindra-shrestha/Clean-Architecture-Kotlin-Compose-Multiplatform/tree/main/.agents/skills/jetpack-compose/adaptive
Command: npx skills add https://github.com/kabindra-shrestha/Clean-Architecture-Kotlin-Compose-Multiplatform --skill adaptive-kabindra-shrestha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Apps built only for phones break or waste space on tablets, foldables, desktops, and other form factors. This Skill provides a step-by-step workflow to make a Jetpack Compose app's UI adapt to different window sizes, input devices, and postures. ## Core Features & Use Cases - Adaptive navigation: Converts bottom navigation bars into NavigationSuiteScaffold layouts that switch between nav bars and nav rails, with visibility control via NavigationSuiteScaffoldState. - Multi-pane layouts: Implements list-detail and supporting-pane layouts using Navigation 3 SceneStrategy (ListDetailSceneStrategy, SupportingPaneSceneStrategy) instead of legacy scaffold APIs. - Adaptive lists and grids: Migrates LazyColumn to LazyVerticalGrid with GridCells.Adaptive, and replaces fixed Column layouts with the experimental Grid and FlexBox APIs. - Device capability queries: Uses the mediaQuery API to react to window size, posture, pointer precision, keyboard type, and viewing distance. - Use Case: You have a Compose app with a bottom nav bar and single-pane screens. Use this Skill to convert it so tablets show a nav rail and a two-pane list-detail layout, verified with screenshot tests across form factors. ## Quick Start Make my Compose app's UI adaptive for tablets and foldables, starting with the navigation bar and the list-detail screens.

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 app adaptive for tablets and foldables?▼

Follow a staged workflow: replace the bottom navigation bar with NavigationSuiteScaffold, add multi-pane layouts using Navigation 3 SceneStrategy, convert vertical lists to adaptive grids, and hide app bars on scroll. Verify each step with screenshot tests across form factors.

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, and pass it to NavDisplay. Mark entries with ListDetailSceneStrategy.listPane() and detailPane() metadata.

Should I use ListDetailPaneScaffold or Navigation 3 SceneStrategy for multi-pane layouts?▼

Use the Navigation 3 SceneStrategy approach with ListDetailSceneStrategy or SupportingPaneSceneStrategy. The skill explicitly directs away from ListDetailPaneScaffold and SupportingPaneScaffold in favor of scene-based adaptive navigation.

Does the Compose Grid API support lazy loading of large lists?▼

No, Grid does not support lazy loading and is meant for structural two-dimensional layouts with a fixed set of items. For large homogeneous data sets, use LazyVerticalGrid with GridCells.Adaptive instead.

What are the prerequisites for using this adaptive UI workflow?▼

The app must use Jetpack Compose for all screens and Jetpack Navigation 3 for navigation. Apps still on Fragments, Views, or older navigation versions should migrate those first before applying adaptive layout changes.

Are the Compose Grid, FlexBox, and mediaQuery APIs stable?▼

No, Grid, FlexBox, and mediaQuery 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 in production code.

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
maxrave-devmaxrave-dev
10.4k

compose-performance-audit

Analyze Jetpack Compose code and profiling data to diagnose UI performance issues.

Community
Advanced
fal3fal3
13

Cross-Platform App Development Skill

Unify SwiftUI UI and behavior across iOS, iPadOS, macOS, watchOS, and tvOS.

Community
Intermediate