Floating Action Button Speed Dial

To use the Speed Dial in Compose, add the SpeedDial() Composable to the floatingActionButton slot of a Scaffold. You must manage the SpeedDialState and optionally use SpeedDialOverlay to create a touch guard when the menu is expanded.

Implementation Steps:

1. Create a SpeedDialState using rememberSaveable.
2. Use SpeedDial() and handle onFabClick to toggle the state.
3. Add action items using the item { ... } block containing FabWithLabel components.

var speedDialState by rememberSaveable { mutableStateOf(SpeedDialState.Collapsed) }
var overlayVisible: Boolean by rememberSaveable { mutableStateOf(speedDialState.isExpanded()) }
Scaffold(
    floatingActionButton = {
        SpeedDial(
            state = speedDialState,
            onFabClick = {
                overlayVisible = !it
                speedDialState = SpeedDialState(!it)
            },
        ) {
            item {
                FabWithLabel(
                    onClick = { showToast(context, "Item 1 clicked!") },
                    labelContent = { Text(text = "Item 1") },
                ) {
                    Icon(Icons.Default.Share, null)
                }
            }
            item {
                FabWithLabel(
                    onClick = { showToast(context, "Item 2 clicked!") },
                    labelContent = { Text(text = "Item 2") },
                ) {
                    Icon(Icons.Default.Share, null)
                }
            }
        }
    }
) {
    SpeedDialOverlay(
        visible = overlayVisible,
        onClick = {
            overlayVisible = false
            speedDialState = speedDialState.toggle()
        },
    )
}

For XML-based layouts, use the SpeedDialView component. You can add action items programmatically using SpeedDialActionItem.Builder or by inflating a Menu resource.

XML Setup

Add the SpeedDialView to your layout file. You can specify the closed state icon using app:sdMainFabClosedSrc.

Adding Items

• Programmatically: Use addActionItem with a SpeedDialActionItem.Builder.
• Menu Resource: Use inflate(R.menu.menu_name) to load items from a standard Android menu resource. Note that only android:id, android:icon, and android:title are supported via inflation.

<!-- XML Layout -->
<com.leinardi.android.speeddial.SpeedDialView 
    android:id="@+id/speedDial" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="bottom|end" 
    app:sdMainFabClosedSrc="@drawable/ic_add_white_24dp" />

// Programmatic Item Addition
val speedDialView = findViewById<SpeedDialView>(R.id.speedDial)
speedDialView.addActionItem(
    SpeedDialActionItem.Builder(R.id.fab_no_label, R.drawable.ic_link_white_24dp)
        .create()
)

// Menu Inflation
speedDialView.inflate(R.menu.menu_speed_dial)

Use SpeedDialActionItem.Builder to customize the appearance of individual action items. Available customization options include:

• setFabBackgroundColor(color: Int)
• setFabImageTintColor(color: Int)
• setLabel(text: String)
• setLabelColor(color: Int)
• setLabelBackgroundColor(color: Int)
• setLabelClickable(boolean)
• setTheme(styleRes: Int): Applies a specific theme to change FAB background and ripple colors.

speedDialView.addActionItem(
    SpeedDialActionItem.Builder(R.id.fab_custom_color, drawable)
        .setFabBackgroundColor(ResourcesCompat.getColor(resources, R.color.material_white_1000, getTheme()))
        .setFabImageTintColor(ResourcesCompat.getColor(resources, R.color.inbox_primary, getTheme()))
        .setLabel(getString(R.string.label_custom_color))
        .setLabelColor(Color.WHITE)
        .setLabelBackgroundColor(ResourcesCompat.getColor(resources, R.color.inbox_primary, getTheme()))
        .setLabelClickable(false)
        .create()
)