02．再生位置の表示と変更をできるようにする

再生位置の表示、変更をできるようにします。

解説

前項「01．動画を再生する」で作成したアプリでも、「PlayerViewに標準で設定された再生コントローラー」が表示され、再生位置の表示と変更は可能でした。
本項では、「PlayerViewに標準で設定された再生コントローラー」ではなく、「カスタムの再生コントローラー」を表示し、再生位置の表示と変更をできるようにします。

UI要素のid名を、ExoPlayerライブラリで定められたid名にすることで、「見た目は自前で作成する。機能はExoPlayerライブラリ内で作成された処理を利用する」ことができます。

本項で実施している内容は、以下です。

カスタムコントローラーのレイアウトを作成します。
再生位置表示用のUI要素を、TextViewで設置し、id名を「exo_position」とします。
動画長さ表示用のUI要素を、TextViewで設置し、id名を「exo_duration」とします。
再生位置変更用のUI要素を、exoplayer2.ui.DefaultTimeBarで設置し、id名を「exo_progress」とします。

実装

プロジェクトを開く

「01．動画を再生する」で作成したプロジェクトを開きます。

カスタムコントロールのレイアウトの作成

カスタムコントローラーのレイアウトを作成します。

「Project」ペインの「app > res > layout」を右クリックします。
右クリックメニュー「New > Layout Resource File」を選択します。

「File name」に「custom_controller」と入力します。
「Root element」に「RelativeLayout」と入力します。
「OK」ボタンを押します。

custom_controller.xml が作成されます。

「Project」ペインの「app > res > layout > custom_controller.xml」を開きます。

「Code」タブをクリックし、コードビューに変更します。

custom_controller.xml に以下の変更を行います。

「再生位置表示用のUI要素」「動画長さ表示用のUI要素」を、TextViewで設置します。
id名をExoPlayerで定められたid名である「exo_position」「exo_duration」とします。
再生位置変更用のUI要素を、exoplayer2.ui.DefaultTimeBarで設置します。
id名をExoPlayerで定められたid名である「exo_progress」とします。
プレイされた部分のバーの色、バッファーリングされた部分のバーの色、プレイされていない部分のバーの色、バーのつまみの色、をそれぞれ設定します。
UI要素の表示位置が所望の場所に表示されるように、「LinearLayout」等のレイアウトグループを適宜、設置します。

custom_controller.xml 全体としては、以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_alignParentBottom="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="bottom" android:orientation="horizontal" android:padding="8dp"> <TextView android:id="@+id/exo_position" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#888888" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" / " android:textColor="#888888" /> <TextView android:id="@+id/exo_duration" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#888888" /> </LinearLayout> <com.google.android.exoplayer2.ui.DefaultTimeBar android:id="@+id/exo_progress" android:layout_width="match_parent" android:layout_height="wrap_content" app:played_color="#FF0000" app:buffered_color="#00FF00" app:unplayed_color="#0000FF" app:scrubber_color="#FF00FF"/> </LinearLayout> </RelativeLayout>

メインアクティビティのレイアウトの編集

メインアクティビティのレイアウトの動画表示用ビューに、カスタムコントロールを紐づけます。

「Project」ペインの「app > res > layout > activity_main.xml」を開きます。

「exoplayer2.ui.PlayerView」定義に、以下を追加します。app:controller_layout_id="@layout/custom_controller"

activity_main.xml 全体としては、以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.google.android.exoplayer2.ui.PlayerView android:id="@+id/playerview" android:layout_width="match_parent" android:layout_height="match_parent" app:controller_layout_id="@layout/custom_controller"/> </RelativeLayout>

実行

Android端末にて、動作確認。

アプリを起動すると、動画が再生、表示されます。

画面下部に、「PlayerViewに標準で設定された再生コントローラー」ではなく、「カスタムの再生コントローラー」が表示されます。

つまみを移動すると、再生位置が変わります。

再生位置テキスト、再生位置バーは、しばらく放っておくと非表示となり、画面をタップすると再表示されます。

ダウンロード

サンプルコード