Jetpack Compose Spacer

1. Overview

In this article, we will learn about the Jetpack Compose Spacer in Android.

2. Jetpack Compose Spacer

You can use the Spacer component to represent an empty space vertically or horizontally between other layout components or wherever required. You can define its size using Modifier.width, Modifier.height and Modifier.size modifiers.

Note that you can use the weight modifier only with Column or Row scopes.

The Modifier.weight helps to divide the vertical or horizontal space remaining after measuring unweighted child elements and distribute the remaining elements according to their specified weight. Therefore, you can specify the size ratio of elements.

For example, if there are two Text elements inside the Row scope with weights of 1f and 2f, then they occupy the screen width in the ratio of 1:2.

This is similar to the android:layout_weight XML attribute.

The syntax of the Spacer composable is:

@Composable
@NonRestartableComposable
fun Spacer(modifier: Modifier?): Unit

2.1. Spacer for Jetpack compose column

You can use verticalArrangement parameter of the Column composable to add space evenly between the children of the Column. You can also check this article which explains adding spaces evenly between the children of Column composable.

However, if you want to add custom spacing, you can use the height / weight(1f) parameters of the Spacer.

For example, the following code places the Text elements vertically with 50.0dp space in between.

@Preview(showBackground = true)
@Composable
fun Greeting(name: String? = "") {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally) {
        Text("Lorem ipsum")
        Spacer(Modifier.height(50.0.dp))
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
    }
}

2.2. Spacer for Row spacing

You can use the width or weight(1f) functions of the Spacer to add custom space between the children of Row composable.

For example, the following code adds a Spacer with a width of 50dp in between the Text composable.

@Preview(showBackground = true)
@Composable
fun Greeting(name: String? = "") {
    Row(
        modifier = Modifier.fillMaxSize()) {
        Text("Lorem ipsum")
        Spacer(Modifier.width(50.0.dp))
        Text("Today")
    }
}

For example, the following code contains a Row scope with two Text composables and a Spacer.

@Preview(showBackground = true)
@Composable
fun Greeting(name: String? = "") {
    Row(
        modifier = Modifier.fillMaxSize()) {
        Text(modifier = Modifier.weight(2f, true), text = "Lorem ipsum")
        Spacer(Modifier.weight(1f))
        Text(modifier = Modifier.weight(2f, true), text = "Today")
    }
}

As you can see, the left Text, Spacer, and right Text occupy the screen width in the ratio of 2:1:2.

3. Conclusion

To sum up, we have learned about the Spacer composable which defines horizontal or vertical spaces based on the Modifiers.