【Android】＜Kotlin＞Jetpack ComposeでモダンなUIを実装：AlertDialog・Snackbar・BottomSheetScaffoldの使い方まとめ

2025年4月25日

すだ

みなさまこんにちは〜！
メモリアインクのすだです。

Jetpack Composeには様々なUIを実装できる機能が備わっていますが
今回はAlertDialog・Snackbar・BottomSheetScaffoldの3つについてご紹介します。

この記事を読んでわかること…
・AlertDialogを使ってダイアログの表示を実装する方法
・Snackbarを使ってスナックバーの表示を実装する方法
・BottomSheetScaffoldを使って下からスライドで出てくる画面の表示を実装する方法

環境

Kotlin (ver 1.9.0)
Android Studio (Giraffe | 2022.3.1 Patch 3)

AlertDialogでのダイアログ実装

AlertDialogは、確認や警告など、ユーザーの判断を促すダイアログを作ることができます。

var showDialog by remember { mutableStateOf(false) }

if (showDialog) {
    AlertDialog(
        onDismissRequest = { showDialog = false },
        title = { Text("確認") },
        text = { Text("削除してもよろしいですか？") },
        confirmButton = {
            TextButton(onClick = {
                // 処理
                showDialog = false
            }) {
                Text("はい")
            }
        },
        dismissButton = {
            TextButton(onClick = { showDialog = false }) {
                Text("キャンセル")
            }
        }
    )
}

上記のように引数を細かくセットすることができます。

onDismissRequest = { showDialog = false } は、AlertDialog が閉じられるときに実行される処理を定義しています。
「OKボタン」「キャンセルボタン」などの明示的なアクションとは別に、
ユーザーが意図せずダイアログの外側をタップした場合や、
戻るボタンを押したときにも閉じられることがあります。
そういった時に呼ばれるのがonDismissRequestです。
（この場合、showDialogがtrueでダイアログを表示、falseで非表示になります。）

また、confirmButtonとdismissButtonでユーザーに選択肢を与えるためのボタンを作成することができます。

Snackbarの使い方

Snackbarは画面の下部に一時的に表示される通知バーで、
ユーザーにちょっとした情報やフィードバックを伝えるためのコンポーネントです。

@Composable
fun SnackbarSampleScreen() {
    val snackbarHostState = remember { SnackbarHostState() }
    val scope = rememberCoroutineScope()

    Scaffold(
        snackbarHost = {
            SnackbarHost(
                hostState = snackbarHostState,
                snackbar = { data ->
                    Snackbar(
                        backgroundColor = Color.DarkGray,
                        actionColor = Color.Yellow
                    ) {
                        Text(data.message)
                    }
                }
            )
        }
    ) { padding ->
        Column(
            modifier = Modifier
                .padding(padding)
                .fillMaxSize()
                .padding(16.dp),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("保存しました！")
                }
            }) {
                Text("スナックバーを表示")
            }
        }
    }
}

上記はボタンを押すとスナックバーが表示される実装です。

SnackbarHostをScaffold に設置することでSnackbarの表示場所（今回はScaffoldの下部エリア）を決定し
snackbar パラメータでSnackbarHost の見た目をカスタマイズします。
（Material2 / 3でUI部品が違うので注意してください。今回はMaterial2での書き方です）

hostState は、Snackbar を「出す・隠す・内容を決める」などを管理するコントローラーのような存在です。

そしてスナックバーを実際に出すときはsnackbarHostState.showSnackbar()を使います。

BottomSheetScaffoldの使い方

BottomSheetScaffoldは、Jetpack Compose で下からスライドして出てくる UI（ボトムシート）を簡単に実装するための便利なコンテナです。

よくある「設定メニュー」「詳細表示」「フィルター一覧」などに使われます。

val sheetState = rememberBottomSheetScaffoldState()
val scope = rememberCoroutineScope()

BottomSheetScaffold(
    scaffoldState = sheetState,
    sheetContent = {
        Column(Modifier.padding(16.dp)) {
            Text("これはボトムシートです")
            Button(onClick = {
                scope.launch { sheetState.bottomSheetState.hide() }
            }) {
                Text("閉じる")
            }
        }
    },
    sheetPeekHeight = 0.dp, // 初期は非表示（0.dpなら完全に隠す）
) { innerPadding ->
    Column(Modifier.padding(innerPadding).fillMaxSize()) {
        Button(onClick = {
            scope.launch { sheetState.bottomSheetState.expand() }
        }) {
            Text("シートを開く")
        }
    }
}

rememberBottomSheetScaffoldState() は、ボトムシートの開閉状態などを管理するための状態オブジェクトを作成する関数です。

BottomSheetScaffoldのscaffoldStateパラメータにオブジェクトをセットして、sheetContentパラメータの中にボトムシートの中身を実装していきます。

sheetPeekHeight は、「ボトムシートが閉じているときに、どれくらいの高さを見せておくか」 を指定するパラメータです。初期表示が非表示の場合は0dpとしておきます。

そしてsheetState.bottomSheetState.expandを使ってボタンタップでボトムシートを開くようにします。