https://kotlinlang.org logo
#compose
Title
# compose
a

alaershov

03/03/2023, 5:48 AM
How do I make a Composable transparent for clicks? I want my Composable to "disappear" both visually and for click events, so that the user is able to click some content below my Composable. But my Composable should still be counted in size calculations, kinda like INVISIBLE in View system. Any ideas how to make clicks pass though my Composable?
j

james

03/03/2023, 6:14 AM
build your clickable modifier conditionally. something like this:
Copy code
val modifier = Modifier
    .fillMaxWidth()
    .graphicsLayer { alpha = if (invisible) 0f else 1f }

val maybeClickableModifier = if (invisible) {
    modifier
} else {
    modifier.clickable { /* your click event */ }
}
a

alaershov

03/03/2023, 6:29 AM
this would probably work if my Composable didn't have any clickable children. However, it does, and their clickable modifiers still work. I want the whole container to disappear and become transparent for clicks
j

james

03/03/2023, 6:37 AM
ah gotcha in that case you want to again have a conditional modifier (or custom modifier) on the parent, and using pointerInput you can consume the events before any children get the chance
1 sec, I’ll see if I can find specifics for you. I’ve seen it mentioned before
this should be helpful: https://github.com/android/user-interface-samples/blob/45459b3a6f03887618ea9f4387a[…]com/example/listdetailcompose/ui/UserInteractionNotification.kt the notable part is
PointerEventPass.Initial
which allows you to take a peek at the events before child composables in that example they’re calling
onInteracted.invoke()
because they’re tracking interactions, but I’m pretty sure you would just
consume
every event
a

alaershov

03/03/2023, 6:44 AM
thanks, I'll look into it!
a

Albert Chang

03/03/2023, 9:22 AM
This should work.
50 Views