FloatingActionButton with Sub Floating Items in Jetpack Compose
6 min readAug 23, 2023
Introduction
In this story, we’ll be focusing on creating a FloatingActionButton
with sub-floating items, also known as mini or extended FABs, to provide users with quick access to secondary actions. These sub-floating items are an essential component in modern app design, as they allow us to declutter the interface and enhance the user experience by presenting context-specific actions.
Let’s dive into code. First, we’ll create MiniFabItem or SubFabItem.
MiniFabItem
@Composable
fun MiniFabItem(
item: FabButtonItem,
fabOption: FabButtonSub,
onFabItemClicked: (item: FabButtonItem) -> Unit
) {
Row(
modifier = Modifier
.wrapContentSize()
.padding(end = 10.dp),
horizontalArrangement = Arrangement.spacedBy(10.dp),
verticalAlignment = Alignment.CenterVertically
) {
// Text label for the sub-item displayed in a rounded-corner background
Text(
text = item.label,
style = typography.labelSmall,
color = md_theme_light_onSecondary,
modifier = Modifier
.clip(RoundedCornerShape(size = 8.dp))
.background(md_theme_light_scrim.copy(alpha = 0.5f))
.padding(all = 8.dp)
)…