Combine detectTapGestures and detectDragGesturesAfterLongPress?

2.3k Views Asked by At

We need to be able to detect both taps and drag gestures after long press on the same component in Jetpack Compose.

To detect taps we can do:

Modifier.pointerInput(graphData) {
    detectTapGestures(
        ...
    )
}

And to detect drag gestures after long press:

Modifier.pointerInput(graphData) {
    detectDragGesturesAfterLongPress(
        ...
    )
}

But it is not possible to use both at the same time, since the first detect* will consume the pointer events:

Modifier.pointerInput(graphData) {
    detectTapGestures(
        ...
    )
    detectDragGesturesAfterLongPress(
        ...
    )
}

Is it possible to achieve this in a more convenient way then rolling our own custom function that replicates most of the code in detectDragGesturesAfterLongPress?

1

There are 1 best solutions below

1
On BEST ANSWER

By chaining two Modifier.pointerInput(Unit) functions you will be able to detect both gestures. Of course you won't be able to detect tap if drag gesture has started

val context = LocalContext.current

val modifier = Modifier
    .pointerInput(Unit) {
        detectTapGestures(
            onPress = {
                Toast
                    .makeText(context, "onPress", Toast.LENGTH_SHORT)
                    .show()
            },
            onTap = {
                Toast
                    .makeText(context, "onTap", Toast.LENGTH_SHORT)
                    .show()
            }
        )
    }

    .pointerInput(Unit) {
        detectDragGesturesAfterLongPress(
            onDragStart = {
                Toast
                    .makeText(context, "onDragStart", Toast.LENGTH_SHORT)
                    .show()
            },
            onDrag = { change, dragAmount ->
                println("DRAGGING$ dragAmount")

            }
        )
    }