【Android】アラートダイアログにカスタムビューを追加する方法を解説

はじめに

この記事では、Androidのアラートダイアログ（AlertDialog）にカスタムビューを追加する方法を、実際のコード例とともにわかりやすく解説します。標準的なアラートダイアログに独自のレイアウト（EditTextなど）を組み込み、入力された値を取得して表示するまでの一連の流れを学べます。

手順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:layout_width = "match_parent"
   android:gravity = "center"
   android:layout_height = "match_parent">
   <TextView
      android:id = "@+id/click"
      android:layout_width = "wrap_content"
      android:textSize = "30sp"
      android:layout_height = "wrap_content"
      android:text = "Click"/>
</LinearLayout>

上記のコードでは、画面中央に配置されたTextViewを1つ定義しています。このTextViewをタップすると、後ほど作成するアラートダイアログが表示される仕組みです。

手順3：MainActivity.javaにコードを追加する

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

package com.example.myapplication;
import android.annotation.TargetApi;
import android.content.DialogInterface;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.EditText;
import android.widget.Switch;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
   TextView text;
   @TargetApi(Build.VERSION_CODES.LOLLIPOP)
   @Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      text = findViewById(R.id.click);
      text.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            showAlertDialog();
         }
      });
   }
   private void showAlertDialog() {
      AlertDialog.Builder alertDialog = new AlertDialog.Builder(MainActivity.this);
      final View customLayout = getLayoutInflater().inflate(R.layout.custom, null);
      alertDialog.setView(customLayout);
      alertDialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {
         @Override
         public void onClick(DialogInterface dialog, int which) {
            // アラートダイアログからアクティビティへデータを送信
            EditText editText = customLayout.findViewById(R.id.editText);
            Toast.makeText(MainActivity.this,editText.getText().toString(),Toast.LENGTH_LONG).show();
         }
      });
      AlertDialog alert = alertDialog.create();
      alert.setCanceledOnTouchOutside(false);
      alert.show();
   }
}

コードのポイント

このコードの重要なポイントは以下の通りです。

• inflate()メソッド：LayoutInflaterを使って、別途用意したカスタムレイアウト（R.layout.custom）を読み込みます。
• setView()メソッド：読み込んだカスタムビューをアラートダイアログにセットします。
• PositiveButton：「OK」ボタンが押された際に、カスタムビュー内のEditTextから入力内容を取得し、Toastで表示します。
• setCanceledOnTouchOutside(false)：ダイアログ外をタップしても閉じないように設定しています。

アプリを実行してみよう

それでは、アプリケーションを実行してみましょう。ここでは、実際のAndroid端末がパソコンに接続されているものとして説明します。

Android Studioからアプリを実行するには、プロジェクト内のいずれかのアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックします。表示される選択肢から自分のモバイルデバイスを選択すると、端末に以下のような初期画面が表示されます。

次に、画面上のTextViewをタップすると、カスタムビューを含んだアラートダイアログが開きます。

最後に「OK」ボタンをタップすると、以下のようにEditTextに入力した内容がToastとして表示されます。

まとめ

このように、AlertDialog.BuilderのsetView()メソッドを使えば、簡単にアラートダイアログへカスタムビューを組み込むことができます。入力フォームやチェックボックスなど、自由度の高いUIを持つダイアログを実装したい場合にぜひ活用してみてください。