androidkotlinandroid-jetpack-composeandroid-jetpack-compose-gesture

Combine detectTapGestures and detectDragGesturesAfterLongPress?


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?


Solution

  • 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")
    
                }
            )
        }