Button Long Press Listener in Android jetpack compose

Question

I am having an Android Composable UI with a Button.

How can I track button long press events? I got it working for the Text long press, but for Button, It is not working. Same way like below if I apply a modifier to the button, it is not working.

Text(
    text = view.text,
    fontSize = view.textFontSize.toInt().sp,
    fontWeight = FontWeight(view.textFontWeight.toInt()),
    color = Color(android.graphics.Color.parseColor(view.textColor)),
    modifier = Modifier.clickable(
        onClick = {
            println("Single Click")
        }, 
        onLongClick = {
            println("Long Click")
        }, 
        onDoubleClick = {
            println("Double Tap")
        },
    ),
)

I think you can use LongPressFiredEvent but I'm not sure. – morteza ataiy Jan 21 '21 at 23:37 — morteza ataiy, Jan 21 '21 at 23:37

score 71 · Answer 1 · answered Aug 11 '21 at 15:26

71

You can use combinedClickable like the following:

Modifier
    .combinedClickable(
        onClick = { },
        onLongClick = { },
    )

Warning: with Compose 1.0.1 this method is marked as @ExperimentalFoundationApi so this answer may get outdated in the future releases.

answered Aug 11 '21 at 15:26

Piotr Aleksander Chmielowski

5,640
7
29
45

3

Come on guys, simple and effective! – gaohomway Sep 05 '22 at 07:20
3

Not sure if this used to work but it doesn't anymore, seems like the button's own clickable modifier consumes the events before combinedClickable can get to it :( Why is something like this so difficult? – Jack Feb 10 '23 at 09:46

score 25 · Answer 2 · edited Dec 04 '21 at 14:40

https://developer.android.com/jetpack/compose/gestures can be used as well.

for example:

 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.foundation.gestures.detectTapGestures

 modifier = Modifier
           .weight(2f)
           .pointerInput(Unit){
               detectTapGestures(
                     onLongPress = {
                             // perform some action here..
                     }
               )
            }

adneal · Accepted Answer · 2021-02-11T15:11:39.177

The best way to handle this is to roll your own Button. The Material Button is basically just a Surface and a Row. The reason adding your own Modifier.clickable doesn't work is because one is already set.

So, if you'd like to add onLongPress, etc you can copy/paste the default implementation and pass those lambdas in.

@Composable
@OptIn(ExperimentalMaterialApi::class, ExperimentalFoundationApi::class)
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onDoubleClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    interactionState: InteractionState = remember { InteractionState() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    val contentColor by colors.contentColor(enabled)
    Surface(
        shape = shape,
        color = colors.backgroundColor(enabled).value,
        contentColor = contentColor.copy(alpha = 1f),
        border = border,
        elevation = elevation?.elevation(enabled, interactionState)?.value ?: 0.dp,
        modifier = modifier.combinedClickable(
            onClick = onClick,
            onDoubleClick = onDoubleClick,
            onLongClick = onLongClick,
            enabled = enabled,
            role = Role.Button,
            interactionState = interactionState,
            indication = null
        )
    ) {
        Providers(LocalContentAlpha provides contentColor.alpha) {
            ProvideTextStyle(
                value = MaterialTheme.typography.button
            ) {
                Row(
                    Modifier
                        .defaultMinSizeConstraints(
                            minWidth = ButtonDefaults.MinWidth,
                            minHeight = ButtonDefaults.MinHeight
                        )
                        .indication(interactionState, rememberRipple())
                        .padding(contentPadding),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically,
                    content = content
                )
            }
        }
    }
}

Usage:

Button(
    onClick = {},
    onLongClick = {},
    onDoubleClick = {}
) {
    Text(text = "I'm a button")
}

I've implemented this in Material 3. It's not exactly the same as the normal button, but if not placed one next to the other, it's completelly normal. — Arnyminer Z, Aug 24 '22 at 14:54

score 7 · Answer 4 · answered Oct 02 '21 at 19:29

According to documentation

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

score 4 · Answer 5 · answered Apr 28 '22 at 07:03

This is my solution

@OptIn(ExperimentalMaterialApi::class, ExperimentalFoundationApi::class)
@Composable
fun MyButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: () -> Unit = {},
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    val contentColor by colors.contentColor(enabled)
    var tapped by remember { mutableStateOf(false) }
    Surface(
        modifier = modifier
            .clip(shape)
            .indication(interactionSource, LocalIndication.current)
            .pointerInput(Unit) {
            detectTapGestures(
                onPress = { offset ->
                    tapped = true
                    val press = PressInteraction.Press(offset)
                    interactionSource.emit(press)
                    tryAwaitRelease()
                    interactionSource.emit(PressInteraction.Release(press))
                    tapped = false
                },
                onTap = { onClick() },
                onLongPress = { onLongClick() }
            )
        }
        ,
        shape = shape,
        color = colors.backgroundColor(enabled).value,
        contentColor = contentColor.copy(alpha = 1f),
        border = border,
        elevation = elevation?.elevation(enabled, interactionSource)?.value ?: 0.dp,
    ) {
        CompositionLocalProvider(LocalContentAlpha provides contentColor.alpha) {
            ProvideTextStyle(
                value = MaterialTheme.typography.button
            ) {
                Row(
                    Modifier
                        .defaultMinSize(
                            minWidth = ButtonDefaults.MinWidth,
                            minHeight = ButtonDefaults.MinHeight
                        )
                        .padding(contentPadding),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically,
                    content = content
                )
            }
        }
    }
}

Simply override default button and use it when you need to catch click or longClick event

score 3 · Answer 6 · answered Jun 15 '21 at 18:34

5 months later, the accepted answer doesn't work because of API changes. detectTapGestures() on Button didn't work for me either (i guess .clickable() steals the event?).

Surface now has two public constructors. First one is not clickable and explicitly overrides .pointerInput(Unit) to be empty

Surface(
...
    clickAndSemanticsModifier = Modifier
        .semantics(mergeDescendants = false) {}
        .pointerInput(Unit) { detectTapGestures { } }
)

Second one (that is used by Button) is clickable and explicitly sets Modifier.clickable(). And if Button with detectTapGestures() doesn't work for you, this one won't work either.

There is a third private constructor that doesn't override your click events. So I ended up just stealing that and putting it next to custom LongPressButton.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LongPressButton(
    modifier: Modifier = Modifier,
    onClick: () -> Unit = {},
    onLongPress: () -> Unit = {},
    onDoubleClick: () -> Unit = {},
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    val contentColor by colors.contentColor(enabled)
    Surface(
        modifier = modifier,
        shape = shape,
        color = colors.backgroundColor(enabled).value,
        contentColor = contentColor.copy(alpha = 1f),
        border = border,
        elevation = elevation?.elevation(enabled, interactionSource)?.value ?: 0.dp,
        clickAndSemanticsModifier = Modifier.combinedClickable(
            interactionSource = interactionSource,
            indication = rememberRipple(),
            enabled = enabled,
            role = Role.Button,
            onClick = onClick,
            onDoubleClick = onDoubleClick,
            onLongClick = onLongPress,
        )
    ) {
        CompositionLocalProvider(LocalContentAlpha provides contentColor.alpha) {
            ProvideTextStyle(
                value = MaterialTheme.typography.button
            ) {
                Row(
                    Modifier
                        .defaultMinSize(
                            minWidth = ButtonDefaults.MinWidth,
                            minHeight = ButtonDefaults.MinHeight
                        )
                        .padding(contentPadding),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically,
                    content = content
                )
            }
        }
    }
}


@Composable
private fun Surface(
    modifier: Modifier,
    shape: Shape,
    color: Color,
    contentColor: Color,
    border: BorderStroke?,
    elevation: Dp,
    clickAndSemanticsModifier: Modifier,
    content: @Composable () -> Unit
) {
    val elevationOverlay = LocalElevationOverlay.current
    val absoluteElevation = LocalAbsoluteElevation.current + elevation
    val backgroundColor = if (color == MaterialTheme.colors.surface && elevationOverlay != null) {
        elevationOverlay.apply(color, absoluteElevation)
    } else {
        color
    }
    CompositionLocalProvider(
        LocalContentColor provides contentColor,
        LocalAbsoluteElevation provides absoluteElevation
    ) {
        Box(
            modifier
                .shadow(elevation, shape, clip = false)
                .then(if (border != null) Modifier.border(border, shape) else Modifier)
                .background(
                    color = backgroundColor,
                    shape = shape
                )
                .clip(shape)
                .then(clickAndSemanticsModifier),
            propagateMinConstraints = true
        ) {
            content()
        }
    }
}

If there is a better way that works, please share. Because current solution is ugly.

does this help? https://stackoverflow.com/questions/69156624/onpressin-and-onpressout-in-jetpack-compose — user2297550, Mar 28 '22 at 15:19

Andrey Orel · Answer 7 · 2023-03-10T21:35:11.857

For some reasons it doesn't work with Button, but you can recreate button with Card composable and apply combinedClickable modifier to it.

ElevatedCard(
    modifier = modifier
        .fillMaxHeight()
        .padding(4.dp)
        .clip(RoundedCornerShape(20.dp))
        .combinedClickable(
            interactionSource = remember {
                MutableInteractionSource()
            },
            indication = rememberRipple(bounded = true),
            onClick = onClick,
            onLongClick = onLongClick)
) {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        content()
    }
}

score 1 · Answer 8 · answered Apr 11 '22 at 22:16

I tried @adneal answer and for some reason it wouldn't pick up the "onLongClick".

After some research I updated as follow to make it work :

@OptIn(ExperimentalMaterialApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class)
@Composable
fun ButtonWithLongPress(
    onClick: () -> Unit,
    onDoubleClick:()->Unit = {},
    onLongClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    val contentColor by colors.contentColor(enabled)
Surface(
    onClick = { },
    modifier = modifier
        .combinedClickable(
            interactionSource,
        rememberRipple(),
        true,
        null,
        Role.Button,
        null,
        onClick = { onClick() },
        onLongClick = { onLongClick() },
        onDoubleClick = {onDoubleClick()}),
    enabled = enabled,
    shape = shape,
    color = colors.backgroundColor(enabled).value,
    contentColor = contentColor.copy(alpha = 1f),
    border = border,
    elevation = elevation?.elevation(enabled, interactionSource)?.value ?: 0.dp,
    interactionSource = interactionSource,
) {
    CompositionLocalProvider(LocalContentAlpha provides contentColor.alpha) {
        ProvideTextStyle(
            value = MaterialTheme.typography.button
        ) {
            Row(
                Modifier
                    .defaultMinSize(
                        minWidth = ButtonDefaults.MinWidth,
                        minHeight = ButtonDefaults.MinHeight
                    )
                    .padding(contentPadding)
                    .combinedClickable(interactionSource,
                        null,
                        true,
                        null,
                        Role.Button,
                        null,
                        onClick = { onClick() },
                        onLongClick = { onLongClick() },
                        onDoubleClick = { onDoubleClick() }),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically,
                content = content
            )
        }
    }
}}

Now it works the way it should, and setting up a double-click is optional if necessary

score 0 · Answer 9 · answered May 08 '23 at 21:06

The way I've done it is making a button via a Canvas and with the modifiers give the canvas the LongClick functionality, keep in mind that a Click action is necessary, altough you can leave it empty. Hope this solution helps.

    @OptIn(ExperimentalFoundationApi::class)
    @Composable
    fun LongPressButton(runViewModel: RunActivityScreenViewModel, context: Context) {
        var actionState by remember { mutableStateOf(ActivityState.PLAY) }
        val buttonColorPlay = MaterialTheme.colors.primary
        val buttonColorStop = MaterialTheme.colors.secondaryVariant
        val shadow = Color.Black.copy(.5f)
        val stopIcon: ImageBitmap = ImageBitmap.imageResource(id = R.drawable.stop_icon)
        val playIcon: ImageBitmap = ImageBitmap.imageResource(id = R.drawable.play_icon)
        Canvas(
            modifier = Modifier
                .size(100.dp)
                .combinedClickable(
                    interactionSource = MutableInteractionSource(),
                    onClick = {
                       // Your Click Action
                    },
                    onLongClick = {
                       // Your Long Press Action
                    },
                    indication = rememberRipple(
                        bounded = false,
                        radius = 20.dp,
                        color = MaterialTheme.colors.onSurface
                    ),
                ),
        ) {
            drawCircle(
                color = shadow,
                radius = 100f,
                center = Offset(
                    center.x + 2f,
                    center.y + 2f
                )
            )
            drawCircle(
                color = buttonColorStop,
                radius = 100f
            )
            scale(scale = 2.5f) {
                drawImage(
                    image = stopIcon,
                    topLeft = Offset(
                        center.x - (stopIcon.width / 2),
                        center.y - (stopIcon.width / 2)
                    ),
                    alpha = 1f,
                )
            }
        }
    }

Button Long Press Listener in Android jetpack compose

9 Answers9

Linked