The `media3-ui-compose-material3` library provides a [`Player`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/Player.composable.md.txt) Composable that
shows player controls, progress bar and current media content. It handles both
the state management and the Material3 styling internally. For more information
on which library to use, see the [Media3 Compose overview](https://developer.android.com/media/media3/ui/compose.md.txt).


```kotlin
// The library provides styled UI components
Row {
  SeekBackButton(player)
  PlayPauseButton(player)
  SeekForwardButton(player)
}
```

<br />


```kotlin
// You can rearrange the composables into a layout that suits your needs
@Composable
fun PlayerProgressControlsLeftAligned(player: Player) {
  Row {
    PositionAndDurationText(player)
    ProgressSlider(player)
  }
}

@Composable
fun PlayerProgressControlsCenterAligned(player: Player) {
  Row {
    PositionText(player)
    ProgressSlider(player)
    DurationText(player)
  }
}
```

<br />

### 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`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/buttons/PlayPauseButton.composable.md.txt#PlayPauseButton(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.compose.material3.IconButtonColors,androidx.compose.ui.graphics.Color,kotlin.Function1)), you can provide a
custom `colorScheme`:


```kotlin
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)
}
```

<br />

### 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 |
|---|---|
| [`Player`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/Player.composable.md.txt) | A player with controls, a progress bar, subtitles, and a content frame for video or artwork. |
| [`PlayPauseButton`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/buttons/PlayPauseButton.composable.md.txt#PlayPauseButton(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.compose.material3.IconButtonColors,androidx.compose.ui.graphics.Color,kotlin.Function1)) | A button that toggles between play and pause, and shows buffering, replay, and retry states. |
| [`SeekBackButton`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/buttons/SeekBackButton.composable.md.txt#SeekBackButton(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.compose.material3.IconButtonColors,androidx.compose.ui.graphics.Color,kotlin.Function1)) | A button to seek backward by a defined increment. |
| [`SeekForwardButton`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/buttons/SeekForwardButton.composable.md.txt#SeekForwardButton(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.compose.material3.IconButtonColors,androidx.compose.ui.graphics.Color,kotlin.Function1)) | A button to seek forward by a defined increment. |
| [`NextButton`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/buttons/NextButton.composable.md.txt#NextButton(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.compose.material3.IconButtonColors,androidx.compose.ui.graphics.Color,kotlin.Function1)) | A button to seek to the next media item. |
| [`PreviousButton`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/buttons/PreviousButton.composable.md.txt#PreviousButton(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.compose.material3.IconButtonColors,androidx.compose.ui.graphics.Color,kotlin.Function1)) | A button to seek to the previous media item. |
| [`RepeatButton`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/buttons/RepeatButton.composable.md.txt#RepeatButton(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.collections.List,kotlin.Function1,kotlin.Function1,androidx.compose.material3.IconButtonColors,androidx.compose.ui.graphics.Color,kotlin.Function1)) | A button to cycle through repeat modes. |
| [`ShuffleButton`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/buttons/ShuffleButton.composable.md.txt#ShuffleButton(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.compose.material3.IconButtonColors,androidx.compose.ui.graphics.Color,kotlin.Function1)) | A button to toggle shuffle mode. |
| [`MuteButton`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/buttons/MuteButton.composable.md.txt#MuteButton(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.compose.material3.IconButtonColors,androidx.compose.ui.graphics.Color,kotlin.Function1)) | A button to mute and unmute the player. |
| [`LiveButton`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/buttons/LiveButton.composable.md.txt) | A button that indicates whether playback of a livestream is at the live edge, and seeks to the live edge when tapped. |
| [`PositionAndDurationText`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/indicator/PositionAndDurationText.composable#PositionAndDurationText(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.String,androidx.compose.ui.graphics.Color,kotlinx.coroutines.CoroutineScope)) | A text composable that displays the current position and total duration. |
| [`PositionText`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/indicator/PositionText.composable.md.txt#PositionText(androidx.media3.common.Player,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,kotlinx.coroutines.CoroutineScope)) | A text composable that displays the current position. |
| [`DurationText`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/indicator/DurationText.composable.md.txt#DurationText(androidx.media3.common.Player,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,kotlinx.coroutines.CoroutineScope)) | A text composable that displays the total duration. |
| [`RemainingDurationText`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/indicator/RemainingDurationText.composable.md.txt#RemainingDurationText(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Color,kotlinx.coroutines.CoroutineScope)) | A text composable that displays the remaining duration. |
| [`ProgressSlider`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/indicator/ProgressSlider.composable.md.txt#ProgressSlider(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function0,kotlinx.coroutines.CoroutineScope,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource)) | A slider that shows playback progress and allows the user to seek. |
| [`BufferingIndicator`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/indicator/BufferingIndicator.composable.md.txt) | A progress indicator that's shown while the player is buffering. |

*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`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/ContentFrame.composable.md.txt#ContentFrame(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,kotlin.Boolean,kotlin.Function0)) | A surface for media content that handles aspect ratio management, resizing, a shutter, artwork, and a subtitles slot. |
| [`PlayerSurface`](https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/PlayerSurface.composable#PlayerSurface(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int)) | Raw surface which wraps `SurfaceView` and `TextureView` in `AndroidView`. |