How do I make a Composable transparent for clicks?...

# compose

[alaershov]

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?

[james]

build your clickable modifier conditionally. something like this:

val modifier = Modifier
    .fillMaxWidth()
    .graphicsLayer { alpha = if (invisible) 0f else 1f }

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

[alaershov]

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

[james]

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

[james]

1 sec, I’ll see if I can find specifics for you. I’ve seen it mentioned before

[james]

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

[alaershov]

thanks, I'll look into it!

[Albert Chang]

This should work.