CODEWITHSUNDEEP
androidandroid-jetpack-compose
ameencarpenter
ameencarpenter

Reputation: 2609

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

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?

Upvotes: 0

Views: 1337

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 365008

The default ripple is clipped by the bounds of the target layout, then the size of the composable can influence the ripple appearance.

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 }
)

enter image description here

Upvotes: 3

Related Questions