Jetpack Compose - How to create Floating action button

In this post, let’s play around with Floating Action Button (FAB) in Jetpack compose.

If you don’t know how to create a new jetpack compose project, this article may help: Jetpack Compose – Create a new Compose project

In order to create a FAB we use Scaffold:

import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.Scaffold
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

@Composable
fun FloatingActionButtonDemo() {
    Scaffold(
        backgroundColor = Color.White,
        floatingActionButton = {
            FloatingActionButton(
                backgroundColor = Color.Red,
                icon = {
                    Icon(
                        asset = Icons.Filled.Add,
                        // If tint color is provided, it will override contentColor below
                        tint = Color.White
                    )
                },
                contentColor = Color.Blue,
                onClick = {
                    print("Floating Action Button Clicked.")
                }
            )
        }
    ) {}
}