responsive-layouts

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

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/HuxleyMc/Android-Skills --skill responsive-layouts
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: responsive-layouts
Source: https://github.com/HuxleyMc/Android-Skills/tree/main/responsive-layouts
Command: npx skills add https://github.com/HuxleyMc/Android-Skills --skill responsive-layouts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modern Android apps struggle to adapt layouts across phones, tablets, foldables, and desktops, leading to inconsistent experiences and wasted development time.

Core Features & Use Cases

  • Window size classes drive adaptive UI behavior to switch between compact, medium, and expanded layouts.
  • Multi-pane and foldable layouts enable dual-pane navigation and content sharing on larger screens.
  • Adaptive typography, padding, and grid systems ensure readable content and balanced spacing across devices.
  • Use cases: build a messaging dashboard, email client, or settings panel that reflows from a single pane on phones to a dual-pane experience on tablets and desktops.

Quick Start

Copy and integrate the responsive-layouts SKILL.md into your agent setup, then apply window size class checks to render layouts appropriate for the current device and fold state.

Frequently Asked Questions about responsive-layouts

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

FAQPage Schema
How do I build adaptive layouts in Jetpack Compose for Android tablets and foldables?

Adaptive layouts in Jetpack Compose use window size classes to switch between compact, medium, and expanded UIs, guiding multi-pane patterns and foldable handling across phones, tablets, and desktops.

What are window size classes and when do I need them for Android UI?

Window size classes are a responsive layout mechanism that categorizes screen dimensions into compact, medium, and expanded breakpoints to drive adaptive UI behavior across different Android devices.

How do I implement a dual-pane layout for an Android email client on tablets?

Dual-pane layouts for Android email clients are implemented using multi-pane patterns that enable dual-pane navigation and content sharing when window size classes detect medium or expanded screens.

Does this responsive layout guidance handle foldable device hinge states?

Yes, responsive layout guidance includes specific foldable handling to adapt UI patterns around hinge states, ensuring content reflows correctly across foldable Android devices.

Can I adjust typography and grid systems responsively across Android phone and desktop screens?

Yes, adaptive typography, padding, and grid systems ensure readable content and balanced spacing by scaling layout dimensions responsively across Android phone, tablet, and desktop screens.

What is the best way to adapt an Android settings panel from a single pane to a multi-pane experience?

The best way to adapt an Android settings panel is applying window size class checks to render a single pane on phones and reflow into a multi-pane experience on tablets and desktops.