Inner padding in jetpack compose

Issue

Jetpack compose has a padding modifier that is actually analogous to the margin attribute in other UI toolkits (it adds space around the target). Is there a way to add inner padding to a component in compose without wrapping it with a Box/Surface?

Solution

Modifier.padding() in Jetpack Compose acts as padding or margin depending on order.

Modifier.padding(10.dp).size(200.dp) adds space before setting size you have a Composable with 200.dp size

Modifier.size(200.dp).padding(10.dp) adds padding which you have 180.dp width and height after setting 10.dp padding on each side.

You can try this with Modifier.background, Modifier.border, Modifier.clickble{} to see how order changes area with color, border or which user can click.

You can also refer codelab's documentation about Modifiers to see how to apply padding.

Answered By - Thracian