Hi, what is the correct way for setting a ripple c...

# compose

[Jakub Ledwon]

Hi, what is the correct way for setting a ripple color on a button at this moment? I have a black button and in light mode it has no ripple - likewise for white button in dark mode.

[Bryan Herbst]

Button internally uses AmbientIndication , which by default is just rememberRipple().

If you want to change the color for a single button, you can wrap that button in with a new AmbientIndication provider like so:

val customRippleFactory: @Composable() -> Indication = remember {
  @Composable { rememberRipple(color = WhateverColorYouWant) }
}
Providers(AmbientIndication provides customRippleFactory) {
  Button() {
    // ...
  }
}

If you want to customize the behavior for all your buttons, you probably want to do this at your theme level, and provide an AmbientRippleTheme instead. MaterialTheme ships with a MaterialRippleTheme that you can use as a starting point for whatever behavior you want

[Jakub Ledwon]

Thanks

[Louis Pullen-Freilich [G]]

This works currently, but there is no guarantee that components will consume AmbientIndication - it's used as a default for components like clickable but it isnt' intended to be a way to override the ripple in Material components - it sounds like there is a more core issue here since the ripple color should work properly without you needing to override this.

What are the colors in your MaterialTheme in light / dark theme, and what parameters are you passing to the Button ?

[Jakub Ledwon]

I didn't change the default themes yet, so it looks like this:

private val DarkColorPalette = darkColors(
        primary = purple200,
        primaryVariant = purple700,
        secondary = teal200
)

private val LightColorPalette = lightColors(
        primary = purple500,
        primaryVariant = purple700,
        secondary = teal200
)

other colors are default.

[Louis Pullen-Freilich [G]]

When you say 'black button', how are you making it black?

[Jakub Ledwon]

Oh actually that might be a problem. I'm still exploring compose, so I have somewhat naive approach here:

Button(
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.White / Color.Black)
        ...
)

[Andrey Kulikov]

there is one more param on buttonColors function: contentColor. this color will be applied for the both text of the button and ripple

[Oussama Haff.]

I came across the same need when I was trying to rewrite some of our design system components in Compose.

I find the way that ripple effect is implemented in default Compose Button does not give the same flexibility as in XML with the attribute rippleColor in the style of Widget.MaterialComponents.Button

Correct me if I’m wrong, now in Compose (alpha-10) there is now way to apply the ripple only on the background of the default Button. To do so, we need to create our own Button on top of the foundation composables

[Louis Pullen-Freilich [G]]

Correct me if I’m wrong, now in Compose (alpha-10) there is now way to apply the ripple only on the background of the default Button

Sorry, not sure I follow - what is your use case here? contentColor is used for text / iconography / ripples, so if you want to change the ripple color you can just change the contentColor you pass to buttonColors

[Oussama Haff.]

As said by Bryan Herbst, to personalize the ripple color for a default Compose button we need to encapsulate the Button in a Composable that provides the ripple as Ambient which is of type Indication

the parameter buttonColors accepts only Colors and not Indication.

I would be thankful if you can share a sample where the ripple color is customized through buttonColors : )

[Louis Pullen-Freilich [G]]

As said by Bryan Herbst, to personalize the ripple color for a default Compose button we need to encapsulate the Button in a Composable that provides the ripple as Ambient which is of type Indication

This actually has just been removed and won't be supported in the next release of Compose - this was an internal implementation detail that isn't really an intended place for customization 🙂

I would be thankful if you can share a sample where the ripple color is customized through buttonColors : ) (edited)

Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(contentColor = Color.Red)
) {
    Text(text = "Hello")
}

In this example the text and the ripple will be red

[Louis Pullen-Freilich [G]]

If your design system components always use a different color for ripples, then you can take a look at RippleTheme and change how the color for ripple is calculated

[Bryan Herbst]

Glad to hear RippleTheme is sticking around- I think that will be a better entry point for customizing ripple colors for cases where you don’t want the text color and ripple color to be the same as with contentColor

[Bryan Herbst]

@Oussama Haff. you also don’t necessarily need to wrap that in a Button-specific composable, assuming you have your own theme composable defined somewhere you could do

@Composable
fun CustomTheme(content: @Composable () -> Unit) {
  Providers(AmbientRippleTheme provides customRippleTheme) {
    content()
  }
}

[Louis Pullen-Freilich [G]]

Yep, exactly. And if it really is something that is specific to one button / component, then it's probably easier and more semantically correct to just build your own component from smaller pieces that sets the ripple color to be what you want