androidandroid-jetpack-compose

How to prevent Jetpack Compose from increasing the touch target size?


The official docs say, "When the size of a clickable composable is smaller than the minimum touch target size, Compose still increases the touch target size," and give an example.

@Composable
private fun SmallBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .size(1.dp)
        )
    }
}

This composable triggers the state change by clicking the 48dp around the box's center. Disabling LocalMinimumInteractiveComponentEnforcement doesn't have any effect.

How can I prevent this behavior so that the only way to toggle the state is to click the center box? The reason behind this design is understandable, but I'd like to explore the possibility of Jetpack Compose.


Solution

    1. Copy androidx.compose.ui.platform.AndroidViewConfiguration into the project.

    2. Override the method.

      override val minimumTouchTargetSize: DpSize = DpSize(0.dp, 0.dp)

    3. Provide a local provider.

       CompositionLocalProvider(
           LocalViewConfiguration provides CustomViewConfiguration(android.view.ViewConfiguration.get(this))
       ) {
           SmallBox()
       }