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.
Copy androidx.compose.ui.platform.AndroidViewConfiguration
into the project.
Override the method.
override val minimumTouchTargetSize: DpSize = DpSize(0.dp, 0.dp)
Provide a local provider.
CompositionLocalProvider(
LocalViewConfiguration provides CustomViewConfiguration(android.view.ViewConfiguration.get(this))
) {
SmallBox()
}