Add the dependency
The Media3 library includes two Jetpack Compose-based UI modules. You don't have to add both of them because the Material3 one depends on the core one.
Kotlin
// Include only one of the following dependencies
implementation("androidx.media3:media3-ui-compose:1.10.1")
implementation("androidx.media3:media3-ui-compose-material3:1.10.1")
Groovy
// Include only one of the following dependencies
implementation "androidx.media3:media3-ui-compose:1.10.1"
implementation "androidx.media3:media3-ui-compose-material3:1.10.1"
We highly encourage you to develop your app in a Compose-first fashion or migrate from using Views.
Fully Compose demo app
While the media3-ui-compose library doesn't include out-of-the-box composables
(such as buttons, indicators, images, or dialogs), you can find a demo app
written fully in Compose that avoids any interoperability solutions like
wrapping PlayerView in AndroidView. The demo app uses the UI state
holder classes from the media3-ui-compose module and the
Compose Material3 library.
Which library do I need?
Depending on the level of customization you require, you can choose between two
Media3 Compose libraries. To understand the difference, it helps to think about
the UI state production pipeline: Business logic → UI logic → UI.
Use media3-ui-compose for full control over your UI components.
This library provides the Business logic → UI logic connection. It contains
foundational components like PlayerSurface and ContentFrame, along with
state holder classes (e.g., PlayPauseButtonState, CurrentMediaItemState,
PlaylistState, ErrorState) that convert Player state into UI state.
This library does not provide ready-to-use Material Design components. You are responsible for building your own UI components and styling them. It gives you maximum control over the look and feel, making it ideal if you have a highly custom design system.
Use media3-ui-compose-material3 for faster integration with Material
Design.
This library provides the final UI part of the pipeline. It depends on
media3-ui-compose and includes prebuilt composable functions that are styled
with Material3 components, including the Player and MiniController
composables. The Player composable offers a comprehensive media playback
experience with video, controls, and progress bar, which you can further
customize using PlayerDefaults. The MiniController composable provides a
compact affordance to control the player while displaying information about the
current media item. It eliminates the need for you to build your own buttons and
other UI elements from scratch. You can still customize the theme, colors, and
icons of these components, but the core implementation is provided for you.
At a glance
| Feature | media3-ui-compose |
media3-ui-compose-material3 |
|---|---|---|
| UI Components | Foundational elements like PlayerSurface and ContentFrame, but no pre-styled buttons or controls. |
Provides the Player and MiniController composables and a full set of prebuilt, Material3-styled composables like PlayPauseButton, SeekBackButton, PositionAndDurationText, ErrorText, etc. |
| State Management | Provides remember...State holders to manage the logic. |
Manages state internally, but you can still access the state holders if you need to. |
| Dependencies | androidx.compose.foundation |
media3-ui-compose, androidx.compose.material3, com.google.android.material |
| Primary Use Case | Building a player UI with a custom design system. Full control over the look and feel. | Quickly building a player UI that follows Material Design 3 guidelines. |