skills.rest
klxiaoniu
klxiaoniuCOMMUNITY
Explore all skills by this author →
GitHub

adaptive

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

174|8|Updated Jan 9, 2024
Search Tags:#android#compose#mediaquery#multi-pane#adaptive ui#screenshot testing#navigation 3
One-click install
npx skills add https://github.com/klxiaoniu/QQVersionList --skill adaptive-klxiaoniu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adaptive
Source: https://github.com/klxiaoniu/QQVersionList/tree/main/.agents/skills/adaptive
Command: npx skills add https://github.com/klxiaoniu/QQVersionList --skill adaptive-klxiaoniu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Adaptive UI development prevents layouts from breaking across phones, tablets, foldables, desktops, TVs, cars, and XR by making navigation, multi-pane content, lists, and scrolling app bars respond to window and input conditions.

Core Features & Use Cases

  • Adaptive navigation areas: Switch between bottom navigation and navigation rails using Material 3 adaptive navigation scaffolds, while preserving show/hide behavior (for example, on scroll).
  • Multi-pane layouts with Navigation 3 Scenes: Implement list-detail and supporting-pane patterns using SceneStrategy metadata and back stack-aware pane behavior.
  • Responsive list/grid density: Make vertical lists adapt by changing columns with adaptive grid cell sizing and by migrating appropriate non-lazy layouts to experimental Grid.
  • Device-aware UI decisions: Use Compose MediaQuery to branch UI based on window size, posture, pointer precision, keyboard kind, and sensor capabilities to better support touch, mouse, and keyboard workflows.
  • Pre-flight validation: Add screenshot tests for major form factors and use Compose Preview screenshot tooling when coverage is missing.

Quick Start

Migrate your app’s Compose UI by adding adaptive NavigationSuiteScaffold, implementing multi-pane behavior with Navigation 3 SceneStrategy, and validating with screenshot tests across phone, foldable, tablet, and desktop.

Frequently Asked Questions about adaptive

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

FAQPage Schema
How do I build adaptive Android UI layouts that respond to different window sizes and postures?▼

To build adaptive Android UI layouts, use Compose MediaQuery to branch UI based on window size, posture, and input capabilities, ensuring navigation and content respond correctly across phones, foldables, and tablets.

How do I implement multi-pane list-detail layouts using Navigation 3?▼

Implement multi-pane list-detail layouts by wiring Jetpack Navigation 3 SceneStrategy metadata with back stack-aware behavior to display list-detail and supporting-pane scenes across varying window sizes.

How do I switch between bottom navigation and navigation rails in Compose?▼

Switch between bottom navigation and navigation rails using Material 3 adaptive NavigationSuiteScaffold, which preserves show/hide behavior on scroll while adapting navigation visibility to window conditions.

Can I use Compose MediaQuery to handle device-aware UI decisions for touch and mouse workflows?▼

Yes, you can use Compose MediaQuery to branch UI based on pointer precision, keyboard kind, and sensor capabilities, allowing your adaptive UI to support both touch and mouse workflows effectively.

How do I make vertical lists and grids adapt their density across Android form factors?▼

Make vertical lists adapt density by changing columns with adaptive grid cell sizing and migrating appropriate non-lazy layouts to experimental Compose Grid for responsive list and grid density.

How do I validate adaptive UI layouts across major Android form factors?▼

Validate adaptive UI layouts by adding screenshot tests for major form factors using Compose Preview screenshot tooling, ensuring navigation and multi-pane content render correctly across phone, foldable, tablet, and desktop.

Related Skills

Explore More Software Engineering Skills→
patlar104patlar104

Material Design 3 with Jetpack Compose

Implement Material Design 3 theming and components in Jetpack Compose.

Community
Advanced
rock-hurock-hu

xml-to-compose-migration

Convert Android XML layouts to Jetpack Compose equivalents.

Community
Intermediate
ekawijayasusiloekawijayasusilo

adaptive

Implement adaptive Jetpack Compose layouts with Navigation 3 and MediaQuery.

Community
Advanced
premex-abpremex-ab
1

adaptive

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

Official
Advanced