32

In Jetpack Compose the clickable Modifier will by default use LocalIndication.current and show a ripple that is bound to the border. That looks great almost always, but there are some circumstances where a rounded, unbound ripple looks better. Back in View Android we would've used android:background="?attr/selectableItemBackgroundBorderless to achieve this behaviour. How can we do it in compose?

Example [source]:

2

Yannick
  • 4,833
  • 8
  • 38
  • 63

1 Answers1

68

You can customise the ripple effect as follow:

Modifier.clickable(
    interactionSource = remember { MutableInteractionSource() },
    indication = rememberRipple(bounded = false), // You can also change the color and radius of the ripple
    onClick = {}
)
Gaëtan
  • 11,912
  • 7
  • 35
  • 45
  • Any idea how to change the alpha of the colour of the indication?? – Nik Jul 19 '22 at 15:48
  • @Nik a bit late answer but, here https://stackoverflow.com/a/68610270/4376058 you can find how to define and set RippleTheme. Instead of using defaultRippleAlpha just create yours like this ` = RippleAlpha( draggedAlpha = 0f, focusedAlpha = 0f, hoveredAlpha = 0f, pressedAlpha = 1f ) ` – Eren Utku Oct 14 '22 at 09:57