How to use Compose's createRippleModifierNode

Question

https://developer.android.com/jetpack/compose/touch-input/user-interactions/migrate-indication-ripple#globally-change-ripples

I noticed Google updated their docs for how to set a global on ripple theme but they don't mention or show how you are suppose to use createRippleModifierNode. How are you suppose to use this function and apply it globally to your app?

I tried just putting it my root view but nothing changed.

Answer 1

What they tell you to do is follow along with what Compose Material3 does to apply the ripple. That is a few hundred lines of code, so the simplest thing is to copy it. This blog post of mine goes into greater depth, but the basics are:

1. Add androidx.compose.material:material-ripple to your project. I used 1.7.2.

2. Copy Ripple.kt from Compose Material3.

3. Fix up any errors. I encountered two: a reference to StateTokens from elsewhere in Material3 (which I then also copied) and a reference to LocalContentColor from Material3 (which I did not need and removed).

4. Call ripple() from your copy of Ripple.kt and supply that as the LocalIndication composition local. ripple() can take a color, or you can provide a LocalRippleConfiguration composition local and provide the color that way.

At that point, the ripple becomes the default indication, and clickable() will apply it automatically.