CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
Lucas Sousa
Lucas Sousa

Reputation: 352

How to handle multiple touch events in same activity on Jetpack Compose?

I'm trying to set some distincts touch interactions in the same screen in a jetpack compose project. However, setting a pointerFilter modifier to the main screen container automatically overrides any other clickable composable inside it. See the code below for a example:

    setContent {
        val context = LocalContext.current //only to be used in toasts
        Box(
            modifier = Modifier
                .background(Color.Gray)
                .fillMaxSize()
                .pointerInteropFilter {
                    if (it.action == MotionEvent.ACTION_UP) {
                        Toast
                            .makeText(context, "ENTIRE SCREEN RELEASED!", Toast.LENGTH_SHORT)
                            .show()
                    }
                    true
                }
        ) {
            Button(onClick = {
                Toast.makeText(context, "BUTTON CLICKED!", Toast.LENGTH_SHORT).show()
            }) {
                Text(text = "BUTTON")
            }
        }
    }

Doing this basically make that any clickable composable doesn't work, such the example Button. Also, note that I'm considering the Box as my "screen", once I set it to fill max size (is this the best way to handle clicks for the screen in jetpack compose?).

Then, how to make even entire screen (Box?) and its children clickable and handle its events?

Upvotes: 0

Views: 2818

Answers (1)

Lucas Sousa
Lucas Sousa

Reputation: 352

Special thanks too @Rafsanjani for his insight of using the Modifier.pointerInput{}.

To achieve a solution to handle events to multiple composables I just added the modifers like as follows:

setContent {
    val context = LocalContext.current //only to be used in toasts
    Box(
        modifier = Modifier
            .background(Color.Gray)
            .fillMaxSize()
            .pointerInput(key1 = "someStringKey?") {
                detectTapGestures(onPress = {
                    if (tryAwaitRelease()) {
                        Toast.makeText(context, "MAIN SCREEN RELEASED!", Toast.LENGTH_SHORT).show()
                    }
                })
            }
    ) {
        Button(onClick = {
            Toast.makeText(context, "BUTTON CLICKED!", Toast.LENGTH_SHORT).show()
        }) {
            Text(text = "BUTTON")
        }
    }
}

This basically handles different events for the Box (the composable that fills max size) and a button.

Upvotes: 0

Related Questions