Hi, does anyone have any suggestions for being able to click "behind" a scrollable Column? (e.g. `Bu...

# compose

[Clayton G]

Hi, does anyone have any suggestions for being able to click "behind" a scrollable Column? (e.g. Button behind Column)
If the column isn't scrollable (No Modifier.verticalScroll()) I can click behind it fine.
But, when it's scrollable it seems to consume taps as well as drags. Is there a way to only consume drags and not taps?

I can detectTapGestures on the Column and then forward the taps to a MutableInteractionSource that the Button is using.
It works, but I have to manually do the hit test and call the button's click listener.
It also doesn't work with non-clickable composables in the Column. You can click through them to the button.

If anyone has suggestions or pointers that'd be great, Thanks!

clicking.mp4

[Clayton G]

compose.kt

compose.kt

[Garret Yoder]

Is there any particular reason the button is behind the list? The path of least resistance is probably just put a button on top of the list that's invisible.

[Clayton G]

I want it to scroll with a list and then when it hits the top, go behind the list. Like this:

button.mp4

[Garret Yoder]

But why does it still need to be clickable if it's behind the list and the user can't see it?

[Clayton G]

It only needs to be clickable if you can see it.
The part of the screen showing the map is behind the `Column`:

Box { 
    GoogleMap()
    FloatingActionButton()
    Column {
        Spacer()
        // ...
    }     
}

[Garret Yoder]

Ahhh I see.

You might want to try a bottom sheet or similar widget then, I see what you're trying to do. The sheet shouldn't interfere with your touch events.

If you want to do it by hand, you can also do a custom drag listener on the title bar of that widget and then resize/reduce the top padding based on the drag but that seems hacky compared to the bottom sheet

[Garret Yoder]

There isn't a good way I'm aware of to pass the click event through the list, when it's scrollable its capturing all events and then deciding what it wants to react on from there

[Garret Yoder]

https://developer.android.com/jetpack/compose/components/bottom-sheets

[Clayton G]

I didn't think about bottom sheets at all! (I think because I imagined the the default design with the little handle at the top looking nothing like what I have in the video)
But having it work like one might work, thanks!

[Garret Yoder]

They're pretty customizable like most things in compose, there is also a lot of really good 3rd party implementations of it too if you need to go outside the feature set of the standard one, but it's pretty robust.

[Clayton G]

That did the trick, thanks again for the suggestion.

bottomsheetd.mp4

[Clayton G]

compose.kt.cpp

compose.kt.cpp

[Clayton G]

In case anyone wants to do something similar. I adapted it from the Material3 BottomSheet code.