Jetpack Compose Column spacing

1. Overview

In this article, we will learn to add spacing in between the Column child items of the Jetpack Compose.

2. Jetpack compose column

A Column is a layout composable that places its children in a vertical sequence whereas the Row places the items horizontally on the screen. Both Column and Row support configuring the alignment of the elements they contain.

@Composable
fun sampleColumn() {
    Column {
        Text("Lorem ipsum")
        Text("Vertical sequence")
    }
}

Now let’s learn to adjust the vertical spacing between the child items of the Column.

3. Jetpack compose column vertical spacing

To define the horizontal alignment of the Column layout inside a parent layout, see this article. You can use the parameter verticalArrangement to specify the vertical spacing between the layout’s children of the Column. It supports the following spacing values:

1. Arrangement.SpaceAround
2. Arrangement.SpaceBetween
3. Arrangement.SpaceEvenly

This link visually shows how each of these values would behave.

3.1. Arrangement SpaceBetween

The Arrangement.SpaceBetween adds space between Column children evenly with no free space before the first child or after the last child.

@Preview(showBackground = true)
@Composable
fun Greeting(name: String? = "") {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceBetween) {
        Text("Lorem ipsum")
        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.")
    }
}

3.2. Arrangement.SpaceAround

The Arrangement.SpaceAround adds space between Column children evenly with a free space before the first child or after the last child. However, the space before the first and after the last child would be half the amount of space existing between two consecutive children.

@Preview(showBackground = true)
@Composable
fun Greeting(name: String? = "") {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceAround) {
        Text("Lorem ipsum")
        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.")
    }
}

3.3. Arrangement.SpaceEvenly

The Arrangement.SpaceEvenly adds space between Column children evenly with a free space before the first child or after the last child. The space before the first and after the last child would be the same as the amount of space existing between two consecutive children.

@Preview(showBackground = true)
@Composable
fun Greeting(name: String? = "") {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceEvenly) {
        Text("Lorem ipsum")
        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.")
    }
}

3.4. Spacer for column spacing

The above arrangements would add even space between the children of the Column. However, if you want to add custom spacing, you can use the height or weight(1f) functions of the Spacer.

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

4. Conclusion

To sum up, we have learned to add spacing between the Column items of the Jetpack compose.