Hi is it possible to remove the ripple effect kotlinlang #compose-android

Join Slack

Hi, is it possible to remove the ripple-effect?

# compose-android

Jan

06/21/2023, 3:34 PM

Hi, is it possible to remove the ripple-effect?

Jan

06/21/2023, 3:36 PM

I tried using a custom theme:

Copy code

@Composable
fun CustomTheme(
    darkTheme: Boolean = false/*isSystemInDarkTheme()*/,
    content: @Composable () -> Unit
) {
    val customColors = if (darkTheme) DarkColorPalette else LightColorPalette
    CompositionLocalProvider(
        LocalCustomColors provides customColors,
        LocalRippleTheme provides NoRippleTheme,
        content = content
    )
}

@Immutable
object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = Color.Unspecified

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleAlpha(0.0F, 0.0F, 0.0f, 0.0F)
}

Jan

06/21/2023, 3:37 PM

It seems that my App is using the NoRippleTheme correctly, because when I change the defaultColor to red is kinda red. Unfortunately the ripple is still there (grey) if I set defaultColor to Unspecified/Transparent. I am using this with a Button.

Łukasz Nowakowski

06/21/2023, 3:41 PM

try this:

Copy code

CompositionLocalProvider(
   LocalIndication provides NoRipple,
   ...
   content = content,
)

private object NoRipple : Indication, IndicationInstance {
    @Composable
    override fun rememberUpdatedInstance(interactionSource: InteractionSource) = this
    override fun ContentDrawScope.drawIndication() = drawContent()
}

Jan

06/21/2023, 3:44 PM

Hm ... not working. Maybe its compose-multiplatfor related?

Łukasz Nowakowski

06/21/2023, 3:57 PM

Interesting just now I checked and it works on both versions ( multiplatform, android ). I use it:

Copy code

@Composable
fun CustomTheme(
    darkTheme: Boolean = false/*isSystemInDarkTheme()*/,
    content: @Composable () -> Unit
) {
    val customColors = if (darkTheme) DarkColorPalette else LightColorPalette
    CompositionLocalProvider(
        LocalIndication provides NoRipple,
        content = content
    )
}

private object NoRipple : Indication, IndicationInstance {
    @Composable
    override fun rememberUpdatedInstance(interactionSource: InteractionSource) = this
    override fun ContentDrawScope.drawIndication() = drawContent()
}

Jan

06/21/2023, 4:15 PM

Hm … will check later and let you know. Thanks for help

Jan

06/22/2023, 7:30 AM

Hi @Łukasz Nowakowski I am using this template https://github.com/JetBrains/compose-multiplatform-ios-android-template

Jan

06/22/2023, 7:31 AM

and I changed the App file like this:

Copy code

@OptIn(ExperimentalResourceApi::class)
@Composable
fun App() {
    //MaterialTheme {
        CompositionLocalProvider(LocalIndication provides NoRipple) {
            var greetingText by remember { mutableStateOf("Hello, World!") }
            var showImage by remember { mutableStateOf(false) }
            Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
                Button(onClick = {
                    greetingText = "Hello, ${getPlatformName()}"
                    showImage = !showImage
                }) {
                    Text(greetingText)
                }
                AnimatedVisibility(showImage) {
                    Image(
                        painterResource("compose-multiplatform.xml"),
                        null
                    )
                }
            }
        }
    //}
}

object NoRipple : Indication, IndicationInstance {
    @Composable
    override fun rememberUpdatedInstance(interactionSource: InteractionSource) = this
    override fun ContentDrawScope.drawIndication() = drawContent()
}

Jan

06/22/2023, 7:31 AM

on the Button there is still a Ripple effect

Jan

06/22/2023, 7:42 AM

just not working due internal ripple effect: https://stackoverflow.com/questions/71570231/why-dont-indication-work-for-button-or-icons/71573371#71573371

Jan

06/22/2023, 7:46 AM

image.png

Jan

06/22/2023, 7:46 AM

rememberRipple of Material-Surface seems to be the problem