android-jetpack-composeandroid-gesture

How to exclude certain screen edge regions from system's back gesture in Jetpack Compose?


I have a range slider in my compose app that stretches edge to edge horizontally but accessing the thumbs near the edges triggers the system back navigation gesture. How can I disable the system back gesture only for the range slider's thumb region on the edges?

I could find solutions like below when using view but none for compose.

https://developer.android.com/develop/ui/views/touch-and-input/gestures/gesturenav#conflicting-gestures

https://medium.com/androiddevelopers/gesture-navigation-handling-gesture-conflicts-8ee9c2665c69

Is this not available for Jetpack Compose yet? Or am I missing something?


Solution

  • You can use Modifier.systemGestureExclusion() to exclude a layout's rectangle from system gestures. Docs

    There is also a version that will pass you in the measured rect of the parent layout. You could do something like

    Box(
       modifier = Modifier.systemGestureExclusion { layoutCoords ->
          Rect(x = 0, y = 0, width = 10.dp, height = layoutCoords.size.height)
       }
    ) { ... }
    

    to exclude the left 10pts of a Box.