Member-only story
Margin vs Padding — Jetpack Compose
Before going ahead, let’s understand the difference between margin and padding
Margin: Adds space outside a view.
Padding: Adds space inside a view.
In Jetpack Compose, Margin and Padding help to control spacing around UI elements or composables.
Padding is directly supported by modifiers, but margin is not supported directly by modifiers. For that, we have to follow a different approach.
Let’s understand padding first.
Padding in Jetpack Compose
It adds space inside a composable, between its view and its boundary.
Modifiers:Modifier.padding()
All Sides:
Text(
text = "Padding Demo",
modifier = Modifier
.background(Color.Blue)
.padding(30.dp), //Space inside from all side in the Text composable
color = Color.White,
fontSize = 14.sp,
textAlign = TextAlign.Center,
)
Individual Side:
Text(
text = "Padding Demo",
modifier = Modifier
.background(Color.Blue)
.padding(top = 30.dp, bottom =…