Today, we will learn how to implement Floating Action Button (FAB) APIs in Jetpack Compose.
What is a Floating Action Button in Android?
A floating action button (FAB) performs the most common action on a screen. It appears in front of all screen content as a circular shape with an icon in its center.
Prerequisites:
Jetpack Compose provides two types of FAB APIs:
- FloatingActionButton
- ExtendedFloatingActionButton
1. FloatingActionButton:
This is a regular FAB. It contains an icon.
Example:
FloatingActionButton() composable:
@Composable
fun FloatingActionButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
backgroundColor: Color = MaterialTheme.colors.secondary,
contentColor: Color = contentColorFor(backgroundColor),
elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
content: @Composable () -> Unit
)onClick – The onClick event on the floating action button.
modifier – The optional modifier.
interactionSource – The MutableInteractionSource.
shape – The shape of this FAB.
backgroundColor – The background color. Use Color.Transparent to have no color.
contentColor – The preferred color for content inside this FAB.
elevation – The shadow behind the FAB.
content – The content of this FAB. This is typically an Icon.
Here is the code:
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
Box(modifier = Modifier.fillMaxSize()) {
FloatingActionButton(
modifier = Modifier
.padding(all = 16.dp)
.align(alignment = Alignment.BottomEnd),
onClick = {
Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT)
.show()
}) {
Icon(imageVector = Icons.Filled.Add, contentDescription = "Add")
}
}
}Output:
2. ExtendedFloatingActionButton:
It looks wider and includes a text label.
Example:
ExtendedFloatingActionButton() composable:
@Composable
fun ExtendedFloatingActionButton(
text: @Composable () -> Unit,
onClick: () -> Unit,
modifier: Modifier = Modifier,
icon: @Composable (() -> Unit)? = null,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
backgroundColor: Color = MaterialTheme.colors.secondary,
contentColor: Color = contentColorFor(backgroundColor),
elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation()
)Most parameters are the same as the regular FAB, except that it has text (for text label) and icon (for FAB icon).
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
Box(modifier = Modifier.fillMaxSize()) {
ExtendedFloatingActionButton(
modifier = Modifier
.padding(all = 16.dp)
.align(alignment = Alignment.BottomEnd),
onClick = {
Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT)
.show()
},
text = { Text(text = "Add") },
icon = { Icon(imageVector = Icons.Filled.Add, contentDescription = "Add") })
}
}Output:
This is about the floating action button APIs in Jetpack Compose. If you have any doubts, comment below.
References: