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 Items in Jetpack Compose?

To set the padding/margin between items in a layout, 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

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():

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            YourProjectNameTheme {
                Surface(
                    modifier = Modifier
                        .fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .background(color = Color.Yellow)
                    ) {
                    }
                }
            }
        }
    }
}

Output:

negative padding offset

Let’s add offset to the Column() layout.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            YourProjectNameTheme {
                Surface(
                    modifier = Modifier
                        .fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Column(
                        modifier = Modifier
                            .offset(x = (-100).dp) // moves the column to the left
                            .fillMaxSize()
                            .background(color = Color.Yellow)
                    ) {
                    }
                }
            }
        }
    }
}

Output:

negative padding offset 2

This is all about padding and margin in Jetpack Compose. I hope you have learned something new. If you have any doubts, comment below.

Continue Exploring Jetpack Compose:

Leave a Comment