モケラ

Tech Sheets

mokelab

Scaffold ComposableにFloatingActionButton(FAB)を追加する

最終更新日:2022-05-09

Scaffold にFloatingActionButton(FAB)を追加するには、 floatingActionButton パラメータで FloatingActionButton を指定します。

Scaffold(
    topBar = { MyTopAppBar() },
    // このパラメータを追加する
    floatingActionButton = {
        FloatingActionButton(onClick = {
            println("Clicked!")
        }) {
            Image(
                painter = painterResource(id = R.drawable.ic_baseline_add_24),
                contentDescription = "Add"
            )
        }
    }
) {
    MainScreen()
}

FABの中に表示するアイコンは Vector Assets で追加するとよいでしょう。

実行すると次のように右下にFABが表示されます。

一覧に戻る