Material3 Compose

The media3-ui-compose-material3 library handles both the state management and the Material3 styling internally. For more information on which library to use, see the Media3 Compose overview.

// The library provides styled UI components
Row {
  SeekBackButton(player)
  PlayPauseButton(player)
  SeekForwardButton(player)
}
ComposeMaterial3Snippets.kt

Customize the Material3 Components

While media3-ui-compose-material3 provides components that follow Material3 Design, you still have full control over theming. You can customize colors, typography, and shapes by wrapping your player UI in a MaterialTheme.

For example, to change the color of the PlayPauseButton, you can provide a custom colorScheme:

MaterialTheme(
  colorScheme =
    lightColorScheme(
      primary = Color.Red, // Change the primary color for the button
      onPrimary = Color.White,
    )
) {
  // The PlayPauseButton will now use the custom colors
  PlayPauseButton(player)
}
ComposeMaterial3Snippets.kt

Available Material3 Components

The media3-ui-compose-material3 library provides a set of prebuilt composables for common player controls. Here are some of the components you can use directly in your app:

Component Description
PlayPauseButton A button that toggles between play and pause.
SeekBackButton A button to seek backward by a defined increment.
SeekForwardButton A button to seek forward by a defined increment.
NextButton A button to seek to the next media item.
PreviousButton A button to seek to the previous media item.
RepeatButton A button to cycle through repeat modes.
ShuffleButton A button to toggle shuffle mode.
MuteButton A button to mute and unmute the player.
PositionAndDurationText A text composable that displays the current position and total duration.
PositionText A text composable that displays the current position.
DurationText A text composable that displays the total duration.
RemainingDurationText A text composable that displays the remaining duration.

This is not an exhaustive list. Refer to the library's API reference for all available components.

Two other prebuilt Composables you are likely to need are related to the surface management and they live in the media3-ui-compose module because they don't possess Material theming.

Component Description
ContentFrame A surface for displaying media content that handles aspect ratio management, resizing, and a shutter
PlayerSurface Raw surface which wraps SurfaceView and TextureView in AndroidView