Why ripple effect not working in my jetpack compose project?-CodePudding

I'm new in jetpack compose and I'm try to learning jetpack compose and so I have small jetpack compose project, I try to use ripple effect in my project but it is not work, any idea?

fun MyScreen() {
    Column(
        modifier = Modifier.fillMaxSize() ) {    
        MyRow(
            name = “see”,
            detail = “All”,
            onClick = {
               
                } } ) }}   
    fun MyRow(
    name: String,
    detail: String,
    onClick: () -> Unit
    ) {
   val interactionSource = remember { MutableInteractionSource() }
     Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .clickable(onClick = onClick
      interactionSource = interactionSource,
                        indication = null),
{ }, ) {    
          Column(
            modifier = Modifier
                .width(150.dp)
        ) {
            Text(
                text = name,
                modifier = Modifier.clickable { onClick.invoke() },
                style = TextStyle(
                    fontSize = 16.sp,
                    ) )
            Text(
                text = detail,
                modifier = Modifier.clickable { onClick.invoke() },
                style = TextStyle(
                    fontSize = 13.sp,
                )) } }}

CodePudding user response：

It's not working because you set indication = null. This should either be indication = rememberRipple() or customized such as

  indication = rememberRipple(
                        bounded = true,
                        radius = 250.dp,
                        color = Color.Green
                    )

either a custom Indication such as

private class CustomRippleTheme(val color: Color = Color.Black) : RippleTheme {
    @Composable
    override fun defaultColor(): Color = color

    @Composable
    override fun rippleAlpha(): RippleAlpha =
        RippleTheme.defaultRippleAlpha(color, lightTheme = !isSystemInDarkTheme())
}

private class CustomIndication(
    val pressColor: Color = Color.Red,
    val cornerRadius: CornerRadius = CornerRadius(16f, 16f),
    val alpha: Float = 0.5f,
    val drawRoundedShape: Boolean = true
) : Indication {

    private inner class DefaultIndicationInstance(
        private val isPressed: State<Boolean>,
    ) : IndicationInstance {

        override fun ContentDrawScope.drawIndication() {

            drawContent()
            when {
                isPressed.value -> {
                    if (drawRoundedShape) {
                        drawRoundRect(
                            cornerRadius = cornerRadius,
                            color = pressColor.copy(
                                alpha = alpha
                            ), size = size
                        )
                    } else {

                        drawCircle(
                            radius = size.width,
                            color = pressColor.copy(
                                alpha = alpha
                            )
                        )
                    }
                }
            }
        }
    }

    @Composable
    override fun rememberUpdatedInstance(interactionSource: InteractionSource): IndicationInstance {
        val isPressed = interactionSource.collectIsPressedAsState()
        return remember(interactionSource) {
            DefaultIndicationInstance(isPressed)
        }
    }
}

CodePudding user response：

Use indication = LocalIndication.current instead of indication = null:

Row(
    modifier = Modifier
        .fillMaxWidth()
        .padding(8.dp)
        .clickable(
            onClick = onClick,
            interactionSource = interactionSource,
            indication = LocalIndication.current)
    )

The parameter indication = null disables the ripple effect.