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

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

解説

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

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

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

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

実装

プロジェクトを開く

「06．一時停止、再開、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 > activity_main.xml」を開きます。

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

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

activity_main.xm 全体としては、以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <FrameLayout （・・・略・・・） <RelativeLayout android:id="@+id/viewgroup_playercontroller" （・・・略・・・） <LinearLayout （・・・略・・・） <LinearLayout （・・・略・・・） <TextView android:id="@+id/textview_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> （・・・略・・・） <SeekBar （・・・略・・・） </LinearLayout> </RelativeLayout> </FrameLayout>

メインアクティビティクラスの編集（ビューの取得）

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

動画表示用ビューの親要素のオブジェクト
フルスクリーンボタンのビューオブジェクト

メインアクティビティクラスの、onCreate関数に、ビューを取得する処理を追加します。

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

メインアクティビティクラス全体としては、以下のようにします。
public class MainActivity extends AppCompatActivity { （・・・略・・・） private ViewGroup m_viewgropuVideo; private ImageView m_imageviewFullScreen; （・・・略・・・） @Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_main ); // Viewの取得（・・・略・・・） m_viewgropuVideo = findViewById( R.id.viewgroup_video ); m_imageviewFullScreen = findViewById( R.id.imageview_fullscreen ); // リスナーの設定（・・・略・・・） } （・・・略・・・） }

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

メインアクティビティクラスの編集（リスナーの設定）

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

フルスクリーンかどうかフラグ
動画を再生するビューの親要素のレイアウト変更リスナーの定義
フルスクリーンボタンのクリックリスナーの定義

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

動画を再生するビューの親要素のオブジェクトに、定義したレイアウト変更リスナーを設定
フルスクリーンボタンオブジェクトに定義したクリックリスナーを設定

メインアクティビティクラス全体としては、以下のようにします。
public class MainActivity extends AppCompatActivity { （・・・略・・・） private boolean m_bIsFullScreen; private View.OnLayoutChangeListener m_onVideoViewGroupLayoutChangeListener = new View.OnLayoutChangeListener() { @Override public void onLayoutChange( View view, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom ) { if( left != oldLeft || top != oldTop || right != oldRight || bottom != oldBottom ) { // ビューのサイズが変わった adjustVideoViewSize(); } } }; 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 ) { （・・・略・・・） // リスナーの設定（・・・略・・・） m_viewgropuVideo.addOnLayoutChangeListener( m_onVideoViewGroupLayoutChangeListener ); m_imageviewFullScreen.setOnClickListener( m_onFullScreenButtonClickListener ); // 動画を再生するビューの取得（・・・略・・・） } （・・・略・・・） }

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

メインアクティビティクラスの編集（画面の向きの初期状態の設定）

メインアクティビティクラスの、onCreate 関数内に、画面の向きの初期状態の設定の処理を追加します。

メインアクティビティクラスの、onCreate 関数を、以下のようにします。
@Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_main ); // 初期状態は、画面は縦向きで、非フルスクリーン。 setRequestedOrientation( ActivityInfo.SCREEN_ORIENTATION_PORTRAIT ); m_bIsFullScreen = false; // Viewの取得（・・・略・・・） }

「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.myexoplayerwithsurfaceview">  <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.MyExoPlayerWithSurfaceView"> <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 );// ナビゲーションバーの折り畳み表示ねばねばモード（スワイプで表示。しばらくすると再非表示） // 再生位置表示の定期更新の開始 m_handlerUpdateProgress.postDelayed( m_runnableUpdateProgress, 0 ); if( m_bIsPlayingWhenActivityIsPaused ) { // Activity pause時に動画再生中なら、動画再生再開 m_simpleexoplayer.play(); } }

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

実行

Android端末にて、動作確認。

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

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

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

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