How to detect motion events on a compose button?

Question

I am trying to create an icon button which invokes a lambda when tapped, but if the user presses the button and holds it, then also the lambda should get continuously invoked in fixed intervals.

@Composable
fun MyIconButton(
    someLambda: () -> Unit
) {
    IconButton(onClick = someLambda) {
        Icon(
            // painter and content description
        )
    }
}

Here what I want is that when user presses the button, someLambda should get invoked (which is working fine). Additionally, I also want to invoke someLambda repeatedly (with a gap of 500ms between two invocations) until the user releases the button.

Basically what I want is to detect something like the KeyUp and KeyDown events.

How to achieve this?

Better to check this once ... you might get some idea https://stackoverflow.com/questions/65835642/button-long-press-listener-in-android-jetpack-compose — AgentP, Oct 16 '21 at 14:18
@ArpitShukla. I don't get it. At one place you are saying that you just want a button that executes different code blocks based on press and long press, then you suddenly introduce keyboard and ARROW KEYS? A.) Which Android keyboard have you seen that incorporates arrow keys, and second, where did the keyboard enter the picture from at all? You don't want a Composable button? — Richard Onslow Roper, Oct 16 '21 at 16:13
I don't want any long press listener actually. Also I wasn't talking about Arrow Keys. From KeyUp and KeyDown, I was trying to refer to MotionEvent.ACTION_UP and MotionEvent.ACTION_DOWN which we used in the older View world inside onTouchEvent(). — Arpit Shukla, Oct 16 '21 at 16:18
Talk about the keyboard. Why that was mentioned in your post — Richard Onslow Roper, Oct 16 '21 at 16:22
Actually not, the 'key' word still confuses. Why not just say how to detect motion events on a `Button` in Compose — Richard Onslow Roper, Oct 16 '21 at 16:36

Francesc · Answer 1 · 2021-10-17T01:45:46.900

You can use Modifier.pointerInpteropFilter for this:

var job by remember {
    mutableStateOf<Job?>(null)
}
val scope = rememberCoroutineScope()

Icon(
    imageVector = Icons.Filled.Favorite,
    modifier = Modifier
        .requiredSize(96.dp)
        .pointerInteropFilter {
            when (it.action) {
                MotionEvent.ACTION_DOWN -> {
                    job = scope.launch {
                        while (true) {
                            // trigger event
                            Log.d("foo", "Trigger event")
                            delay(500L)
                        }
                    }
                }
                MotionEvent.ACTION_UP,
                MotionEvent.ACTION_CANCEL -> {
                    job?.cancel()
                    job = null
                }
            }
            true
        },
    contentDescription = "Sample icon"
)

Another solution is to use Modifier.pointerInput:

val scope = rememberCoroutineScope()
Icon(
    imageVector = Icons.Filled.Favorite,
    modifier = Modifier
        .requiredSize(96.dp)
        .pointerInput(Unit) {
            while (true) {
                awaitPointerEventScope {
                    awaitFirstDown()
                    val job = scope.launch {
                        while (true) {
                            // trigger event
                            Log.d("foo", "Trigger event")
                            delay(500L)
                            Log.d("foo", "After delay")
                        }
                    }
                    waitForUpOrCancellation()
                    job.cancel()
                }
            }
        },
    contentDescription = "Sample icon"
)

score 1 · Accepted Answer · answered Oct 17 '21 at 05:49

I solved the problem using this Modifier.pointerInput on my Icon.

Modifier.pointerInput(true) {
    detectTapGestures(onPress = {
        coroutineScope {
            val job = launch {
                while (true) {
                    // Invoke lambda
                    delay(500)
                }
            }
            tryAwaitRelease()
            job.cancel()
        }
    })
}

As per the documentation,

onPress is called when the press is detected and PressGestureScope.tryAwaitRelease can be used to detect when pointers have released or the gesture was canceled.

score 0 · Answer 3 · answered Oct 16 '21 at 18:35

0

I'll update the answer by tomorrow, but for now, this should suit your use case

Modifier.pointerInput(Unit) {
    detectTapGestures(
        onPress = { /* Called when the gesture starts */ },
        onDoubleTap = { /* Called on Double Tap */ },
        onLongPress = { /* Called on Long Press */ },
        onTap = { /* Called on Tap */ }
    )
}

answered Oct 16 '21 at 18:35

Richard Onslow Roper

5,477
2
11
42

But wait, where's Perry? – Richard Onslow Roper Oct 16 '21 at 18:37

How to detect motion events on a compose button?

3 Answers3