Floating Action Button

Display a button in the form of a Floating Action Button

View in Playground

Constructors

@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    backgroundColor: Color = MaterialTheme.colors.secondary,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = 6.dp,
    icon: @Composable () -> Unit
)
  • onClick – callback used for when the button is clicked
    • required
  • modifier – the modifier to be applied

  • shape – the shape to be used for the background of the button

  • backgroundColor – the color to be used for the background of the button

  • contentColor – the color to be used for the content of the button

  • elevation – the elevation to be applied to the button

  • icon – the icon to be displayed on the button
    • required

Examples

Icon Floating Action Button

FloatingActionButton(onClick = {

}) {
    Icon(asset = Icons.Filled.Star)
}

Floating Action Button

Colored Floating Action Button

FloatingActionButton(
    onClick = {

    },
    backgroundColor = Color.Red,
    contentColor = Color.White
) {
    Icon(asset = Icons.Filled.Star)
}

Floating Action Button

Elevated Floating Action Button

FloatingActionButton(
    onClick = {

    },
    elevation = 20.dp
) {
    Icon(asset = Icons.Filled.Star)
}

Floating Action Button

Shape Floating Action Button

FloatingActionButton(
    onClick = {

    },
    shape = RectangleShape
) {
    Icon(asset = Icons.Filled.Star)
}

Floating Action Button