Material Design 3 & Adaptive Layouts Flashcards
UI › Material & Nav
- What are the three main parameters of the Material 3 MaterialTheme composable, and how do you read them?
- colorScheme, typography, and shapes. You read them at call sites via MaterialTheme.colorScheme, MaterialTheme.typography, and MaterialTheme.shapes.
- What is dynamic color (Material You) and what does it require?
- A ColorScheme generated from the user's wallpaper via dynamicLightColorScheme(context) / dynamicDarkColorScheme(context). It needs Android 12 (API 31+); on older versions you fall back to a static ColorScheme.
- How does Material 3 express elevation differently from Material 2?
- M3 tints the surface toward the primary color as a tonal overlay that increases with elevation (very visible in dark theme), in addition to optional shadows. On Surface you control tonalElevation and shadowElevation separately.
- List the width window size class breakpoints in dp.
- Compact: width < 600dp. Medium: 600dp to <840dp. Expanded: 840dp to <1200dp. Large: 1200dp to <1600dp. Extra-large: >= 1600dp.
- How do you obtain the current window size class in Compose today?
- currentWindowAdaptiveInfo().windowSizeClass from androidx.compose.material3.adaptive. Query it with isWidthAtLeastBreakpoint / isHeightAtLeastBreakpoint against breakpoint constants.
- Are window size classes based on the device screen or the app window?
- The app's available window, not the physical screen. Split-screen, multi-window, and folding/unfolding can change the size class at runtime, so never equate a device with a fixed size class.
- Which composable automatically swaps the navigation UI based on window size?
- NavigationSuiteScaffold. It shows a bottom NavigationBar in compact width and switches to a NavigationRail (or drawer) as the window widens, and adapts to posture.
- What is ListDetailPaneScaffold and when does it show two panes?
- A canonical adaptive scaffold (part of material3-adaptive). In expanded width it shows list and detail side by side; in compact/medium it collapses to a single navigable pane driven by the current destination.
- How do you make an M3 TopAppBar collapse on scroll?
- Create a TopAppBarScrollBehavior (e.g. TopAppBarDefaults.enterAlwaysScrollBehavior with rememberTopAppBarState), pass it to the app bar, and wire Scaffold's Modifier.nestedScroll(scrollBehavior.nestedScrollConnection).