JetPack Compose - remove extra padding from view

user_2339405 0
Viewed 2546

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?

android-jetpack-compose kotlin android
2 Answers

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

enter image description here

user_20165620

If you wish to control the exact distance, it is viable to implement a Layout, giving you complete control over the offset (yes you could also just use the offset Modifier, but I find this more promising.

Layout(
 content = {
  IconButton {
        Icon(
            painter = painterResource(R.drawable.im1)
        )
    },
    IconButton {
        Icon(
            painter = painterResource(R.drawable.im2)
        )
    }
 }
){ measurables, constraints ->
 val icon1 = measurables[0].measure(constraints)
 val icon2 = measurables[1].measure(constraints)
 
 layout(constraints.maxWidth, constraints.maxHeight){ //Change these to suit your requirements
 //Use place(x, y) to specify exact co-ordinates within the container
 icon1.place(0, 0)
 icon2.place(icon1.width, 0) //Places Directly where icon1 ends

/*If padding still appears, you can subtract some function from the second icon's starting point to make it even closer than the edge of iicon1
*/
}

This should be it!

user_158808650
Related