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.

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

Thanks

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

?

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.

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

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)
        ...
)

there is one more param on

buttonColors

function:

contentColor

. this color will be applied for the both text of the button and ripple

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

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

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

: )

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

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

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