JetPack Compose - remove extra padding from view

Question

I have a few Icons in a row

    Row {
    IconButton {
        Icon(
            painter = painterResource(R.drawable.im1)
        )
    },
    IconButton {
        Icon(
            painter = painterResource(R.drawable.im2)
        )
    }
}

But when it's displayed the distance between 2 icons in the row is bigger then I expect. I feel like there is 32dp spacer between them. How can I decrease the distance between 2 icons inside a row?

Answer 1

The space between the 2 icons it is not a padding and depends by the default size of the IconButton.
It is due to accessibility touch targets and allows the correct minimum touch target size.
You can change it disabling the LocalMinimumTouchTargetEnforcement and applying a Modifier.size(24.dp) to the IconButton:

CompositionLocalProvider(LocalMinimumTouchTargetEnforcement provides false){
    Row {
        IconButton(modifier = Modifier.size(24.dp),
            onClick = {}) {
            Icon(
                painter = painterResource(R.drawable.ic_add_24px),""
            )
        }
        IconButton(modifier = Modifier.size(24.dp),
            onClick = {}) {
            Icon(
                painter = painterResource(R.drawable.ic_add_24px),""
            )
        }
    }
}

As alternative you can use an Icon with the Modifier.clickable:

Row {
    Icon(
            painter = painterResource(R.drawable.ic_add_24px),"",
        modifier = Modifier.clickable (onClick = {} )
        )
    Icon(
            painter = painterResource(R.drawable.ic_add_24px),"",
        modifier = Modifier.clickable (onClick = {} )
        )
}

Answer 2

Both LocalMinimumTouchTargetEnforcement and LocalMinimumInteractiveComponentEnforcement are deprecated, you should use LocalMinimumInteractiveComponentSize and set its value to 0.dp like this:

CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides 0.dp) {
    // Component
}