MediumFloatingActionButton

Composable Component

The FAB represents the most important action on a screen. It puts key actions within reach.

Common

@ExperimentalMaterial3ExpressiveApi
@Composable
fun MediumFloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = FloatingActionButtonDefaults.mediumShape,
    containerColor: Color = FloatingActionButtonDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)

Parameters


onClick	called when this FAB is clicked
modifier	the `Modifier` to be applied to this FAB
shape	defines the shape of this FAB's container and shadow (when using `elevation`)
containerColor	the color used for the background of this FAB. Use `Color.Transparent` to have no color.
contentColor	the preferred color for content inside this FAB. Defaults to either the matching content color for `containerColor`, or to the current `LocalContentColor` if `containerColor` is not a color from the theme.
elevation	`FloatingActionButtonElevation` used to resolve the elevation for this FAB in different states. This controls the size of the shadow below the FAB. Additionally, when the container color is `ColorScheme.surface`, this controls the amount of primary color applied as an overlay. See also: `Surface`.
interactionSource	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this FAB. You can use this to change the FAB's appearance or preview the FAB in different states. Note that if `null` is provided, interactions will still happen internally.
content	the content of this FAB, typically an `Icon`

Code Examples

MediumFloatingActionButtonSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun MediumFloatingActionButtonSample() {
    MediumFloatingActionButton(onClick = { /* do something */ }) {
        Icon(
            Icons.Filled.Add,
            contentDescription = "Localized description",
            modifier = Modifier.size(FloatingActionButtonDefaults.MediumIconSize),
        )
    }
}

AnimatedFloatingActionButtonSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun AnimatedFloatingActionButtonSample() {
    val listState = rememberLazyListState()
    // The FAB is initially shown. Upon scrolling past the first item we hide the FAB by using a
    // remembered derived state to minimize unnecessary compositions.
    val fabVisible by remember { derivedStateOf { listState.firstVisibleItemIndex == 0 } }
    Scaffold(
        floatingActionButton = {
            MediumFloatingActionButton(
                modifier =
                    Modifier.animateFloatingActionButton(
                        visible = fabVisible,
                        alignment = Alignment.BottomEnd,
                    ),
                onClick = { /* do something */ },
            ) {
                Icon(
                    Icons.Filled.Add,
                    contentDescription = "Localized description",
                    modifier = Modifier.size(FloatingActionButtonDefaults.MediumIconSize),
                )
            }
        },
        floatingActionButtonPosition = FabPosition.End,
    ) {
        LazyColumn(state = listState, modifier = Modifier.fillMaxSize()) {
            for (index in 0 until 100) {
                item { Text(text = "List item - $index", modifier = Modifier.padding(24.dp)) }
            }
        }
    }
}