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.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"

Te recomendamos que desarrolles tu app con Compose como prioridad 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 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 envolver PlayerView en AndroidView. La app de demostración usa las clases de titulares 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 la IU.

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

Esta biblioteca no proporciona componentes de Material Design listos para usar. Eres responsable de crear tus propios componentes de IU y darles estilo. Te brinda el máximo control sobre el aspecto y el estilo, lo que lo hace 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 UI de la canalización. Depende de media3-ui-compose y contiene funciones de componibilidad prediseñadas con el diseño de componentes de Material 3, incluidos los elementos Player y MiniController componibles. El elemento Player componible ofrece una experiencia integral de reproducción multimedia con video, controles y barra de progreso, que puedes personalizar aún más con PlayerDefaults. El elemento MiniController componible proporciona una capacidad compacta para controlar el reproductor mientras muestra información sobre el elemento multimedia actual. Elimina la necesidad de crear 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 la implementación principal se proporciona para ti.

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 el estilo de Material3, como PlayPauseButton, SeekBackButton, PositionAndDurationText, ErrorText, etcétera.
Administración de estados Proporciona titulares de remember...State para administrar la lógica. Administra el estado de forma interna, pero puedes acceder a los titulares del estado si lo necesitas.
Dependencias androidx.compose.foundation media3-ui-compose, androidx.compose.material3, com.google.android.material
Caso de uso principal Crear una IU del reproductor con un sistema de diseño personalizado Control total sobre la apariencia. Compilar rápidamente una IU del reproductor que siga los lineamientos de Material Design 3