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.")
                }
            )
        }
    ) {}
}

If you are looking for mobile/web Software Engineers to build you next projects, please Contact Nextfunc team here!

Tagged : / / /
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x