Material3 Compose

media3-ui-compose-material3 ライブラリは、状態管理と Material3 スタイリングの両方を内部で処理します。使用するライブラリの詳細については、Media3 Compose の概要をご覧ください。

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

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

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

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

media3-ui-compose-material3 ライブラリは、一般的なプレーヤー コントロール用の事前構築済みコンポーザブルのセットを提供します。アプリで直接使用できるコンポーネントは次のとおりです。

コンポーネント	説明
PlayPauseButton	再生と一時停止を切り替えるボタン。
SeekBackButton	定義された増分で巻き戻すボタン。
SeekForwardButton	定義された増分で早送りするボタン。
NextButton	次のメディア アイテムに移動するボタン。
PreviousButton	前のメディア アイテムに移動するボタン。
RepeatButton	リピート モードを切り替えるボタン。
ShuffleButton	シャッフル モードを切り替えるボタン。
MuteButton	プレーヤーのミュートとミュート解除を行うボタン。
PositionAndDurationText	現在の位置と合計時間を表示するテキスト コンポーザブル。
PositionText	現在地を表示するテキスト コンポーザブル。
DurationText	合計時間を表示するテキスト コンポーザブル。
RemainingDurationText	残り時間を表示するテキスト コンポーザブル。

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

サーフェス管理に関連する、もう 2 つのプリビルド可能なコンポーザブルも必要になる可能性があります。これらは Material テーマ設定を持たないため、media3-ui-compose モジュールに存在します。

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