How to Set Padding & Margin in Android Jetpack Compose

Jetpack compose padding margin

Today, you are going to learn how to set padding and margin in Android Jetpack Compose.

Prerequisites:

We can set the padding using Modifier.padding().

Let’s create a text and set Yellow as the background color.

Text(
    text = "SemicolonSpace",
    modifier = Modifier.background(color = Color.Yellow)
)

It looks like this.

Modifier padding

Let’s add a padding of 16 dp.

Text(
    text = "SemicolonSpace",
    modifier = Modifier
        .background(color = Color.Yellow)
        .padding(16.dp)
)
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.

Text(
    text = "SemicolonSpace",
    modifier = Modifier
        .background(color = Color.Yellow)
        .padding(horizontal = 16.dp, vertical = 36.dp)
)
Horizontal Vertical Padding

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.

Text(
    text = "SemicolonSpace",
    modifier = Modifier
        .background(color = Color.Yellow)
        .padding(start = 8.dp, end = 32.dp, top = 24.dp, bottom = 56.dp)
)
Start End Top Bottom

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.

val paddingValues = PaddingValues(all = 16.dp)

Text(
    text = "SemicolonSpace",
    modifier = Modifier
        .background(color = Color.Yellow)
        .padding(paddingValues = paddingValues)
)
Padding 16 dp

Spacer:

It is used to add an empty space vertically or horizontally between the composables. We can define its size using Modifier.width(), Modifier.height() and Modifier.size().

Let’s create a Row() with 2 Text() composables and a Spacer(). We can add an empty space horizontally using Modifier.width().

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")
}
Empty Space Jetpack Compose

Modifier.height() sets the empty space vertically.

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")
}
Row Space

Modifier.size() adds the space both vertically and horizontally.

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")
}
Vertical Horizontal Space

Margin in Jetpack Compose:

There is no margin() in Jetpack Compose. If you call the padding() before any Modifier function, you get the margin effect.

Text(
    text = "SemicolonSpace",
    modifier = Modifier
        .padding(top = 32.dp) // margin
        .background(color = Color.Yellow)
)
Margin Jetpack Compose

Let’s set both padding and margin.

Text(
    text = "SemicolonSpace",
    modifier = Modifier
        .padding(top = 32.dp) // margin
        .background(color = Color.Yellow)
        .padding(top = 16.dp) // padding
)
Margin Padding Android

This is possible because the order of modifier functions matters.

How to Set Padding/Margin Between Child Components in Jetpack Compose?

To set the margin between child components, 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")
    }
}
Margin Between Child Components

Continue Exploring Jetpack Compose:

Leave a Comment