skills.rest
Zeyad-37
Zeyad-37COMMUNITY
Explore all skills by this author →
GitHub

android-compose-adaptive

Adapts Jetpack Compose UIs to phones, tablets, foldables, desktop, TV, and XR form factors.

Updated Apr 21, 2026
Search Tags:#android#jetpack compose#foldables#material 3#adaptive ui#navigation 3#multi-pane layout
One-click install
npx skills add https://github.com/Zeyad-37/tech-agency --skill android-compose-adaptive-zeyad-37
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: android-compose-adaptive
Source: https://github.com/Zeyad-37/tech-agency/tree/main/.claude/skills/android-compose-adaptive
Command: npx skills add https://github.com/Zeyad-37/tech-agency --skill android-compose-adaptive-zeyad-37

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Android apps built for phones often break or waste space on tablets, foldables, desktops, TVs, and other form factors. This Skill provides a structured workflow to make an existing Compose UI adaptive across window sizes, input devices, and postures. ## Core Features & Use Cases - Adaptive navigation: Migrates bottom navigation bars to NavigationSuiteScaffold with nav rails on large screens and scroll-aware visibility control. - Multi-pane layouts: Implements list-detail and supporting-pane layouts using Navigation 3 SceneStrategy APIs (ListDetailSceneStrategy, SupportingPaneSceneStrategy). - Adaptive lists and layouts: Converts LazyColumn to adaptive LazyVerticalGrid, migrates non-lazy Column lists to the experimental Grid API, and uses FlexBox and mediaQuery for device-capability-driven layouts. - Use Case: You have a Compose app that shows a single-column list on all devices. Use this Skill to convert it into a two-pane list-detail layout on tablets, switch the bottom bar to a nav rail, and make grids adapt column counts to window width. ## Quick Start Make my Compose app's UI adaptive across phones, tablets, and foldables following the adaptive workflow steps.

Frequently Asked Questions about android-compose-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 five-step workflow: verify UI with screenshot tests, replace the bottom navigation bar with NavigationSuiteScaffold, add multi-pane layouts using Navigation 3 SceneStrategy, make lists adaptive with GridCells.Adaptive, 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.

Does this adaptive workflow work with Fragments or Views?▼

No. The app must use Compose for all screens and Jetpack Navigation 3 before applying this workflow. Screens built with Fragments or Views should first be migrated to Compose, and older navigation setups migrated to Navigation 3.

What is the difference between Grid and LazyVerticalGrid in Compose?▼

LazyVerticalGrid is for large, homogeneous, lazily loaded data sets, while Grid is an experimental two-dimensional structural layout API for a fixed number of items. Grid does not support lazy loading and requires the ExperimentalGridApi opt-in.

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

No. Grid, FlexBox, and mediaQuery are experimental APIs available from Compose 1.11.0-beta01 and are subject to change. They require opt-in annotations such as ExperimentalGridApi, and users should confirm they accept experimental APIs before migrating.

Related Skills

Explore More Software Engineering Skills→
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
HuxleyMcHuxleyMc

responsive-layouts

Guide adaptive Jetpack Compose layouts across Android device window size classes.

Community
Intermediate
maxrave-devmaxrave-dev
10.4k

compose-performance-audit

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

Community
Advanced
ekawijayasusiloekawijayasusilo

adaptive

Implement adaptive Jetpack Compose layouts with Navigation 3 and MediaQuery.

Community
Advanced