FAB & Speed Dial: FloatingActionButton and Expandable Menus

#android #kotlin #compose #tutorial

FAB & Speed Dial: FloatingActionButton and Expandable Menus

Floating Action Buttons (FAB) provide quick access to primary actions. Speed dials expand them into multiple options.

Basic FAB

FloatingActionButton(
    onClick = { /* action */ },
    containerColor = Color.Blue
) {
    Icon(Icons.Default.Add, contentDescription = "Add")
}

Scroll-Aware FAB

val scrollState = rememberScrollState()
val isVisible = scrollState.value == 0

FloatingActionButton(
    onClick = { /* action */ },
    modifier = Modifier
        .graphicsLayer {
            alpha = if (isVisible) 1f else 0f
        }
)

Speed Dial Implementation

var expanded by remember { mutableStateOf(false) }

Box(modifier = Modifier.fillMaxSize()) {
    if (expanded) {
        Column(modifier = Modifier.align(Alignment.BottomEnd).padding(16.dp)) {
            SmallFloatingActionButton(onClick = { /* action1 */ }) {
                Icon(Icons.Default.Edit, "Edit")
            }
            SmallFloatingActionButton(onClick = { /* action2 */ }) {
                Icon(Icons.Default.Share, "Share")
            }
        }
    }

    FloatingActionButton(
        onClick = { expanded = !expanded },
        modifier = Modifier.align(Alignment.BottomEnd).padding(16.dp)
    ) {
        Icon(Icons.Default.Add, "Menu")
    }
}