Home > front end >  How to set default elevation for ExtendedFloatingActionButton in Jetpack Compose
How to set default elevation for ExtendedFloatingActionButton in Jetpack Compose

Time:12-17

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.?
)

CodePudding user response:

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 = {}
)

CodePudding user response:

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,
)
  • Related