I am trying to make a child composable non-interac...

# compose

[Vinay Gaba]

I am trying to make a child composable non-interactive under certain conditions. I don’t know anything about the child composable and can’t change its definition either(so can’t simply pass a modifier to it). So I was trying to wrap it inside a Box and then applying the rawPressStartGestureFilter to it. This actually works but it also ends up interfering with the scroll of the screen that these composables are on (this is expected as this is how you’d expect this gesture filter to work). Is there a better way to accomplish this? Just using tap or clickable on the parent composable still propagates the touch to the child composable so I need a better way to intercept the touch while keeping the scroll functionality intact.

[galex]

I’m doing a progress view on top of all children maybe that can help:

Stack(Modifier.fillMaxSize()) {
        children?.invoke()
        Box(
            modifier = Modifier.fillMaxSize().tapGestureFilter {},
            backgroundColor = colorResource(id = R.color.transparent_black),
            gravity = ContentGravity.Center
        ) {
            CircularProgressIndicator()
        }
    }

[Vinay Gaba]

oh that’s an interesting idea! Let me try stacking them!

[Vinay Gaba]

I haven’t tried it yet but I think this might not work, unless Stack causes special logic that allows interception of gestures due to the order of composable. Will report back shortly!

[galex]

If the most top box catches the tap, the children behind can’t be tapped on

[Vinay Gaba]

With the same logic, I was trying this

Box(modifier = Modifier.clickable{ //do Something }) {
    child()
}

It’s possible that this does not create an “gesture hierarchy” of sorts but Stack does? Do you happen to know?

[galex]

Box is just a container AFAIK, when Stack really puts the children one on top of another so that’s why it works

[galex]

I see what you mean, as if the parent composable of a Box should also “catch” the tap event instead of passing it to its children. I do not know enough about Compose to have an answer yet

[Vinay Gaba]

So for me to get it to work with Stack, I need to know the size of the child composable so that I can place a Box on top of it exactly using Stack. So I made use of the onPositioned modifier but the size it returns is incorrect and it ends up occupying a lot more space than the space the child composable occupies.

Stack {
    var size by state{ IntSize(0, 0) }
    Box(Modifier.onPositioned{size = it.size}) {
        childComposable
    }
    
    // Height it returns is almost double of what the child composable occupies.
    Box(Modifier.height(it.size.dp))
}

[Vinay Gaba]

@Zach Klippenstein (he/him) [MOD] I know you’ve dabbled with onPositioned a few times. Were you noticing this as well where the size was off?

[Zach Klippenstein (he/him) [MOD]]

I haven’t, but i haven’t played with it for a while. I think there’s also currently a bug where only one onPositioned callback will be fired if multiple nodes are re-layed out, so there are clearly bugs. I’d suggest filing a bug.

[Vinay Gaba]

Thanks for the super prompt reply! Yeah does seem like a bug! I’ll file it!

[Vinay Gaba]

There was a response of my ticket and apparently Stack has a special modifier called matchParentSize . So my example would have to look like this and it works!

Stack {
    Box {
        childComposable()
    }
    Box(Modifier.matchParentSize())
}

[Vinay Gaba]

@galex also Stack does intercept that child composable like you recommended! Thanks for the tip!

[Vinay Gaba]

still looking for an answer for why I couldn’t just intercept the touch by applying a gesture to the parent Box without needing a Stack