How to Implement Floating Action Button in Jetpack Compose?

Jetpack Compose Floating Action Button

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:

  1. FloatingActionButton
  2. ExtendedFloatingActionButton

1. FloatingActionButton:

This is a regular FAB. It contains an icon.

Example:

Floating Action Button

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:

Floating Action Button

2. ExtendedFloatingActionButton:

It looks wider and includes a text label.

Example:

Extended FAB

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:

Extended FAB

This is about the floating action button APIs in Jetpack Compose. If you have any doubts, comment below.

References:

Leave a Comment