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 ambas, ya que la de Material 3 depende de la principal.

Kotlin

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

Groovy

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

Te recomendamos que desarrolles tu app con un enfoque centrado en Compose o que migres desde el uso de Views.

App de demostración completamente en Compose

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

¿Qué biblioteca necesito?

Según el nivel de personalización que necesites, puedes elegir entre dos bibliotecas de Media3 Compose. 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 tus componentes de 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, CurrentMediaItemState, PlaylistState y ErrorState) que convierten el estado de Player en el 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 de darles estilo. Te brinda el máximo control sobre el aspecto, por lo que es ideal si tienes un sistema de diseño muy personalizado.

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

Esta biblioteca proporciona la parte final de UI de la canalización. Depende de media3-ui-compose y, además, incluye funciones de componibilidad precompiladas que tienen el estilo de los componentes de Material 3, incluidos los elementos de componibilidad Player y MiniController. El elemento componible Player ofrece una experiencia de reproducción de contenido multimedia completa con video, controles y barra de progreso, que puedes personalizar aún más con PlayerDefaults. El elemento de componibilidad MiniController proporciona una affordance compacta para controlar el reproductor mientras se muestra información sobre el elemento multimedia actual. Esto elimina la necesidad de que crees tus propios botones y otros elementos de la IU desde cero. Aún 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 básicos como PlayerSurface y ContentFrame, pero sin botones ni controles con diseño previo Proporciona los elementos componibles Player y MiniController, y un conjunto completo de elementos componibles prediseñados con estilo de Material3, como PlayPauseButton, SeekBackButton, PositionAndDurationText, ErrorText, etcétera.
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 Compilar una IU del reproductor con un sistema de diseño personalizado Control total sobre el diseño Compilar rápidamente una IU del reproductor que siga los lineamientos de Material Design 3