Media3 Adaptive Compose Ui

Trigger

Use for responsive player UI across mobile, tablet, foldable, landscape, split-screen, and large-screen layouts.

Rules

• Start with media3-compose-ui-material3 for player surface and controls.
• Pin Media3 to 1.10.1 through the version catalog.
• Keep video surface dimensions stable across state changes; controls must not resize content unexpectedly.
• Read the size class from currentWindowAdaptiveInfo().windowSizeClass (material3-adaptive) and branch with isWidthAtLeastBreakpoint checks against the WindowSizeClass bound constants, not fixed phone breakpoints.
• The WindowWidthSizeClass/WindowHeightSizeClass bucket enums are deprecated in androidx.window 1.4; DO NOT add new code that switches on them.
• Reserve safe space for status bars, navigation bars, cutouts, hinges, and IME.
• On tablets/foldables, consider two-pane media-detail layouts, playlist rails, or persistent queue panels.
• Keep accessibility labels, touch targets, focus order, and keyboard/D-pad traversal valid across sizes.

Example

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
when {
    windowSizeClass.isWidthAtLeastBreakpoint(
        WindowSizeClass.WIDTH_DP_EXPANDED_LOWER_BOUND
    ) -> ExpandedPlayerScaffold()
    windowSizeClass.isWidthAtLeastBreakpoint(
        WindowSizeClass.WIDTH_DP_MEDIUM_LOWER_BOUND
    ) -> MediumPlayerScaffold()
    else -> CompactPlayerScaffold()
}

Do Not

• Do not scale text with viewport width.
• Do not let controls overlap system bars or video subtitles.
• Do not use the phone layout unchanged on tablets or foldables.

Related

• media3-compose-ui-material3
• media3-video-playback
• migrate-xml-ui-to-compose

Source & license

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

• Author: sunnat629
• Source: sunnat629/android-media-pack
• License: Apache-2.0

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