【Android】フルスクリーンのカスタムダイアログを作成する方法を徹底解説

はじめに

この記事では、Androidアプリでフルスクリーン表示のカスタムダイアログを作成する方法を、実際のサンプルコードとともに段階的に解説します。標準のAlertDialogは画面中央に小さく表示されますが、独自のレイアウトとテーマを組み合わせることで、画面全体を使ったダイアログを実現できます。

ステップ1：新規プロジェクトの作成

まず、Android Studioで新しいプロジェクトを作成しましょう。メニューから「File」→「New Project」を選択し、必要な項目を入力してプロジェクトを生成します。

ステップ2：activity_main.xmlの編集

res/layout/activity_main.xmlに以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:gravity="center"
    android:orientation="vertical">
    <Button
        android:id="@+id/customDialog"
        android:text="Custom Dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

上記のコードでは、ボタンを1つ配置しています。ユーザーがこのボタンをタップすると、カスタムダイアログが表示される仕組みです。

ステップ3：MainActivity.javaの実装

src/MainActivity.javaに以下のコードを記述します。

package com.example.andy.myapplication;
import android.app.Activity;
import android.graphics.Rect;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.customDialog).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Rect displayRectangle = new Rect();
                Window window = MainActivity.this.getWindow();
                window.getDecorView().getWindowVisibleDisplayFrame(displayRectangle);
                final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this,R.style.CustomAlertDialog);
                ViewGroup viewGroup = findViewById(android.R.id.content);
                View dialogView = LayoutInflater.from(v.getContext()).inflate(R.layout.customview, viewGroup, false);
                dialogView.setMinimumWidth((int)(displayRectangle.width() * 1f));
                dialogView.setMinimumHeight((int)(displayRectangle.height() * 1f));
                builder.setView(dialogView);
                final AlertDialog alertDialog = builder.create();
                Button buttonOk=dialogView.findViewById(R.id.buttonOk);
                buttonOk.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        alertDialog.dismiss();
                    }
                });
                alertDialog.show();
            }
        });
    }
}

カスタムビュー（customview.xml）の作成

カスタムダイアログを表示するためには、専用のビューをインフレート（展開）する必要があります。customview.xmlというファイルを作成し、以下のコードを追加してください。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Success"
            android:textAlignment="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu erat tincidunt lacus fermentum rutrum."
            android:textAlignment="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium" />
        <Button
            android:id="@+id/buttonOk"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="15dp"
            android:background="@color/colorPrimary"
            android:text="Ok"
            android:textColor="#FFF" />
    </LinearLayout>
</LinearLayout>

このレイアウトには、見出しとなる「Success」テキスト、説明文、そしてダイアログを閉じるための「Ok」ボタンが含まれています。

ダイアログ用カスタムテーマの設定

先ほどのJavaコードでは、AlertDialogに対してカスタムテーマを適用しています。

final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this,R.style.CustomAlertDialog);

続いて、res/styles.xmlに以下のスタイル定義を追加します。

<style name="CustomAlertDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="android:windowBackground">@drawable/popup_background</item>
</style>

ダイアログ背景（popup_background.xml）の作成

上記のスタイルでは、背景としてpopup_backgroundを指定しています。drawableフォルダ内にpopup_background.xmlを作成し、以下のコードを記述してください。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <corners android:radius="6dp" />
</shape>

これにより、白背景で角丸（半径6dp）のダイアログ背景が適用されます。

フルスクリーン表示のポイント

フルスクリーンのカスタムアラートダイアログを表示するには、以下のコードを使用します。

Rect displayRectangle = new Rect();
Window window = MainActivity.this.getWindow();
window.getDecorView().getWindowVisibleDisplayFrame(displayRectangle);
final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this,R.style.CustomAlertDialog);
ViewGroup viewGroup = findViewById(android.R.id.content);
View dialogView = LayoutInflater.from(v.getContext()).inflate(R.layout.customview, viewGroup, false);
dialogView.setMinimumWidth((int)(displayRectangle.width() * 1f));
dialogView.setMinimumHeight((int)(displayRectangle.height() * 1f));
builder.setView(dialogView);
final AlertDialog alertDialog = builder.create();
Button buttonOk=dialogView.findViewById(R.id.buttonOk);
buttonOk.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        alertDialog.dismiss();
    }
});
alertDialog.show();

重要なのは、getWindowVisibleDisplayFrame()で取得した画面の表示領域（Rect）をもとに、ダイアログビューの最小幅・最小高さを画面サイズと同じ値に設定している点です。これにより、ダイアログが画面いっぱいに広がって表示されます。

アプリの実行と動作確認

それでは、アプリを実行してみましょう。ここでは、実機のAndroidスマートフォンをパソコンに接続していることを前提とします。Android Studioでプロジェクトのアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。デバイスを選択すると、モバイル端末に以下のような初期画面が表示されます。

上記が起動直後の初期画面です。ここで「Custom Dialog」ボタンをタップすると、以下のようにフルスクリーンのカスタムダイアログが開きます。

まとめ

本記事では、画面の表示領域を取得してダイアログのサイズに反映させることで、フルスクリーンのカスタムダイアログを実装する手順を紹介しました。カスタムレイアウト・テーマ・背景drawableを組み合わせれば、デザイン性の高い全画面ダイアログを簡単に作成できます。ぜひ自分のアプリにも応用してみてください。