Search code examples
android-layoutandroid-jetpack-compose

Inner padding in jetpack compose


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.