Ignore a click on Jetpack Compose Card, but catch it in the containing layout

Question

I had an XML layout for CardView that I changed to Jetpack Compose Card. This Card is included in another clickable larger XML layout that has other items around that card.

In the old CardView layout the onClick wasn't handled, and clicking on the card was just like clicking anywhere else on the larger layout.

Now when the card is Jetpack Compose, the click is separated from the larger layout, and by default the card is not clickable at all. when I add clickable modifier, then the card is clickable but separated from the larger layout and is not handled by that layout.

How can I make the Jetpack Compose Card behave the same as a regular CardView that has no click action of its own? I want the entire layout be clickable no matter if the click is on the card or anywhere else.

I tried setting

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

But it didn't help, the card is still not clickable, only when clicking outside the card then the desired action is triggered.

Using onClick = { } makes the card clickable, but separated from the rest of the layout.

I can't put it inside Box, because the card is included in an XML layout

Starting from 1.0.0-beta08 with the Card you have to use the version with the onClick parameter. Check https://stackoverflow.com/questions/67932603/why-compose-card-not-clickable/67932902#67932902 — Gabriele Mariotti, Nov 17 '22 at 09:32
It makes the card clickable, not the whole layout behind. I need the card not to block the click, but also not to catch it. I need the layout that contains the card and the rest of the items handle the click — user990635, Nov 17 '22 at 09:37
Card( shape = RoundedCornerShape(12.dp), backgroundColor = LocalColors.current.Grey900 ) — user990635, Nov 17 '22 at 09:55
I see it can either block clicks, or catch them. I want them not to be blocked, but handled by the containing layout as in a regular "old" cardView — user990635, Nov 17 '22 at 09:56
It is not clear what is your code.If you have a clickable box, and inside a not clickable Card, all the layout is clickable — Gabriele Mariotti, Nov 17 '22 at 10:57
I have an old XML layout, and only the Card component is Compose at the moment — user990635, Nov 21 '22 at 21:49

score 2 · Answer 1 · answered Nov 17 '22 at 11:04

2

If you want to have a clickable parent layout just use:

val interactionSource = remember { MutableInteractionSource() }

Box(Modifier
    //...
    .clickable(
        interactionSource = interactionSource,
        indication = LocalIndication.current,
        onClick = { /** doSomething() **/}
    )
    //.padding(4.dp)
) {
    Card(){
        //Card content
    }
}

answered Nov 17 '22 at 11:04

Gabriele Mariotti

320,139
94
887
841

Thanks! can it be done somehow when the parent layout is an old XML layout and not Compose? – user990635 Nov 21 '22 at 21:48
I have a similar issue but with a child `Chip` composable. And this doesn't seem to work from that. I can't seem to stop the `Chip` grabbing the click. – Mark May 04 '23 at 15:13

Ignore a click on Jetpack Compose Card, but catch it in the containing layout

1 Answers1