2025/8/21

【Jetpack Compose/Android】AlertDialogの使い方！アラート表示

この記事からわかること

Kotlin/Android Jetpack ComposeのAlertDialogの使い方
アラートダイアログ表示方法

index

[open]

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

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

posted withアプリーチ

環境

Android Studio：Narwhal Feature Drop
Kotlin：2.1.10
Material3
AGP：8.9.2
Gradle：8.11.1
Mac M1：Sequoia 15.4

Jetpack Compose自体の基本的な使用方法に関しては以下の記事を参考にしてください。

Jetpack ComposeのAlertDialogの使い方

Jetpack Composeでアラートダイアログを表示するにはAlertDialogを使用します。Composeで使用できるAlertDialogはxmlベースで実装していたandroid.app.AlertDialogと同じ名称ですがimportはandroidx.compose.material3.AlertDialogになります。

アラートを表示させるにはまずAlertDialogを実装し、showDialogなどの表示状態を保持する変数を用意してif文で非表示になるようにしておきます。これで状態が変化した時に自動で今表示している画面に覆い被さるようにアラートダイアログが表示されます。

@Composable
fun MyAlertDialog() {
    var showDialog by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Button(onClick = { showDialog = true }) {
            Text("ダイアログを表示")
        }

        // 明示的に非表示にする
        if (showDialog) {
            AlertDialog(
                // ダイアログ外タップや戻るキーで閉じる処理
                onDismissRequest = { showDialog = false },
                title = {
                    Text("タイトル")
                },
                text = {
                    Text("これはダイアログの本文です。")
                },
                confirmButton = {
                    TextButton(onClick = { showDialog = false }) {
                        Text("OK")
                    }
                },
                dismissButton = {
                    TextButton(onClick = { showDialog = false }) {
                        Text("キャンセル")
                    }
                }
            )
        }
    }
}

各パラメータ

AlertDialogの定義を確認してみると色々なパラメータが用意されています。アラートタイトルや本文、ボタンのUIなどをカスタマイズすることができるようになっています。

定義
@Composable
expect fun AlertDialog(
    // ダイアログの外をタップ or 戻るボタンで閉じるときの処理
    onDismissRequest: () -> Unit,

    // 確認（OK）ボタン
    confirmButton: @Composable () -> Unit,

    // レイアウト用 Modifier
    modifier: Modifier = Modifier,

    // キャンセル（Dismiss）ボタン（任意）
    dismissButton: @Composable (() -> Unit)? = null,

    // アイコン（任意）
    icon: @Composable (() -> Unit)? = null,

    // タイトル（任意）
    title: @Composable (() -> Unit)? = null,

    // 本文テキスト（任意）
    text: @Composable (() -> Unit)? = null,

    // ダイアログの形（例: 角丸など）
    shape: Shape = AlertDialogDefaults.shape,

    // 背景色
    containerColor: Color = AlertDialogDefaults.containerColor,

    // アイコンの色
    iconContentColor: Color = AlertDialogDefaults.iconContentColor,

    // タイトル文字色
    titleContentColor: Color = AlertDialogDefaults.titleContentColor,

    // 本文文字色
    textContentColor: Color = AlertDialogDefaults.textContentColor,

    // 影の強さ（立体感）
    tonalElevation: Dp = AlertDialogDefaults.TonalElevation,

    // ダイアログの挙動設定（例: バックキーで閉じられるか）
    properties: DialogProperties = DialogProperties()

)

従来のandroid.app.AlertDialogを使用する

ComposeでUIを実装していても従来のandroid.app.AlertDialogを使って表示させたい場合もあるかもしれません。微妙にデフォルトのUIも異なります。

表示させるためにはContextを取得する必要がありますが、ComposeではLocalContext.currentで取得することが可能です。あとはこれを使って表示するだけです。こちらの場合は状態を管理する変数が不要にはなるのでシンプルに実装できました。

@Composable
fun MyAlertDialog() {
    val context = LocalContext.current

    Button(
        onClick = {
            android.app.AlertDialog.Builder(context)
                .setTitle("ここにタイトル")
                .setMessage("ダイアログのメッセージ")
                .setPositiveButton("OK") { dialog, _ ->
                    dialog.dismiss()
                }.show()
        }
    ) {
        Text("従来の AlertDialog を表示")
    }
}