how to remove shade on compose view?

user_5993479 0
Viewed 3842

I use compose button in android view, but there is some shade at the bottom. How can I remove it?

    @Composable
fun VisibilityAnimationFAB() {
    var expanded by remember { mutableStateOf(true) }
    FloatingActionButton(
        onClick = { expanded = !expanded },
        modifier = Modifier
    ) {
        Row(Modifier.padding(start = 16.dp, end = 16.dp)) {
            Icon(
                vectorResource(id = R.drawable.ic_twitter),
                Modifier.align(Alignment.CenterVertically)
            )
            AnimatedVisibility(
                expanded,
                modifier = Modifier.align(Alignment.CenterVertically)
            ) {
                androidx.compose.material.Text(modifier = Modifier.padding(start = 8.dp), text = "Tweet")
            }
        }
    }

}

enter image description here

android-jetpack-compose floating-action-button android
3 Answers

Use the elevation parameter in FloatingActionButton. In material design, elevation is the relative distance between two surfaces along the z-axis. Shadows make differences in surface elevation perceptible. (source)

You have to pass FloatingActionButtonElevation, which can be created using the elevation(...) method.

FloatingActionButton(
  elevation = elevation(
    defaultElevation = 0.dp
    pressedElevation = 0.dp
  ),
  // ...
) {
  // ...
}
user_81249310

With the 1.0.0-beta03 you can use:

FloatingActionButton(
        onClick = { expanded = !expanded },
        modifier = Modifier,
        elevation = FloatingActionButtonDefaults.elevation(0.dp,0.dp)
    )
user_20165620

this code disable all shadows

    FloatingActionButton(
        onClick = { expanded = !expanded },
        modifier = Modifier,
        elevation = null
    )
user_147299320
Related