Detecting long clicks/presses in Jetpack Compose

So you're using Compose and you want to detect if a user long presses a Composable of some kind...You've come to the right blog!

Before we get into it, I actually wrote another article a little while back about how to run some code with a delay using LaunchedEffect in Jetpack Compose. If you're interested in Compose feel free to check it out!

In most cases to detect clicks or taps on something that isn't a Button people use the clickable modifier which will detect a normal press:

Copycopy code to clipboard
1Text(
2    text = "ABC",
3    modifier = Modifier.clickable { 
4        // TODO: Do something here
5    }
6)

For a Button you can just use the onClick parameter:

Copycopy code to clipboard
1Button(
2    onClick = { 
3        // TODO: Do something here
4    }
5) {
6    Text("ABC")
7}

Both options are great but they won't detect long presses - just regular ones. This is where another modifier, combinedClickable comes in handy. Here's an example of how to use it:

Copycopy code to clipboard
1Text(
2    text = "ABC",
3    modifier = Modifier.combinedClickable(
4        onClick = {},
5        onLongClick = {
6            // TODO: Do something here
7        }
8    )
9)

The best of both worlds

You might have noticed that there is also a onClick parameter. That's the great thing about combinedClickable, you can detect both regular and long presses:

Copycopy code to clipboard
1Text(
2    text = "ABC",
3    modifier = Modifier.combinedClickable(
4        onClick = {
5            // Regular          
6        },
7        onLongClick = {
8            // Long
9        }
10    )
11)