Hey all. Can someone chime in for a problem I am h...

# compose

[Yashar]

Hey all. Can someone chime in for a problem I am having? I wanted to create a slider style button where additional actions are hidden beneath.
The current setup is as below. And I can't get the surface below the card to register taps. Does moving the top layer card not expose tap-able surface of the view beneath?

Box {
        Card(...) {
            Row(...)
            ) {
                Surface(
                    modifier = Modifier
                        .fillMaxHeight()
                        .fillMaxWidth(0.5f)
                        .clickable(onClick = { ... }),
                    color = Color.Red
                ) {
                    ...
                }
                Surface(modifier = Modifier.fillMaxSize().clickable(onClick = { ... }), color = Color.Blue) {
                    ...
                }
            }
        }

        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(boxHeight)
                .padding(horizontal = 40.dp, vertical = 16.dp)
                .swipeable(
                    state = swipeableState,
                    anchors = anchors,
                    thresholds = { _, _ -> FractionalThreshold(0.3f) },
                    orientation = Orientation.Horizontal
                )
                .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) }

        ) {
            Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.clickable(onClick = { ... })) {
                ...
            }
        }
}

offset.mp4

[matvei]

you have conflicting gesture detection in the sibling tree nodes (clickable and swipeable both children of the box). Sicne they are not parent-child but siblings, they are not able to collaborate properly together.

You can try a few things.
1. Make swipeable to be a top-level box modifier. It should work since there will be a parent-child gesture chain (we have the same code in SwipeToDismiss component)
2. Try to swap offset to be before swipeable . This way your swipeable area will be a top white one, because swipeable bounds will be calculated after offset is applied
3. Consider using experimental SwipeToDismiss that we have in the public API. It seems like it might solve the case you want.

[Yashar]

Thanks! Your solutions worked 👍

[matvei]

Just curious which one have you found the best fitting your use case?

[Yashar]

2 was the solution that required the least amount of refactoring so I went with that 🙂

[Yashar]

Another reminder that ordering is super important in Compose