Android Jetpack Compose: Ripple effect is not working when using clickable

Question

I used this example from android docs:

@Composable
fun ClickableSample() {
    val count = remember { mutableStateOf(0) }
    // content that you want to make clickable
    Text(
    text = count.value.toString(),
    modifier = Modifier.clickable { count.value += 1 }
    )
}

This is how I'm using it in my App:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Lemon_treeTheme {
                ClickableSample()
            }
        }
    }
}

The ripple effect is not working as expected. I tried applying the clickable modifier to various elements such as Box and Row but it's not working as well. It works only with clickable elements such as Button. What am I doing wrong?

Answer 1

The default ripple is clipped by the bounds of the target layout.

You can override it specifying a custom indication with bounded = false :

val interactionSource = remember { MutableInteractionSource() }

Text(
    text = count.value.toString(),
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = rememberRipple(bounded = false)
        ) { count.value += 1 }
)