Material3 Compose

media3-ui-compose-material3 ライブラリには、プレーヤー コントロール、進行状況バー、現在のメディア コンテンツを表示する Player コンポーザブルが用意されています。状態管理と Material3 のスタイル設定の両方を内部で処理します。使用するライブラリの詳細については、Media3 Compose の概要をご覧ください。

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

// 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)
  }
}

Material 3 コンポーネントをカスタマイズする

media3-ui-compose-material3 には Material3 デザインに準拠したコンポーネントが用意されていますが、テーマ設定は完全に制御できます。プレーヤー UI を MaterialTheme でラップすることで、カスタムカラー、タイポグラフィ、シェイプをカスタマイズできます。

たとえば、PlayPauseButton の色を変更するには、カスタム colorScheme を指定します。

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)
}

利用可能な Material3 コンポーネント

media3-ui-compose-material3 ライブラリには、一般的なプレーヤー コントロール用に事前構築されたコンポーザブルのセットが用意されています。アプリで直接使用できるコンポーネントには、次のようなものがあります。

コンポーネント 説明
Player コントロール、進行状況バー、字幕、動画またはアートワークのコンテンツ フレームを備えたプレーヤー。
PlayPauseButton 再生と一時停止を切り替えるボタン。バッファリング、リプレイ、再試行の状態が表示されます。
SeekBackButton 定義された増分だけ巻き戻すボタン。
SeekForwardButton 定義された増分で早送りするボタン。
NextButton 次のメディア アイテムにシークするボタン。
PreviousButton 前のメディア アイテムに移動するボタン。
RepeatButton リピートモードを切り替えるボタン。
ShuffleButton シャッフル モードを切り替えるボタン。
MuteButton プレーヤーをミュートまたはミュート解除するボタン。
LiveButton ライブ配信の再生がライブエッジにあるかどうかを示すボタン。タップするとライブエッジにシークします。
PositionAndDurationText 現在の位置と合計再生時間を表示するテキスト コンポーザブル。
PositionText 現在の位置を表示するテキスト コンポーザブル。
DurationText 合計時間を表示するテキスト コンポーザブル。
RemainingDurationText 残り時間を表示するテキスト コンポーザブル。
ProgressSlider 再生の進行状況を表示し、ユーザーがシークできるようにするスライダー。
BufferingIndicator プレーヤーがバッファリングしているときに表示される進行状況インジケーター。

他にもいろいろなサポートがあります。利用可能なすべてのコンポーネントについては、ライブラリの API リファレンスをご覧ください。

必要になる可能性が高い他の 2 つのビルド済みコンポーザブルは、サーフェス管理に関連するもので、マテリアル テーマ設定がないため、media3-ui-compose モジュールにあります。

コンポーネント 説明
ContentFrame アスペクト比の管理、サイズ変更、シャッター、アートワーク、字幕スロットを処理するメディア コンテンツ用のサーフェス。
PlayerSurface AndroidView の SurfaceView と TextureView をラップする未加工のサーフェス。