Mokera

Tech Sheets

mokelab

Add Floating Action Button to Scaffold in Jetpack Compose

Last updated:2024-07-10

To add FloatingActionButton(FAB) to Scaffold , pass FloatingActionButton composable to floatingActionButton param.

Scaffold(
    topBar = { MyTopAppBar() },
    // add this parameter
    floatingActionButton = {
        FloatingActionButton(onClick = {
            println("Clicked!")
        }) {
            Image(
                painter = painterResource(id = R.drawable.ic_baseline_add_24),
                contentDescription = "Add"
            )
        }
    }
) {
    MainScreen()
}

It would be good to use Vector Assets for FAB icon.

The preview will look like this:

Back