Material3 Compose

La libreria media3-ui-compose-material3 fornisce un elemento componibile Player che mostra i controlli del player, la barra di avanzamento e i contenuti multimediali attuali. Gestisce internamente sia la gestione dello stato sia lo stile Material3. Per saperne di più su quale libreria utilizzare, consulta la panoramica di Media3 Compose.

// The library provides styled UI components
Row {
  SeekBackButton(player)
  PlayPauseButton(player)
  SeekForwardButton(player)
}
ComposeMaterial3.kt

// 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)
  }
}
ComposeMaterial3.kt

Personalizza i componenti Material 3

Sebbene media3-ui-compose-material3 fornisca componenti che seguono Material 3 Design, hai comunque il controllo completo sui temi. Puoi personalizzare colori, tipografia e forme inserendo la UI del player in un MaterialTheme.

Ad esempio, per modificare il colore di PlayPauseButton, puoi fornire un colorScheme personalizzato:

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)
}
ComposeMaterial3.kt

Componenti Material 3 disponibili

La libreria media3-ui-compose-material3 fornisce un insieme di composabili predefiniti per i controlli del player comuni. Ecco alcuni dei componenti che puoi utilizzare direttamente nella tua app:

Componente	Descrizione
Player	Un player con controlli, una barra di avanzamento, sottotitoli e un frame dei contenuti per video o copertine.
PlayPauseButton	Un pulsante che consente di passare dalla riproduzione alla pausa e viceversa e mostra gli stati di buffering, riproduzione e nuovo tentativo.
SeekBackButton	Un pulsante per tornare indietro di un incremento definito.
SeekForwardButton	Un pulsante per andare avanti di un incremento definito.
NextButton	Un pulsante per passare all'elemento multimediale successivo.
PreviousButton	Un pulsante per passare all'elemento multimediale precedente.
RepeatButton	Un pulsante per scorrere le modalità repeat.
ShuffleButton	Un pulsante per attivare/disattivare la modalità shuffle.
MuteButton	Un pulsante per attivare e disattivare l'audio del player.
LiveButton	Un pulsante che indica se la riproduzione di un live streaming è al margine live e cerca il margine live quando viene toccato.
PositionAndDurationText	Un composable di testo che mostra la posizione corrente e la durata totale.
PositionText	Un composable di testo che mostra la posizione corrente.
DurationText	Un composable di testo che mostra la durata totale.
RemainingDurationText	Un composable di testo che mostra la durata rimanente.
ProgressSlider	Un cursore che mostra l'avanzamento della riproduzione e consente all'utente di cercare.
BufferingIndicator	Un indicatore di avanzamento che viene mostrato durante il buffering del player.

Non si tratta di un elenco esaustivo. Per tutti i componenti disponibili, consulta il Riferimento API della libreria.

Altri due elementi componibili predefiniti di cui probabilmente avrai bisogno sono correlati alla gestione della superficie e si trovano nel modulo media3-ui-compose perché non dispongono dei temi di Material.

Componente	Descrizione
ContentFrame	Una superficie per i contenuti multimediali che gestisce le proporzioni, il ridimensionamento, un otturatore, l'artwork e uno spazio per i sottotitoli.
PlayerSurface	Superficie non elaborata che aggrega SurfaceView e TextureView in AndroidView.