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:
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:
This is a regular FAB. It contains an icon.
Example:
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.
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 (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:
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:
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:
2. Extended Floating Action Button:
It looks wider and includes text along with the icon.
Example:
@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 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:
- How to Create Divider in Jetpack Compose?
- Image() Composable with Examples
- How to Check Internet Connection in Android?
References:
