← ClaudeAtlas

android-foldables-adaptive-uilisted

Adaptive UI and foldable support patterns for Android/Compose - WindowSizeClass for layout decisions, ListDetailPaneScaffold for two-pane layouts, NavigationSuiteScaffold for adaptive navigation, FoldingFeature detection for hinge and table-top postures, and resizable emulator testing. Use this skill whenever building tablet, foldable, or large-screen layouts, or adapting navigation patterns based on available space. Trigger on phrases like "foldable", "tablet layout", "adaptive UI", "WindowSizeClass", "two-pane", "ListDetailPaneScaffold", "NavigationSuiteScaffold", "navigation rail", or "large screen".
lenorebreakneck630/claude-zero-to-hero-android-KMP · ★ 1 · Web & Frontend · score 64
Install: claude install-skill lenorebreakneck630/claude-zero-to-hero-android-KMP
# Android Foldables and Adaptive UI ## Core Principles - Never use hardcoded dp breakpoints. Always use `WindowSizeClass` for layout decisions. - Navigation chrome (bottom bar, rail, drawer) should adapt to width, not device type. - Two-pane layouts should degrade gracefully to single-pane on compact screens. - Foldable postures (table-top, book mode) are additive — they adjust an existing adaptive layout. - Test on resizable emulator, not just specific device profiles. --- ## Dependencies ```kotlin // build.gradle.kts (app or feature module) implementation(libs.androidx.adaptive) implementation(libs.androidx.adaptive.layout) implementation(libs.androidx.adaptive.navigation) implementation(libs.androidx.window) implementation(libs.androidx.navigation.compose) ``` Version catalog entries: ```toml [libraries] androidx-adaptive = { module = "androidx.compose.material3.adaptive:adaptive", version.ref = "adaptiveLayout" } androidx-adaptive-layout = { module = "androidx.compose.material3.adaptive:adaptive-layout", version.ref = "adaptiveLayout" } androidx-adaptive-navigation = { module = "androidx.compose.material3.adaptive:adaptive-navigation", version.ref = "adaptiveLayout" } androidx-window = { module = "androidx.window:window", version.ref = "androidxWindow" } ``` --- ## WindowSizeClass ### Obtaining the Class Obtain `WindowSizeClass` once at the Activity level and propagate it down via `CompositionLocal` or pass it explicitly: ```kotlin class MainActivity : Compone