Modify ripple color of IconButton in Jetpack Compose

Question

How can I change the ripple color of an IconButton?

I tried doing it this way, but it doesn't change:

IconButton(
        onClick = { onClick() },
        modifier = Modifier.clickable(
          onClick = { onClick() },
          indication = rememberRipple(color = MyCustomTheme.colors.primary),
          interactionSource =  remember { MutableInteractionSource() },
        )
      )

score 35 · Accepted Answer · edited Jul 19 '22 at 16:35

I don't know if you found a way to make it work for the whole app but I found a way to do so. So I'm posting this incase someone else has a similar issue.

You can set the custom RippleTheme object as described by Gabriele Mariotti's answer then you can pass the CompositionLocalProvider() as content in MaterialTheme. The content from the app's theme can then be set as content for CompositionalLocalProvider().

Take a look here:

private object JetNewsRippleTheme : RippleTheme {
    // Here you should return the ripple color you want
    // and not use the defaultRippleColor extension on RippleTheme.
    // Using that will override the ripple color set in DarkMode
    // or when you set light parameter to false
    @Composable
    override fun defaultColor(): Color = MaterialTheme.colors.primary

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleTheme.defaultRippleAlpha(
        Color.Black,
        lightTheme = !isSystemInDarkTheme()
    )
}

Then for your app theme it should be:

@Composable
fun JetNewsTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colors = if (darkTheme) DarkColors else LightColors,
        typography = JetNewsTypography,
        shapes = JetNewsShapes
    ) {
        CompositionLocalProvider(
            LocalRippleTheme provides JetNewsRippleTheme,
            content = content
        )
    }
}

This method should work for the whole app unless you explicitly set another RippleTheme directly to Composables below the AppTheme hierarchy. And it doesn't conflict with other types of ComposableLocalProvider values you may set directly to your other Composables.

Gabriele Mariotti · Answer 2 · 2022-10-10T13:18:56.493

19

Your code doesn't work since the Ripple is implemented in a .clickable modifier defined inside the IconButton.

The appearance of the Ripples is based on a RippleTheme and you can define a custom RippleTheme and apply to your composable with the LocalRippleTheme.

Something like:

private object RippleCustomTheme: RippleTheme {

    //Your custom implementation...
    @Composable
    override fun defaultColor() =
        RippleTheme.defaultRippleColor(
            Color.Red, 
            lightTheme = true
        )

    @Composable
    override fun rippleAlpha(): RippleAlpha =
        RippleTheme.defaultRippleAlpha(
            Color.Black,
            lightTheme = true
        )
}

and:

CompositionLocalProvider(LocalRippleTheme provides  RippleCustomTheme) {
    IconButton(
        onClick = { },
    ) {
        Icon(Icons.Filled.Add, "")
    }
}

edited Oct 10 '22 at 13:18

answered Apr 26 '21 at 12:07

Gabriele Mariotti

320,139
94
887
841

1

Okay. So every time I need to modify the ripple, I need to wrap my composable with `CompositionLocalProvider(LocalRippleTheme provides RippleCustomTheme) {}`? Is it somehow possible to modify it once for the whole app? – Praveen P. Apr 26 '21 at 13:47
1

You can define custom composable like your IconButton, Button.. that implement the code in the answer. To be honest I don't know if it is possible to define it globally. – Gabriele Mariotti Apr 26 '21 at 14:02
While i don't think it's possible globally, there's a "hack": Most probably you define your theme - deriving from `materialTheme` - somewhere. Wrap the `content` block in the `CompositionLocalProvider`-Block from above. Since you will wrap literary everything with your `customTheme`, you will have wrapped everything with your `RippleTheme`, too – m.reiter Feb 07 '22 at 15:56

score 7 · Answer 3 · edited Sep 14 '22 at 14:01

It's a bit late, but maybe this code will help someone.

To make your code work you need to apply interactionSource to the button itself too.

You can change the color locally in this way. It is important to apply height after calling the indication in order to keep the correct button and ripple dimensions.

Additionally, you need to apply a radius of any size in order to contain the radius inside of the button's shape (this seems to be a bug in Compose 1.2.0-rc03.

val interactionSource = remember { MutableInteractionSource() }
val rippleColor = Color.RED
val shape = RoundedCornerShape(size = 16.dp)

Button(
    modifier = Modifier
        .clip(shape = shape)
        .indication(
            interactionSource = interactionSource,
            indication = rememberRipple(
                color = rippleColor,
                radius = 8.dp
            )
        )
        .height(height = 40.dp),
    shape = shape,
    interactionSource = interactionSource,
)

score 2 · Answer 4 · answered Feb 17 '23 at 10:42

If you need just to override ripple color in one place you can create your own modifier for it.

fun Modifier.clickable(
    rippleColor: Color? = null,
    onClick: () -> Unit
) = composed(
    inspectorInfo = debugInspectorInfo {
        name = "clickable"
        properties["rippleColor"] = rippleColor
        properties["onClick"] = onClick
    }
) {
    Modifier.clickable(
        onClick = onClick,
        indication = rippleColor?.let {
            rememberRipple(
                color = it
            )
        } ?: LocalIndication.current,
        interactionSource = remember { MutableInteractionSource() }
    )
}

Modify ripple color of IconButton in Jetpack Compose

4 Answers4

Linked