Material ripple effect for any Compose UI; single rememberRippleIndication() for plug-and-play integration via CompositionLocal or theme, customizable color, alpha (Material3 defaults), bounded/unbounded behavior.
Use the Material ripple effect in any Compose UI design system and app.
repositories {
mavenCentral()
}
dependencies {
implementation("com.composables:ripple-indication:1.1.0")
}
Wrap the contents of your app with a CompositionLocal:
import androidx.compose.foundation.LocalIndication
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import com.composables.compose.ripple.rememberRippleIndication
@Composable
fun App() {
CompositionLocalProvider(LocalIndication provides rememberRippleIndication()) {
// app contents here
}
}
or use the defaultIndication property in your Compose Unstyled theme:
import androidx.compose.runtime.Composable
import com.composables.compose.ripple.rememberRippleIndication
import com.composeunstyled.theme.buildTheme
val AppTheme = buildTheme {
defaultIndication = rememberRippleIndication()
}
@Composable
fun App() {
AppTheme {
// app contents here
}
}
and you are set. Your app contents will now use the ripple indication.
By default, the effect will use Material 3's default alpha values and a boring gray color. Continue reading to learn how to spice it up:
Use the color parameter when creating the ripple. Note that the alpha of the color will be affected by the
rippleAlpha parameter:
rememberRippleIndication(color = Color.Blue)
Use the rippleAlpha parameter when creating the ripple. The default values are taken from the Material 3 Compose:
rememberRippleIndication(
rippleAlpha = RippleAlpha(
draggedAlpha = 0.16f,
focusedAlpha = 0.1f,
hoveredAlpha = 0.08f,
pressedAlpha = 0.1f,
)
)
You can specify whether the ripple is bound to the target layout. Unbounded ripples always animate from the target layout center, bounded ripples animate from the touch position
By default, ripple are bounded to the layout, and animate from the touch position. To override this and animate from the layout center, pass false to the bounded parameter:
rememberRippleIndication(bounded = false)
The official Google ripple package is too 'raw'. You cannot use it out of the box without digging into code and try to figure out how to use the API.
We provide a single rememberRippleIndication() function, which you can just plug into your existing design system,
without having to worry about the details.
Use Compose Unstyled to create your own Compose component library in any platform.
We are currently accepting contributions in the form of bug reports and feature requests, in the form of Github issues.
Surfaced from shared tags and platforms — no rankings paid for.