Home > Enterprise >  What is clickable indication in jetpack compose?
What is clickable indication in jetpack compose?

Time:07-30

Hey guys I am doing background selector in jetpack compose. I asked different question regarding background click question. I noticed when I am using

indication = LocalIndication.current

inside my Modifier.clickable and when trying to click it shows very different dark in color which I don't want. You can check in this video. When I changed to

indication = rememberRipple(true)

it showing me correct color which I want to show. I tried to see in the document to understand what is the use of this. Can someone guide me what is the use of this and explain me different types we can use inside this indication. Thanks

CodePudding user response:

indication indication to be shown when modified element is pressed. Be default, indication from [LocalIndication] will be used. Pass null to show no indication, or current value from [LocalIndication] to show theme default

Indication is by default ripple effect when you click an item

You can get it from your theme, use rememberRipple or you can write you own your Indication

Examples below and more is available in this tutorial for Compose. You can test it

With rememberRipple()

@Composable
fun CustomRippleExample() {

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
    ) {
        Box(
            contentAlignment = Alignment.Center,
            modifier = modifierWithClip
                .clickable(
                    interactionSource = MutableInteractionSource(),
                    indication = rememberRipple(
                        bounded = true,
                        radius = 250.dp,
                        color = Color.Green
                    ),
                    onClick = {}
                )
        ) {
            Text(
                text = "rememberRipple() bounded",
                color = Color.White
            )
        }

        Spacer(modifier = Modifier.height(8.dp))

        Box(
            contentAlignment = Alignment.Center,
            //            
  • Related