How to Set Padding & Margin in Android Jetpack Compose

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

Prerequisites:

What is Modifier in Jetpack Compose

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.

Let’s add a padding of 16 dp.

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.

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.

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.

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

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

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

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

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
)

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

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:

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)
                    ) {
                    }
                }
            }
        }
    }
}