hello everyone, does anyone came across a proper s...

# compose

[Mahmoud Alim]

hello everyone,
does anyone came across a proper solution to customize ripple effect with rounded corners as it’s container let’s say a Box with background rounded shape corners ?

[Chris Sinco [G]]

If you use the clickable modifier, the ripple effect should permeate across the shape of the container. So if your Box has rounded corners and is clickable it should work. Is that not the case?

[Chris Sinco [G]]

Sample code and image/video would be helpful

[Casey Brooks]

I'm not sure if this is the best way, but adding a Modifier.clip(shape) with a Shape (like RoundedCornerShape) to constrain the ripple to should work.

Box(
    Modifier.clip(RoundedCornerShape(4.dp)),
) {
    Text(
        text = "...",
        modifier = Modifier.clickable {  }
    )
}

I've done this with a custom hexagon shape, and it seems work pretty well.

[Louis Pullen-Freilich [G]]

If you are using material, you can also just use a Surface and pass a shape - it automatically clips like this for you

[Mahmoud Alim]

@Casey Brooks thank you, this do the trick but i forget that the order of the modifiers matter as the clickable modifier is also on the container not the content in my case

[Mahmoud Alim]

@Louis Pullen-Freilich [G] yeah this also works fine

[Mahmoud Alim]

here is a snippet of how it looks for anyone intersted

@ExperimentalCoilApi
@Composable
private fun CarTypeItemView(
    serviceItem: CarTypeItem,
    onSelected: (CarTypeItem) -> Unit
) {
    val bgItemColor = bgColor(item = serviceItem)
    val roundedCornerShape = RoundedCornerShape(23.dp)
    Column(
        modifier = Modifier
            .clip(roundedCornerShape)
            .clickable {
                selectedItem = serviceItem
                onSelected(serviceItem)
            },
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.Start
    ) {
        Row {
            Box(
                modifier = Modifier
                    .height(80.dp)
                    .width(164.dp)
                    .background(
                        shape = roundedCornerShape,
                        color = bgItemColor
                    ),
                contentAlignment = Alignment.Center
            ) {
                Row(
                ....   
                ) {
                    Column(
                        Modifier
                            .weight(.5f),                      
                    ) {
                      ......
                    }
                    Column(
                        Modifier
                            .weight(.5f),
                       
                    ) {
                        .....
                    }
                }
            }
        }
    }
}