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!