# Android Adaptive Layouts

> Use when supporting tablets, foldables, and different screen sizes in Android apps with Jetpack Compose.

- **Type:** Skill
- **Install:** `agentstack add skill-prasad-vennam-awesome-android-ai-agent-skills-android-adaptive-layouts`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [prasad-vennam](https://agentstack.voostack.com/s/prasad-vennam)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [prasad-vennam](https://github.com/prasad-vennam)
- **Source:** https://github.com/prasad-vennam/Awesome-Android-AI-Agent-Skills/tree/main/skills/android-adaptive-layouts

## Install

```sh
agentstack add skill-prasad-vennam-awesome-android-ai-agent-skills-android-adaptive-layouts
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Android Adaptive Layouts 📱💻💻

Professional strategies for building flexible, responsive Android applications that scale beautifully from phones to tablets and foldables.

## ⚡ When to Use
- **Multi-Device Support**: Designing a UI that works on all screen sizes.
- **Foldable Support**: Adapting layout based on hinge position (Tabletop mode).
- **Tablet Optimization**: Using extra screen space for "List-Detail" or complex dashboards.
- **ChromeOS Support**: Adapting for resizable desktop-style windows.
- **Dynamic Orientation**: Handling rotations without losing state.

## 🏗️ The 3 Window Size Classes

1.  **Compact (Phone)**: 0-599dp width. Single column.
2.  **Medium (Small Tablet/Large Phone)**: 600-839dp width. Navigation rail or multi-pane.
3.  **Expanded (Large Tablet/Desktop)**: 840dp+ width. Fixed navigation drawer or complex dashboards.

## 🛠️ Canonical Layouts (Google Standard)

### 1. List-Detail
- **Compact**: Shows list, then navigate to detail screen.
- **Expanded**: Side-by-side list and detail (always visible).

### 2. Supporting Pane
- **Expanded**: Central work area with a persistent tool or info pane beside it.

### 3. Feed/Grid
- **Compact**: 1-2 columns.
- **Expanded**: 4-6 columns with responsive grid margins.

## 🚀 Adaptive Layout Tools

### 1. `WindowSizeClass` (Material 3)
- **Benefit**: Automatically categorizes the current window size.
- **Use Case**: Decide which UI to show based on `calculateWindowSizeClass()`.

### 2. `TwoPaneLayout` (Foldable Support)
- **Benefit**: Automatically handles display on single-screen vs dual-screen/foldable devices.
- **Rule**: Give content weights (e.g., list = 1, detail = 2).

## 📐 Layout Execution Best Practices

- [ ] **Responsive Grid**: Use `FlowRow` and `FlowColumn` for wrapping content automatically.
- [ ] **Dynamic Margins**: Use larger horizontal margins (e.g., 24dp or 32dp) for wider screens.
- [ ] **Modal Bottom Sheets**: Convert `ModalBottomSheet` (Phone) into `NavigationDrawer` or `ModalNavigationDrawer` (Tablet).
- [ ] **Fixed Content Width**: For text content, avoid full-screen width on tablets (Keep it between 400dp and 600dp for readability).

## 🧪 Testing and Previews

- **`@PreviewScreenSizes`**: Use this annotation to see your UI on every standard device.
- **`@PreviewFontScales`**: Check how your responsive layout handles large accessibility fonts.
- **Physical Foldables**: If no device is available, use the "Foldable" emulator in Android Studio.

## 📜 Checklist for Adaptive Design

- [ ] **Touch Targets**: Ensure targets are easy to hit even when scaled up.
- [ ] **Continuity**: Does the app state persist when the device is unfolded or rotated?
- [ ] **Input Methods**: Is the UI easy to use with a mouse, keyboard, or stylus (not just touch)?
- [ ] **Aspect Ratios**: Does the UI handle ultra-wide or ultra-narrow (split-screen) windows?

## 🔗 Related Resources
- [Android Adaptive Layouts Guide](https://developer.android.com/guide/topics/ui/adaptive)
- [Canonical Layout Patterns](https://developer.android.com/guide/topics/ui/layout/canonical-layouts)
- [Window Size Classes Documentation](https://developer.android.com/guide/topics/ui/layout/window-size-classes)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [prasad-vennam](https://github.com/prasad-vennam)
- **Source:** [prasad-vennam/Awesome-Android-AI-Agent-Skills](https://github.com/prasad-vennam/Awesome-Android-AI-Agent-Skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-prasad-vennam-awesome-android-ai-agent-skills-android-adaptive-layouts
- Seller: https://agentstack.voostack.com/s/prasad-vennam
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.