[FIXED] JetPack Compose - remove extra padding from view

Issue

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?

Solution

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 = {} )
        )
}

Answered By - Gabriele Mariotti
Answer Checked By - David Marino (JavaFixing Volunteer)