JetPack Compose no effect for clickable item

Question

I have a column with a card in the middle. There should be an action when you click on column, but nothing should happen when you click on the card. (like cancelable dialogs)

When I did this with XML, this problem was solved when set the clickable (true) for the column, but when in Jetpack Compose, when I click on the card, there is an effect that I can not delete it

i set this code to Modifier of Card :

.clickable{}

how delete default effect(press effect no ripple) from clickable item ?

Kurr

Answer 1

You need to set indication to null to not have ripple when your Composable is clicked

Modifier.clickable(
    interactionSource = MutableInteractionSource(),
    indication = null,
    onClick = {}
)

Edit

Assuming you don' want ripple to move through Card inside Column and to achieve that you can use a Box that contains Column and Card as siblings.

   Column(
        modifier = Modifier
            .size(200.dp)
            .background(Color.Green)
            .clickable { },
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Card(
            elevation = 4.dp,
            shape = RoundedCornerShape(5.dp),
            modifier = Modifier
                .size(100.dp)
                .clickable(
                    interactionSource = MutableInteractionSource(),
                    indication = null,
                    onClick = {
                        Toast
                            .makeText(context, "Card", Toast.LENGTH_SHORT)
                            .show()
                    }
                )
        ) {
            Text("In Card")
        }
    }

    Spacer(modifier = Modifier.height(4.dp))
    Box(
        contentAlignment = Alignment.Center
    ) {
        Column(
            modifier = Modifier
                .background(Color.Green)
                .size(200.dp)
                .clickable {
                    Toast
                        .makeText(context, "Column", Toast.LENGTH_SHORT)
                        .show()
                },

            ) {

        }

        Card(
            elevation = 4.dp,
            shape = RoundedCornerShape(5.dp),
            modifier = Modifier
                .size(100.dp)
                .clickable(
                    interactionSource = MutableInteractionSource(),
                    indication = null,
                    onClick = {
                        Toast
                            .makeText(context, "Card", Toast.LENGTH_SHORT)
                            .show()
                    }
                )
        ) {
            Text("In Card")
        }
    }

First one is what you have i guess, if you use a Box and add both items you won't see ripple moving inside your Card

First one is what you have Second one is with Box that won't have ripple in Card

Vizzone