In this article, we’ll learn how to set padding and margin in Jetpack Compose.
Prerequisites:
For this article, create an empty Jetpack Compose project and open MainActivity.kt. Create a MyUI() composable and call it from the onCreate() method. We’ll write our code in it.
MainActivity for Material 3 Jetpack Compose:
// add the following packages
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
YourProjectNameTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
MyUI()
}
}
}
}
}
}
@Composable
fun MyUI() {
}For the Material 2 version:
// add the following packages
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
YourProjectNameTheme(darkTheme = false) {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
MyUI()
}
}
}
}
}
}
@Composable
fun MyUI() {
}In Jetpack Compose, we can set the padding using the padding() modifier.
Let’s create a text and set Yellow as the background color.
@Composable
fun MyUI() {
Text(
text = "SemicolonSpace",
modifier = Modifier.background(color = Color.Yellow)
)
}It looks like this.
Let’s add a padding of 16 dp.
@Composable
fun MyUI() {
Text(
text = "SemicolonSpace",
modifier = Modifier
.background(color = Color.Yellow)
.padding(16.dp)
)
}
The padding() function has multiple formats. Let us look at them one by one.
1. Modifier.padding(all: Dp)
Using it, we can set the padding in all directions. This is what we have done in the above example. We have set 16 dp padding on the top, bottom, left, and right of the text.
2. Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp)
The horizontal parameter represents the left and right and the vertical parameter represents the top and bottom.
@Composable
fun MyUI() {
Text(
text = "SemicolonSpace",
modifier = Modifier
.background(color = Color.Yellow)
.padding(horizontal = 16.dp, vertical = 36.dp)
)
}
3. Modifier.padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp)
We can set the padding along each edge of the content individually. Here start means left and end means right.
@Composable
fun MyUI() {
Text(
text = "SemicolonSpace",
modifier = Modifier
.background(color = Color.Yellow)
.padding(start = 8.dp, end = 32.dp, top = 24.dp, bottom = 56.dp)
)
}
4. Modifier.padding(paddingValues: PaddingValues):
It accepts the object of type PaddingValues. We can get this object by calling the PaddingValues() function. The function has 3 formats similar to padding().
- fun PaddingValues(all: Dp): PaddingValues
- fun PaddingValues(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): PaddingValues
- fun PaddingValues(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): PaddingValues
Let’s create a padding of 16 dp along all the edges.
@Composable
fun MyUI() {
val paddingValues = PaddingValues(all = 16.dp)
Text(
text = "SemicolonSpace",
modifier = Modifier
.background(color = Color.Yellow)
.padding(paddingValues = paddingValues)
)
}Spacer:
It is used to add an empty space vertically or horizontally between the composables. We can define its size using width(), height() and size() modifiers.
Let’s create a Row() with 2 Text() composables and a Spacer(). We can add an empty space horizontally using Modifier.width().
@Composable
fun MyUI() {
Row(
modifier = Modifier
.border(width = 3.dp, color = Color.Yellow)
) {
Text(text = "Text 1")
Spacer(modifier = Modifier.width(width = 100.dp))
Text(text = "Text 2")
}
}
Modifier.height() sets the empty space vertically.
@Composable
fun MyUI() {
Row(
modifier = Modifier
.border(width = 3.dp, color = Color.Yellow)
) {
Text(text = "Text 1")
Spacer(modifier = Modifier.height(height = 100.dp))
Text(text = "Text 2")
}
}
Modifier.size() adds the space both vertically and horizontally.
@Composable
fun MyUI() {
Row(
modifier = Modifier
.border(width = 3.dp, color = Color.Yellow)
) {
Text(text = "Text 1")
Spacer(modifier = Modifier.size(size = 100.dp))
Text(text = "Text 2")
}
}
Margin in Jetpack Compose:
There is no margin() method in Jetpack Compose. If you call the padding() before any Modifier function, you get the margin effect.
@Composable
fun MyUI() {
Text(
text = "Text 1",
modifier = Modifier
.background(color = Color.Yellow)
)
Text(
text = "Text 2",
modifier = Modifier
.padding(top = 32.dp) // margin
.background(color = Color.Yellow)
)
}
Let’s set both padding and margin.
@Composable
fun MyUI() {
Text(
text = "Text 1",
modifier = Modifier
.background(color = Color.Yellow)
)
Text(
text = "Text 2",
modifier = Modifier
.padding(top = 32.dp) // margin
.background(color = Color.Yellow)
.padding(top = 16.dp) // padding
)
}
This is possible because the order of modifier functions matters.
How to Set Padding/Margin Between Items in Jetpack Compose?
We can use the Arrangement object’s spacedBy() method.
fun spacedBy(space: Dp, alignment: Alignment.Vertical)space – The space between the children.
alignment – The alignment of the children inside the parent.
Example:
@Composable
fun MyUI() {
val marginBetweenChildren = 36.dp
Column(
modifier = Modifier
.border(width = 3.dp, color = Color.Yellow, shape = RectangleShape)
.padding(all = 4.dp), // inside padding
verticalArrangement = Arrangement.spacedBy(
space = marginBetweenChildren,
alignment = Alignment.CenterVertically
)
) {
Text(text = "Child 1")
Text(text = "Child 2")
Text(text = "Child 3")
Text(text = "Child 4")
}
}
Negative Padding in Jetpack Compose:
The padding() function doesn’t accept negative values. We can use offset() method as an alternative.
fun Modifier.offset(x: Dp = 0.dp, y: Dp = 0.dp)Here, x and y are offsets. They accept both positive and non-positive values. Positive x moves the content to the right, and Negative x moves it to the left. Similarly, positive y moves the content to the bottom, and negative y moves it to the top.
Example:
Without offset():
@Composable
fun MyUI() {
Column(
modifier = Modifier
.fillMaxSize()
.background(color = Color.Yellow)
) {
}
}Output:
With offset():
@Composable
fun MyUI() {
Column(
modifier = Modifier
.offset(x = (-100).dp) // moves the column to the left
.fillMaxSize()
.background(color = Color.Yellow)
) {
}
}Output:
Related: Row, Column, and Box Layouts
This is all about padding and margin in Jetpack Compose. I hope you have learned something new. If you have any doubts, comment below.
Related Articles:
It is always underdog articles like this that keep saving my life and teaching me the most essential things. Keep up the good work