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 ?
You need to set indication to null to not have ripple when your Composable is clicked
Modifier.clickable(
interactionSource = MutableInteractionSource(),
indication = null,
onClick = {}
)
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
