04．フルスクリーン表示をできるようにする

フルスクリーン表示をできるようにします。

解説

画面いっぱいに動画が表示されるように、動画を横長画面で表示する「フルスクリーン再生モード」を作成します。

また、画面の動画以外の表示要素を非表示にします。具体的には、画面上部に表示される「タイトルバー」「ステータスバー」、画面下部に表示される「ナビゲーションバー」を非表示にします。

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

「フルスクリーン」「フルスクリーンからの終了」のボタンのイメージを作成します。
「フルスクリーン」「フルスクリーンからの終了」のボタンのUI要素を、ImageViewで設置します。
「フルスクリーン」「フルスクリーンからの終了」のボタンのクリックリスナーを定義します。
画面の動画以外の表示要素を非表示にする処理を追加します。

実装

プロジェクトを開く

「03．一時停止、再開、10秒スキップをできるようにする」で作成したプロジェクトを開きます。

Vector Assetの追加

「フルスクリーン」「フルスクリーンの終了」のイメージボタンのイメージを作成します。

まず、「フルスクリーン」のイメージを作成します。

「プロジェクト」ペインの「app > res > drawable」を右クリックします。
右クリックメニュー「New > Vector Asset」を選択します。

「Name」を「ic_fullscreen」とします。
「Clip Art」のアイコンをクリックし「fullscreen」を選択します。
「Size」を「32」dp x 「32」dp とします。
「Color」を「888888」とします。
「Next」ボタンを押します。

（何も変更せず）
「Finish」ボタンを押します。
「プロジェクト」ペインの「app > res > drawable」に「ic_fullscreen.xml」が出来ます。

「フルスクリーン」のイメージの作成と同様の方法で、「フルスクリーンの終了」のイメージを作成します。

「フルスクリーンの終了」のVector Assetの設定

「Name」を「ic_fullscreen_exit」とします。
「Clip Art」のアイコンをクリックし「fullscreen exit」を選択します。
「Size」を「32」dp x 「32」dp とします。
「Color」を「FFFF00」とします。

カスタムコントロールレイアウトの編集

「フルスクリーン」「フルスクリーンの終了」のイメージボタンを、ImageViewとして設置します。

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

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

「フルスクリーン」ボタンのUI要素を、ImageViewで設置し、id名を「imageview_fullscreen」とします。
「フルスクリーン」ボタンのUI要素が、「動画長さ表示用のUI要素」のTextViewの右側に表示されるように、レイアウトします。
「フルスクリーン」ボタンのUI要素が、画面の右端に表示されるように、「動画長さ表示用のUI要素」の「幅(layout_width)」を「0dp」にし、「重み(layout__weight)」を「1」にします。

変更部分
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" （・・・略・・・） <LinearLayout （・・・略・・・） <LinearLayout （・・・略・・・） <TextView android:id="@+id/exo_duration" android:layout_width="0dp" android:layout_height="wrap_content" android:textColor="#888888" android:layout_weight="1"/> <ImageView android:id="@+id/imageview_fullscreen" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_fullscreen"/> </LinearLayout> （・・・略・・・） </LinearLayout> </RelativeLayout>

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="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_centerInParent="true"> <ImageView android:id="@+id/exo_rew" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:src="@drawable/ic_rew_10"/> <ImageView android:id="@+id/exo_play" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_play"/> <ImageView android:id="@+id/exo_pause" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_pause" android:visibility="gone"/> <ImageView android:id="@+id/exo_ffwd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:src="@drawable/ic_ff_10"/> </LinearLayout> <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="0dp" android:layout_height="wrap_content" android:textColor="#888888" android:layout_weight="1"/> <ImageView android:id="@+id/imageview_fullscreen" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_fullscreen"/> </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>

メインアクティビティクラスの編集（動画を横長画面で表示する「フルスクリーン再生モード」）

メインアクティビティクラスの、メンバー変数として、以下を追加します。

フルスクリーンボタンのビューオブジェクト
フルスクリーンかどうかフラグ
フルスクリーンボタンのクリックリスナーのオブジェクト（とリスナー処理の定義）

メインアクティビティクラスの、onCreate 関数内に、以下の処理を追加します。

画面の向きのを縦向きに設定　（これにより、スマホを回転しても画面が回転しなくなります。）
フルスクリーンかどうかフラグを倒す
フルスクリーンボタンのビューの取得
フルスクリーンボタンのビューのクリックリスナーの設定

「Project」ペインの「app > java > ドメイン.アプリ名 > MainActivity」を開きます。

メインアクティビティクラス全体としては、以下のようにします。
public class MainActivity extends AppCompatActivity { （・・・略・・・） private PlayerView m_playerview; private SimpleExoPlayer m_simpleexoplayer; private boolean m_bIsPlayingWhenActivityIsPaused; private ImageView m_imageviewFullScreen; private boolean m_bIsFullScreen; private View.OnClickListener m_onFullScreenButtonClickListener = new View.OnClickListener() { @Override public void onClick( View view ) { if( m_bIsFullScreen ) { // フルスクリーン中。非フルスクリーンへ移行。画面の向きは、縦向き。 m_imageviewFullScreen.setImageDrawable( ResourcesCompat.getDrawable( getResources(), R.drawable.ic_fullscreen, null ) ); setRequestedOrientation( ActivityInfo.SCREEN_ORIENTATION_PORTRAIT ); m_bIsFullScreen = false; } else { // 非フルスクリーン中。フルスクリーンへ移行。画面の向きは、横向き。 m_imageviewFullScreen.setImageDrawable( ResourcesCompat.getDrawable( getResources(), R.drawable.ic_fullscreen_exit, null ) ); setRequestedOrientation( ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE ); m_bIsFullScreen = true; } } }; @Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_main ); // 初期状態は、画面は縦向きで、非フルスクリーン。 setRequestedOrientation( ActivityInfo.SCREEN_ORIENTATION_PORTRAIT ); m_bIsFullScreen = false; // フルスクリーンボタンのビューの取得 m_imageviewFullScreen = findViewById( R.id.imageview_fullscreen ); // フルスクリーンボタンのビューのクリックリスナーの設定 m_imageviewFullScreen.setOnClickListener( m_onFullScreenButtonClickListener ); // 動画を再生するビューの取得 m_playerview = findViewById( R.id.playerview ); // SimpleExoPlayerの作成と設定 SimpleExoPlayer.Builder playerbuilder = new SimpleExoPlayer.Builder( this ); （・・・略・・・） } }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

マニフェストファイルの編集

画面の向きを変更した場合の再起動を回避するため、メインアクティビティの設定に、configChanges属性の記述を追加し、以下のようにします。

<activity android:name=".MainActivity" android:configChanges="orientation|screenSize">

「Project」ペインの「app > manifests > AndroidManifest.xml」を開きます。

「AndroidManifest.xml」全体としては、以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.hiramine.myexoplayerwithplayerview">  <uses-permission android:name="android.permission.INTERNET"/> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/Theme.MyExoPlayerWithPlayerView"> <activity android:name=".MainActivity" android:configChanges="orientation|screenSize"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>

メインアクティビティクラスの編集（動画以外の表示要素を非表示）

メインアクティビティクラスの、onResume 関数内に、「タイトルバー、ステータスバー、ナビゲーションバーの非表示」処理として、以下の処理を追加します。

// タイトルバー、ステータスバー、ナビゲーションバーの非表示 // （ポーズ、ストップから復帰した際には、ナビゲーションバーのImmersiveモード（ナビゲーションバーの折り畳み表示）が解除されるので、 // 　onCreateではなく、onResumeで、バー非表示処理を行う。 // 　onCreateで、ウインドウのフルスクリーン設定を行うと、ポーズからレジュームした際に、ナビゲーションバーが常時表示となってしまう。） getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_STABLE // タイトルバー非表示 | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN // ステータスバーが無いものとしてビューをレイアウトする | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION // ナビゲーションバーが無いものとしてビューをレイアウトする | View.SYSTEM_UI_FLAG_FULLSCREEN // ステータスバーの非表示 | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // ナビゲーションバーの非表示 | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY );// ナビゲーションバーの折り畳み表示ねばねばモード（スワイプで表示。しばらくすると再非表示）

メインアクティビティの、onResume 関数全体としては、以下のようにします。
// 初回表示時、および、ポーズからの復帰時 @Override protected void onResume() { super.onResume(); // タイトルバー、ステータスバー、ナビゲーションバーの非表示 // （ポーズ、ストップから復帰した際には、ナビゲーションバーのImmersiveモード（ナビゲーションバーの折り畳み表示）が解除されるので、 // 　onCreateではなく、onResumeで、バー非表示処理を行う。 // 　onCreateで、ウインドウのフルスクリーン設定を行うと、ポーズからレジュームした際に、ナビゲーションバーが常時表示となってしまう。） getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_STABLE // タイトルバー非表示 | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN // ステータスバーが無いものとしてビューをレイアウトする | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION // ナビゲーションバーが無いものとしてビューをレイアウトする | View.SYSTEM_UI_FLAG_FULLSCREEN // ステータスバーの非表示 | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // ナビゲーションバーの非表示 | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY );// ナビゲーションバーの折り畳み表示ねばねばモード（スワイプで表示。しばらくすると再非表示） if( m_bIsPlayingWhenActivityIsPaused ) { // Activity pause時に動画再生中なら、動画再生再開 m_simpleexoplayer.play(); } }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

実行

Android端末にて、動作確認。

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

「タイトルバー」「ステータスバー」「ナビゲーションバー」は表示されません。
「ナビゲーションバー」は、Android端末下部の領域を下からスワイプすると表示されます。しばらく放っておくと、再度非表示となります。

画面右下の「フルスクリーン」ボタンをクリックすると、動画の表示の向きが横向きに変わります。

Android端末を横向きに変えて、動画を鑑賞します。

「再生」「一時停止」「10秒前スキップ」「10秒後スキップ」のボタン、再生位置テキスト、再生位置バーは、しばらく放っておくと非表示となり、画面をタップすると再表示されます。

ダウンロード

サンプルコード

 github.com上のリポジトリページ