skills.rest
shirulot
shirulotCOMMUNITY
Explore all skills by this author →
GitHub

adaptive

Implement adaptive Android UI layouts with Jetpack Compose and Material 3.

Updated Jul 6, 2026
Search Tags:#ui#navigation#adaptive#android#compose#flexbox#grid
One-click install
npx skills add https://github.com/shirulot/codex-skill --skill adaptive-shirulot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adaptive
Source: https://github.com/shirulot/codex-skill/tree/main/adaptive
Command: npx skills add https://github.com/shirulot/codex-skill --skill adaptive-shirulot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the complexity of creating consistent, high-quality user interfaces that function seamlessly across diverse Android form factors, including phones, tablets, foldables, and desktops.

Core Features & Use Cases

  • Adaptive Navigation: Automatically transitions between bottom navigation bars and navigation rails based on screen size.
  • Multi-pane Layouts: Implements robust list-detail and supporting-pane patterns using Navigation 3 SceneStrategies.
  • Responsive Grids: Provides tools to dynamically adjust column counts and layout structures to optimize screen real estate.
  • Use Case: A developer needs to convert a mobile-only email app into a tablet-ready experience; this skill provides the exact steps to implement a list-detail view that expands automatically on larger screens.

Quick Start

Use the adaptive skill to migrate the current navigation bar to a NavigationSuiteScaffold and implement a list-detail layout for the main screen.

Frequently Asked Questions about adaptive

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

FAQPage Schema
How do I implement responsive Android UI layouts with Jetpack Compose?▼

Build responsive Android UIs using Jetpack Compose by integrating MediaQuery, Grid, and FlexBox components to dynamically adjust layout structures and optimize screen real estate across diverse device form factors.

How do I switch between bottom navigation bars and navigation rails based on screen size?▼

Transition between bottom navigation bars and navigation rails automatically based on screen size by migrating your current setup to a NavigationSuiteScaffold for adaptive navigation.

What is the best way to create a list-detail view for Android tablets?▼

Create a list-detail view for Android tablets by implementing multi-pane layouts using Navigation 3 SceneStrategies, which provides robust supporting-pane patterns that expand automatically on larger screens.

Does this approach support foldables and desktop form factors?▼

Yes, this approach supports foldables and desktop form factors by ensuring compliance with modern Android development standards for responsive design and multi-pane navigation across diverse device form factors.

How do I dynamically adjust grid column counts for different screen sizes?▼

Dynamically adjust grid column counts by utilizing responsive grid tools that optimize screen real estate, ensuring the layout structure adapts fluidly to various device widths and form factors.

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
p-o-ke-naep-o-ke-nae

mobile-android-design

Design Android interfaces using Material Design 3 and Jetpack Compose.

Community
Advanced
ekawijayasusiloekawijayasusilo

adaptive

Implement adaptive Jetpack Compose layouts with Navigation 3 and MediaQuery.

Community
Advanced