https://kotlinlang.org logo
#compose
Title
# compose
c

Colton Idle

08/08/2022, 8:51 PM
I have an
IconButton
, with an
Icon
inside, but the icon is dark and so the dark touch ripple is kind of hard to see. Is there any way to inverse that somehow so the touch ripple brightens up the inner
Icon
?
l

Louis Pullen-Freilich [G]

08/08/2022, 9:22 PM
Are you setting content color correctly? That is what ripple uses for its color
c

Colton Idle

08/08/2022, 10:42 PM
Hm. I'm not sure how I'd do that. I don't see any arg for contentColor (but I'm assuming that I'm misunderstanding what you're saying here)
l

Louis Pullen-Freilich [G]

08/08/2022, 11:18 PM
Well, icon by default uses content color - so if you are explicitly setting a color for the icon that isn’t using the default content color, you should set this color via content color instead
c

Colton Idle

08/08/2022, 11:21 PM
Alright. I'll try to look up how to do that
l

Louis Pullen-Freilich [G]

08/08/2022, 11:22 PM
Well it kinda depends on what your code looks like. In the general case, content color should be set by the ‘parent’. I.e, if you are in the button, the button will set a value for content color based on its background. Same for an app bar
So whatever the parent of the icon is, should already be setting a color, and ideally that color should be used for the ripple as well
Otherwise you’ll need to explicitly use:
Copy code
CompositionLocalProvider(
        LocalContentColor provides myIconRippleColor) { ... }
c

Colton Idle

08/08/2022, 11:24 PM
Interesting. I will try to play around with this when I'm back at my laptop. In a gist, I basically have IconButton{ Image() //image is dark }
l

Louis Pullen-Freilich [G]

08/08/2022, 11:25 PM
Ok, if it’s an actual image that already has a color (i.e doesn’t use the theming system), then yeah, you should just explicitly set content color around the icon button to configure the ripple color
c

Colton Idle

08/08/2022, 11:26 PM
Gotcha. Any "trick" to make sure I use the proper light colored ripple?
l

Louis Pullen-Freilich [G]

08/08/2022, 11:27 PM
What do you mean by ‘proper’? At this point you’re already outside of the expectations of the Material theming system, so you’ll need to pick a suitable color I guess
c

Colton Idle

08/08/2022, 11:28 PM
I just know some things in material are just simply "take your color and .copy(alpha=.2f)
But understood that it's out of the bounds of material and I need to handle it myself. Thanks for the pointers 🙏
l

Louis Pullen-Freilich [G]

08/08/2022, 11:33 PM
The alpha is already handled separately, you just need to provide the ‘raw’ color to which alpha will be applied. Probably just
Color.White
is fine in your case, if its’ a dark image
c

Colton Idle

08/09/2022, 9:02 PM
Thank you ❤️
2 Views