Using .shadow with Button in jetpack compose causes an issue

user_4690298 0
Viewed 63

I want to use the .shadow operator to add a shadow to my button, but as you can see in the image, I got a white background. enter image description here

android-jetpack-compose android
1 Answers

As many Modifiers in Jetpack Compose order of Modifier.shadow() matters. use shadow first.

Button(
    modifier = Modifier
        .shadow(2.dp, RoundedCornerShape(2.dp))
        .height(36.dp),
    onClick = { /*TODO*/ }) {
    Text("Button")
}

vs

Button(
    modifier = Modifier
        .height(36.dp)
        .shadow(2.dp, RoundedCornerShape(2.dp)),
    onClick = { /*TODO*/ }) {
    Text("Button")
}

enter image description here

But this is not how you set elevation for button. This is for demonstrating how Modifier.shadow() order changes outcome, maybe helpful with some Composables but with Button you need to use

Button(
    modifier = Modifier.height(36.dp),
    shape = RoundedCornerShape(2.dp),
    elevation = ButtonDefaults.elevation(...),
    onClick = { /*TODO*/ }) {
    Text("Button")
}

and elevation function has properties for different states such as

  @Composable
    fun elevation(
        defaultElevation: Dp = 2.dp,
        pressedElevation: Dp = 8.dp,
        disabledElevation: Dp = 0.dp,
        hoveredElevation: Dp = 4.dp,
        focusedElevation: Dp = 4.dp,
    )
user_54578530
Related