How can I pass touch events to underlying components with Compose?

Question

I'm looking to create a debug feature. Here's a simplified representation:

@Composable
fun DebugLogOverlay(logs: List<String>){  
    LazyColumn(
        modifier = Modifier
            .background(
                color = Colors.White.copy(alpha = 0.3F)
            )
    ){
        items(logs){ log ->
            ListItem(
                text = { Text(log) }
            )
        }
    }  
}

The goal is to overlay but not interfere with the app. Is there a way to do this? I'm looking for something similar to Flutter's IgnorePointer, but with Compose? https://api.flutter.dev/flutter/widgets/IgnorePointer-class.html

Answer 1

You can use pointerInteropFilter to pass MotionEvents down when you return false in onTouchEvent. This should allow you to add an overlay without interfering with the underlying touch events.

Here's how to include it in your code:

// Opt in for experimental api is required as of version 1.5.4 of Compose UI
@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun DebugLogOverlay(logs: List<String>){  
    LazyColumn(
        modifier = Modifier
            .background(
                color = Colors.White.copy(alpha = 0.3F)
            )
            // --> Add pointerInteropFilter <--
            .pointerInteropFilter {
                // Return false here to pass down the MotionEvent
                return@pointerInteropFilter false
            },
    ){
        items(logs){ log ->
            ListItem(
                text = { Text(log) }
            )
        }
    }  
}