ホーム > プログラミング > Android動画再生アプリを作る ( ExoPlayer + SurfaceView ) > 07.フルスクリーン表示をできるようにする

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



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

解説

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

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

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

実装

プロジェクトを開く

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 に以下の変更を行います。

activity_main.xm 全体としては、以下のようにします。

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

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

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

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

メインアクティビティクラス全体としては、以下のようにします。


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

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

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

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

メインアクティビティクラス全体としては、以下のようにします。


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

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

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

メインアクティビティクラスの、onCreate 関数を、以下のようにします。


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

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

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



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

「AndroidManifest.xml」全体としては、以下のようにします。

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

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

メインアクティビティの、onResume 関数全体としては、以下のようにします。


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

実行

Android端末にて、動作確認。

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

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



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


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

ダウンロード

サンプルコード

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

関連ページ

前項目:06.一時停止、再開、10秒スキップをできるようにする

跡項目:08.バッファリング中の対応、画面をONのままにする対応


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.