How to set default elevation for ExtendedFloatingActionButton in Jetpack Compose

Question

How can the default elevation for ExtendedFloatingActionButton be applied in Jetpack Compose so that a shadow can be seen? Understandably, the default resting level is number 3 and the default height is 6dp, but using elevation = 6.dp didn't work, so what other method is there?

ExtendedFloatingActionButton(
    text = { Text(text = "Button") },
    icon = { Icon(Icons.Filled.Add, "") },
    modifier = Modifier.clip(RoundedCornerShape(16.dp)),
    elevation = FloatingActionButtonElevation.?
)

score 1 · Answer 1 · answered Dec 17 '22 at 01:59

1

Defaults maybe in colors, elevations or anywhere is supposed to be used like this

ExtendedFloatingActionButton(
    text = { Text(text = "Button") },
    icon = { Icon(Icons.Filled.Add, "") },
    modifier = Modifier.clip(RoundedCornerShape(16.dp)),
    elevation = FloatingActionButtonDefaults.elevation(
        defaultElevation = 4.dp,
        pressedElevation = 8.dp,
        hoveredElevation = 2.dp,
        focusedElevation = 1.dp,
    ),
    onClick = {}
)

answered Dec 17 '22 at 01:59

pushpull

124
7

Are these the default `dp` values for a floating action button? Is there any document around stating what type of elevation should have which `dp` value? – wbk727 Dec 17 '22 at 07:30

Gabriele Mariotti · Accepted Answer · 2022-12-17T09:26:51.800

With M3 the default elevation is defined by FloatingActionButtonDefaults.elevation().
If you want the default value just omit it. You can also override the default values with:

ExtendedFloatingActionButton(
    //..
    elevation = FloatingActionButtonDefaults.elevation(
        defaultElevation = 4.dp
    )
)

It defines the elevation of a ExtendedFloatingActionButton in different states

@Composable
fun elevation(
    defaultElevation: Dp = FabPrimaryTokens.ContainerElevation, //6.0.dp
    pressedElevation: Dp = FabPrimaryTokens.PressedContainerElevation, //6.0.dp
    focusedElevation: Dp = FabPrimaryTokens.FocusContainerElevation, //6.0.dp
    hoveredElevation: Dp = FabPrimaryTokens.HoverContainerElevation //8.0.dp
): FloatingActionButtonElevation

You can see in the source code:

val ContainerElevation = ElevationTokens.Level3
val PressedContainerElevation = ElevationTokens.Level3
val FocusContainerElevation = ElevationTokens.Level3
val HoverContainerElevation = ElevationTokens.Level4

With M2 the approach is similar and default values are defined by FloatingActionButtonDefaults.elevation():

@Composable
fun elevation(
    defaultElevation: Dp = 6.dp,
    pressedElevation: Dp = 12.dp,
    hoveredElevation: Dp = 8.dp,
    focusedElevation: Dp = 8.dp,
)

How to set default elevation for ExtendedFloatingActionButton in Jetpack Compose

2 Answers2