【Kotlin/Android Studio】AlertDialogの使い方！カスタマイズ方法

【Kotlin/Android Studio】AlertDialogの使い方！カスタマイズ方法

この記事からわかること

  • Android Studio/KotlinのAlertDialogの使い方
  • アプリでダイアログ(ポップアップビュー)を実装する方法
  • リストやチェックボックス、ラジオボタンなど

＼ アプリをリリースしました ／

みんなの誕生日

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

AlertDialogでダイアログを実装する方法

Androidでダイアログ(ポップアップビュー)を実装するにはAlertDialogクラスを使用します。実装方法は簡単で「MainActivity.kt」にコードを書くだけで実装することが可能です。今回はボタンをタップされた時にダイアログが出る仕組みを実装していきます。まずはその前に「activity_main.xml」にボタンを設置しておきます。


<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/done_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Done"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

シンプルなダイアログ

まずはシンプルなダイアログを実装して使い方をみていきます。AlertDialogクラスからBuilderを呼び出し、引数にはContext(ここではthis)を渡します。そこからsetTitleメソッドでタイトルをsetMessageメソッドでメッセージをsetPositiveButtonメソッドでボタンを定義します。最後にshowメソッドを実行することでダイアログが表示されます。

val button:Button = findViewById(R.id.done_button)

button.setOnClickListener {
    AlertDialog.Builder(this)
            .setTitle("ここにタイトル")
            .setMessage("ダイアログのメッセージ")
            .setPositiveButton("OK", { dialog, id ->
                // ボタンクリック時の処理
            })
            .show()
}
【Kotlin/Android Studio】AlertDialogの使い方！DialogFragmentでカスタムダイアログ

アイコンをつける

setIconメソッドを使用することでダイアログに画像(アイコン)を設置することができます。

val button:Button = findViewById(R.id.done_button)

button.setOnClickListener {
    AlertDialog.Builder(this)
            .setTitle("ここにタイトル")
            .setMessage("ダイアログのメッセージ")
            .setPositiveButton("OK", { dialog, id ->
                // ボタンクリック時の処理
            })
            .setIcon(R.mipmap.ic_launcher)
            .show()
}
【Kotlin/Android Studio】AlertDialogの使い方！DialogFragmentでカスタムダイアログ

ボタンを2つ表示する

ボタンを2つ表示するにはsetPositiveButtonメソッドとsetNegativeButtonメソッドを使用します。setPositiveButtonメソッドで指定した方が右側にsetNegativeButtonメソッドが左側に来るように配置されます。

AlertDialog.Builder(this)
    .setTitle("ここにタイトル")
    .setMessage("ダイアログのメッセージ")
    .setPositiveButton("OK", { dialog, id ->
        // ボタンクリック時の処理
    })
    .setNegativeButton("キャンセル", { dialog, id ->
    // ボタンクリック時の処理
    })
    .show()
【Kotlin/Android Studio】AlertDialogの使い方！DialogFragmentでカスタムダイアログ

3つ目のボタンを表示する

setNeutralButtonメソッドを使用することで3つ目のボタンを設置することができます。これはダイアログの左側に配置されます。3つ目と書きましたが、ボタンの定義が1つしかない状態でsetNeutralButtonメソッドを使用しても変わらずダイアログの左側に配置されます。

AlertDialog.Builder(this)
    .setTitle("ここにタイトル")
    .setMessage("ダイアログのメッセージ")
    .setPositiveButton("OK", { dialog, id ->
        // ボタンクリック時の処理
    })
    .setNegativeButton("キャンセル", { dialog, id ->
        // ボタンクリック時の処理
    })
    .setNeutralButton("その他", { dialog, id ->
        // ボタンクリック時の処理
    })
    .show()
【Kotlin/Android Studio】AlertDialogの使い方！DialogFragmentでカスタムダイアログ

ダイアログでリストを表示する

ダイアログ内でリストを表示するにはsetItemsメソッドを使用します。引数に表示させたいリストを渡します。

val list = arrayOf("kotlin","Swift","Dart")
AlertDialog.Builder(this)
    .setTitle("アプリ開発言語")
    .setItems(list, { dialog, id ->
        // ボタンクリック時の処理
    })
    .setPositiveButton("OK", { dialog, id ->
        // ボタンクリック時の処理
    })
    .show()
【Kotlin/Android Studio】AlertDialogの使い方！DialogFragmentでカスタムダイアログ

ダイアログでチェックボックスを表示する

ダイアログ内でチェックボックスを表示するにはsetMultiChoiceItemsメソッドを使用します。引数に表示させたいリストとチェックフラグを渡します。

val list = arrayOf("kotlin","Swift","Dart")
val checkedFlags = booleanArrayOf(true, false, false)
AlertDialog.Builder(this)
    .setTitle("アプリ開発言語")
    .setMultiChoiceItems(list, checkedFlags, { dialog, id, isChecked ->
        // ボタンクリック時の処理
    })
    .setPositiveButton("OK", { dialog, id ->
        // ボタンクリック時の処理
    })
    .show()
【Kotlin/Android Studio】AlertDialogの使い方！DialogFragmentでカスタムダイアログ

ダイアログでラジオボタンを表示する

ダイアログ内でラジオボタンを表示するにはsetMultiChoiceItemsメソッドを使用します。引数に表示させたいリストとデフォルトでチェック状態にするインデックス番号を渡します。

val list = arrayOf("kotlin","Swift","Dart")
AlertDialog.Builder(this)
    .setTitle("アプリ開発言語")
    .setSingleChoiceItems(list, 0, { dialog, which:Int ->
        // アイテム選択時の処理
    })
    .setPositiveButton("OK", { dialog, id ->
        // ボタンクリック時の処理
    })
    .show()
【Kotlin/Android Studio】AlertDialogの使い方！DialogFragmentでカスタムダイアログ

独自レイアウトダイアログ

以下のような独自レイアウトのダイアログを実装したい場合はDialogFragmentを使用して実装する必要があります。実装方法は以下の記事を参考にしてください。

【Kotlin/Android Studio】AlertDialogの使い方！DialogFragmentでカスタムダイアログ

おすすめ記事：【Kotlin/Android】DialogFragmentの使い方！独自レイアウトのカスタムダイアログ実装

ダイアログ外をタップで閉じる

AlertDialogではデフォルトでダイアログ外をタップすることで閉じる仕様になっています。これを閉じないようにするには.setCancelable(false)を指定します。

AlertDialog.Builder(this)
    .setTitle("ここにタイトル")
    .setMessage("ダイアログのメッセージ")
    .setCancelable(false)
    .show()

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Android
Web制作phpjavascriptWordPressSwiftLaravelVue.jsgit/GitHubAWSLinuxAndroid

searchbox

スポンサー

ProFile

ame

趣味：読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

＼ アプリをリリースしました ／

みんなの誕生日

みんなの誕生日

友達や家族の誕生日を登録しておくと当日に通知が届きお知らせしてくれるiOSアプリです。

貸し借り管理アプリ

貸し借り管理アプリ

お金の貸し借りを管理するためのアプリです。貸借の色が分かれているので識別しやすく、使いやすさを求めてできるだけシンプルなUIにしています。一番人気のアプリです。

カシホン

カシホン

人に貸すことが多く、誰に貸したか忘れがちな本の貸し借りを記録できるアプリです。

Githubにて
iOSアプリのソースコードを公開中！

GitHub-みんなの誕生日
GitHub-貸し借り管理アプリ
GitHub-カシホン

New Article