FloatingActionButton with Sub Floating Items in Jetpack Compose

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)
        )…