Floating Action Button in Jetpack Compose (with Examples)

Jetpack Compose Floating Action Button

In this article, we’ll learn how to implement Floating Action Button (FAB) in Jetpack Compose with the help of examples.

Prerequisites:

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.

Example:

Floating Action Button

For this article, create an empty Jetpack Compose project and open MainActivity. Add a composable called MyUI() and call it from the onCreate() method.

// we need the following packages
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme(darkTheme = false) {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        MyUI()
                    }
                }
            }
        }
    }
}

@Composable
fun MyUI() {
  
}

We will write our code in the MyUI(). For the Add icon, include material icon dependency.

Jetpack Compose provides two types of FAB APIs:

  1. Floating Action Button
  2. Extended Floating Action Button

1. Floating Action Button:

This is a regular FAB. It contains an icon.

Example:

Jetpack Compose Floating Action Button

The API looks like this:

@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 to change the layout.

interactionSource – The MutableInteractionSource for observing the interactions.

shapeThe shape of this FAB.

backgroundColor – The background color. Use Color.Transparent to have no color.

contentColor – The preferred color for content inside this FAB (typically an icon).

elevation – The shadow behind the FAB.

content – The content of this FAB. This is typically an Icon.

Example:

@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    FloatingActionButton(
        modifier = Modifier
            .padding(all = 16.dp),
        onClick = {
            Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT)
                .show()
        }
    ) {
        Icon(imageVector = Icons.Filled.Add, contentDescription = "Add")
    }
}

Output:

Jetpack Compose Floating Action Button

Floating Action Button Position:

To change the FAB position, put it inside a Box and apply the align() modifier.

@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

Note: If you are using the Scaffold layout, you don’t need to use the box because the FAB is aligned at the bottom right by default.

Floating Action Button Colors:

The FAB composable has two parameters:

backgroundColor – To change the background color. Use Color.Transparent to have no color.

contentColor – The preferred color for content. This is typically an icon.

@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()
            },
            backgroundColor = Color.Magenta,
            contentColor = Color.Green
        ) {
            Icon(imageVector = Icons.Filled.Add, contentDescription = "Add")
        }
    }
}

Output:

FAB Colors

2. Extended Floating Action Button:

It looks wider and includes text along with the icon.

Example:

Extended Floating Action Button
@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 Floating Action Button

This is all about the floating action button APIs in Jetpack Compose. I hope you have learned something new. If you have any doubts, comment below.

Related Article:

References:

Leave a Comment