Cómo comenzar a usar la IU basada en Compose

Agrega la dependencia

La biblioteca de Media3 incluye dos módulos de IU basados en Jetpack Compose. No es necesario que agregues ambos, ya que el de Material3 depende del principal.

Kotlin

// Include only one of the following dependencies
implementation("androidx.media3:media3-ui-compose:1.10.0")
implementation("androidx.media3:media3-ui-compose-material3:1.10.0")

Groovy

// Include only one of the following dependencies
implementation "androidx.media3:media3-ui-compose:1.10.0"
implementation "androidx.media3:media3-ui-compose-material3:1.10.0"

Te recomendamos que desarrolles tu app con Compose primero o migres desde el uso de Views.

App de demostración de Compose completa

Si bien la biblioteca media3-ui-compose no incluye elementos componibles listos para usar (como botones, indicadores, imágenes o diálogos), puedes encontrar una app de demostración escrita completamente en Compose que evita cualquier solución de interoperabilidad, como ajustar PlayerView en AndroidView. La app de demostración utiliza las clases de contenedores de estado de la IU del módulo media3-ui-compose y usa la biblioteca de Compose Material3.

¿Qué biblioteca necesito?

Según el nivel de personalización que necesites, puedes elegir entre dos bibliotecas de Compose de Media3. Para comprender la diferencia, es útil pensar en la canalización de producción del estado de la IU: Business logic → UI logic → UI.

Usa media3-ui-compose para tener control total sobre los componentes de la IU.

Esta biblioteca proporciona la conexión Business logic → UI logic. Contiene componentes fundamentales como PlayerSurface y ContentFrame, junto con clases de contenedores de estado (p.ej., PlayPauseButtonState) que convierten el estado Player en estado de la IU.

Esta biblioteca no proporciona componentes de Material Design listos para usar. Eres responsable de compilar tus propios componentes de IU y darles estilo. Te brinda el máximo control sobre la apariencia, lo que lo hace ideal si tienes un sistema de diseño altamente personalizado.

Usa media3-ui-compose-material3 para una integración más rápida con Material Design.

Esta biblioteca proporciona la parte UI final de la canalización. Depende de media3-ui-compose e incluye funciones componibles precompiladas con estilo de componentes de Material3, incluido el elemento componible Player, que ofrece una experiencia integral de reproducción de contenido multimedia con video, controles y barra de progreso. Elimina la necesidad de compilar tus propios botones y otros elementos de la IU desde cero. Aun así, puedes personalizar el tema, los colores y los íconos de estos componentes, pero se te proporciona la implementación principal.

De un vistazo

Función media3-ui-compose media3-ui-compose-material3
Componentes de la IU Elementos fundamentales como PlayerSurface y ContentFrame, pero no botones ni controles con estilo previo Proporciona el Player componible y un conjunto completo de elementos componibles precompilados con estilo de Material3, como PlayPauseButton, SeekBackButton, PositionAndDurationText, etc.
Administración de estados Proporciona contenedores remember...State para administrar la lógica. Administra el estado de forma interna, pero puedes acceder a los contenedores de estado si es necesario.
Dependencias androidx.compose.foundation media3-ui-compose, androidx.compose.material3, com.google.android.material
Caso de uso principal Compilación de una IU de reproductor con un sistema de diseño personalizado Control total sobre la apariencia Compilación rápida de una IU de reproductor que sigue los lineamientos de Material Design 3