I wasn't able to find anything recent that still worked for answering this simple question, but excu...

# compose

[Colton Idle]

I wasn't able to find anything recent that still worked for answering this simple question, but excuse me if my slack search skills are failing me.

How can you change the ripple color of a materialButton? My designer wants to slightly change the alpha of the ripple vs the one that comes out of the box.

[Louis Pullen-Freilich [G]]

Take a look at RippleTheme 🙂

[Colton Idle]

@Louis Pullen-Freilich [G] is there a sample somewhere. I'm failing to see how I would actually use it?

[Louis Pullen-Freilich [G]]

You can provide a new value for ripple theme inside the composition local, so all ripples inside will use those values. There's no sample because it's a fairly advanced use case that we didn't add a sample for, but if you take a look at MaterialTheme you can see how it provides the ripple theme

[Colton Idle]

@Louis Pullen-Freilich [G] thanks for the tip. I ended up with something like this for now

CompositionLocalProvider(
    LocalRippleTheme provides MaterialRippleTheme
) {
    Button({ }) {
        Text("YAY")
    }
}

and

@Immutable
private object MaterialRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = RippleTheme.defaultRippleColor(
        contentColor = LocalContentColor.current,
        lightTheme = MaterialTheme.colors.isLight
    )

    @Composable
    override fun rippleAlpha() = RippleTheme.defaultRippleAlpha(
        contentColor = LocalContentColor.current,
        lightTheme = MaterialTheme.colors.isLight
    )
}

Now I just need to tweak the alpha and I think it should all work?

[Louis Pullen-Freilich [G]]

Yep should work fine

[Colton Idle]

Thanks. Not as terrible as I thought. lol
Having to jump through these "hoops" was kind of unexpected. I guess I'm surprised that it's not taken into account with the Colors arg or some modifier, etc.

[Louis Pullen-Freilich [G]]

Well ripple alpha is really core to the design system, it's not really something that is supposed to be customized, since it has strong semantic meaning and can hurt the accessibility of a component if it isn't obviously in one state or not

[Colton Idle]

Gotcha. I guess we have a case where it just seems too dark and we're not sure how that value ends up being calculated. Maybe this is an XY type of problem, or maybe just something we shouldn't try to "solve" at all.

[Louis Pullen-Freilich [G]]

Oh, there is a known problem where we use the wrong alpha in some cases, so maybe this is related? What are the colors for your button?

[Colton Idle]

@Louis Pullen-Freilich [G] oh cool! Let me get back to you with specifics!

[Louis Pullen-Freilich [G]]

*not wrong alpha, but wrong color and alpha