2025/9/5

【Jetpack Compose/Android】DropdownMenuの実装方法！

この記事からわかること

Kotlin/Android Jetpack ComposeのDropdownMenuの使い方

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.6.1

DropdownMenuの実装方法

Jetpack Composeでボタンをタップした際にメニューが表示されるようなUI(DropdownMenu)を実装する方法をまとめていきます。実装方法はDropdownMenuとDropdownMenuItemを使用します。引数expandedに開閉を制御するためのフラグ変数を渡します。

var expanded by remember { mutableStateOf(false) }
  
DropdownMenu(
    expanded = expanded,
    onDismissRequest = { expanded = false }
) {
    DropdownMenuItem(
        text = {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                CustomText("カメラを起動する")
                Icon(
                    imageVector = Icons.Default.CameraAlt,
                    contentDescription = "Camera"
                )
            }

        },
        onClick = {
            expanded = false
            // カメラ起動
            cameraLauncher.launch(it)
        }
    )

    DropdownMenuItem(
        text = {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                CustomText("写真から選択する")
                Icon(
                    imageVector = Icons.Default.Image,
                    contentDescription = "Gallery"
                )
            }
        },
        onClick = {
            expanded = false
            // ギャラリー起動
            imageLauncher.launch("image/*")
        }
    )
}

メニューで表示する部分はDropdownMenuItemを使用します。onClickでメニューがタップされた時の挙動を制御することができます。

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

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

Android