Material Design 3 & Adaptive Layouts Quiz
UI › Material & Nav
What is the minimum Android version required for dynamic color (Material You) in Compose?
- Android 5.0 / API 21
- Android 8.0 / API 26
- Android 12 / API 31
- Android 13 / API 33
Answer: Android 12 / API 31
dynamicLightColorScheme and dynamicDarkColorScheme derive colors from the wallpaper and are only available on Android 12 (API 31) and above; older versions must use a static ColorScheme.
Which width range corresponds to the Compact window width size class?
- width < 600dp
- width < 480dp
- 600dp <= width < 840dp
- width < 720dp
Answer: width < 600dp
Compact width is any window narrower than 600dp, which covers essentially all phones in portrait. 480dp is the height threshold, not width.
Which composable automatically chooses between a bottom NavigationBar and a NavigationRail as the window size changes?
- Scaffold just lays out content and does not switch nav types.
- BottomAppBar places actions at the bottom, but never becomes a rail.
- ModalNavigationDrawer slides in from the side and is not size-aware.
- NavigationSuiteScaffold adapts bar or rail to the window size.
Answer: NavigationSuiteScaffold adapts bar or rail to the window size.
NavigationSuiteScaffold picks the navigation component (bar, rail, or drawer) for you based on the current window size class and posture. Scaffold alone does not adapt navigation.
What determines an app's window size class?
- The physical device screen's diagonal size
- The size of the window currently available to the app
- Only the smallestWidth resource qualifier of the device
- The display's native pixel resolution
Answer: The size of the window currently available to the app
Window size classes are based on the window area available to the app, so they change with split-screen, multi-window, and folding, and are explicitly not tied to the physical screen.
How does Material 3 primarily represent surface elevation?
- Only with hard, opaque drop shadows cast beneath the surface
- By steadily widening the outer margins around the surface
- A tonal color overlay that tints the surface toward the primary color
- By progressively enlarging the surface's corner radius value
Answer: A tonal color overlay that tints the surface toward the primary color
M3 adds a tonal overlay so higher surfaces are tinted more toward the primary color, controlled via tonalElevation; shadowElevation is separate and optional. This is especially visible in dark theme.
Which scaffold is the canonical choice for a list-detail layout that shows both panes on large screens?
- SupportingPaneScaffold
- ListDetailPaneScaffold
- BottomSheetScaffold
- PermanentNavigationDrawer
Answer: ListDetailPaneScaffold
ListDetailPaneScaffold (commonly via NavigableListDetailPaneScaffold) shows list and detail side by side in expanded width and collapses to one pane on smaller windows. SupportingPaneScaffold is for a main + supporting pane pattern.
What is the dp range for the Medium window width size class?
- 600dp <= width < 840dp
- 480dp <= width < 900dp
- 840dp <= width < 1200dp
- 360dp <= width < 600dp
Answer: 600dp <= width < 840dp
Medium width spans 600dp up to just below 840dp (typical tablets in portrait / large unfolded displays). 840dp begins Expanded, and 480-900dp is a height range, not width.
Scaffold passes a PaddingValues to its content lambda. What should you do with it?
- Ignore it, because Scaffold already insets its content automatically
- Apply it via Modifier.padding so content isn't drawn under the app bar
- Pass it back into the TopAppBar parameter so the bar knows its height
- Use it solely to position the floating action button correctly
Answer: Apply it via Modifier.padding so content isn't drawn under the app bar
Scaffold reports the space consumed by its bars and insets as PaddingValues; you must apply it to the content (or hand it to a scrolling list as contentPadding), otherwise content is obscured behind the app bar or navigation bar.
In the Material 3 color system, which color role should be used for text and icons drawn on top of a surface colored with the primary role?
- secondary
- primaryContainer
- onPrimary
- surfaceTint
Answer: onPrimary
M3 color roles come in pairs: content placed on a primary-colored surface uses onPrimary to guarantee sufficient contrast. surfaceTint controls the tonal elevation overlay, and primaryContainer is a separate lower-emphasis container color.
Which artifact provides currentWindowAdaptiveInfo() along with adaptive scaffolds such as ListDetailPaneScaffold and NavigationSuiteScaffold?
- androidx.compose.material library from Material 2, not adaptive APIs
- androidx.window.embedding for activity embedding, not Compose scaffolds
- androidx.compose.foundation.layout for basic layout, not window adaptivity
- androidx.compose.material3.adaptive family, including nav/layout modules
Answer: androidx.compose.material3.adaptive family, including nav/layout modules
The adaptive APIs ship in the androidx.compose.material3.adaptive family of artifacts; currentWindowAdaptiveInfo() lives there, separate from the core material3 components and unrelated to the older window-embedding library.
To make a Material 3 TopAppBar collapse and re-expand as the user scrolls a list, what is the required wiring?
- Pass a TopAppBarScrollBehavior to the bar and wire Scaffold via nestedScroll
- Set the TopAppBar's shadowElevation to 0 so it is free to shrink
- Wrap the TopAppBar in AnimatedVisibility and toggle it from scroll offset
- Use a LazyColumn with reverseLayout = true so the bar tracks scrolling
Answer: Pass a TopAppBarScrollBehavior to the bar and wire Scaffold via nestedScroll
Collapsing behavior is driven by a TopAppBarScrollBehavior (for example enterAlwaysScrollBehavior) passed to the bar, with the Scaffold wired through nestedScroll so scroll deltas reach the app bar. The other options do not produce the built-in collapse effect.
Your app supports API 24+ and wants Material You dynamic color only where available. What is the correct strategy?
- Call dynamicLightColorScheme(context) unconditionally; older devices no-op
- Check Build.VERSION.SDK_INT and use a static ColorScheme below API 31
- Drop Material 3 entirely and switch to Material 2 on pre-31 devices instead
- Read wallpaper colors yourself and build the scheme manually on every version
Answer: Check Build.VERSION.SDK_INT and use a static ColorScheme below API 31
dynamicLightColorScheme/dynamicDarkColorScheme require API 31+, so you branch on Build.VERSION.SDK_INT and supply a hand-authored static ColorScheme on older devices. The dynamic functions are not available to call at all below API 31.
What does MaterialTheme.shapes define in Material 3?
- The motion and easing curves that control component transitions and animations
- The tonal and shadow elevation levels that are applied to surfaces and cards
- The 8dp spacing grid that defines layout spacing and alignment across screens
- A set of corner styles (extraSmall through extraLarge) used by components
Answer: A set of corner styles (extraSmall through extraLarge) used by components
shapes holds the named corner styles from extraSmall to extraLarge; components reference them so, for example, cards and buttons get consistent rounded corners. Elevation, motion, and spacing are handled by separate systems.
Beyond Compact, Medium, and Expanded, current Material 3 guidance adds wider breakpoints. At what minimum window width does the Large width size class begin?
- 840dp
- 1000dp
- 1200dp
- 1600dp
Answer: 1200dp
The width breakpoints are Compact (<600), Medium (600-839), Expanded (840-1199), Large (1200-1599), and Extra-large (>=1600), so Large starts at 1200dp. 840dp is the start of Expanded and 1600dp is the start of Extra-large.