Hi everybody, I’m working on a control with a ripple of this shape. It is kind of clipped on top and...

# compose

[vitaliy]

Hi everybody, I’m working on a control with a ripple of this shape. It is kind of clipped on top and bottom rememberRipple(bounded = false) . So far it is simply rectangular as a Box with:

modifier = Modifier
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = rememberRipple(color = highlightColor),
                enabled = enabled,
                role = Role.Button,
                onClick = onClick
            )
            .padding( <some paddings> )

I’m running out of ideas and my Compose kung-fu is pretty basic so far. I’ll appreciate any hints you may have for me!

[krzysztof]

Did you try to apply padding before clickable? Order of modifiers does matter in compose

[vitaliy]

yes, it still does not clip top and bottom parts of the ripple. I’m currently looking into making it a Surface instead of the Box and adding .clip() modifier with a custom shape with arches.

[Tin Tran]

Have you try calling clickable after clip() ?

[vitaliy]

@Tin Tran that’s exactly what I’m doing now, but there is no shape like this in the library, so I’m putting it together by hand

[Tin Tran]

Seems like you have to create your own indication

[Tin Tran]

Box(
            modifier = Modifier
                .clip(TicketFirstHalfShape(12f, 12f))
                .clickable {  }
                .background(color = Color.Red)
                .height(100.dp)
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_list_buck_orange),
                contentDescription = "",
                Modifier.align(
                    Alignment.CenterStart
                )
            )
        }

[Tin Tran]

Im using this and the ripple cliped correctly

[vitaliy]

awesome, thanks @Tin Tran! I'm going to check it out tomorrow, I'm done for today already!