Skip to content
🤔 Documentation issue? Report or edit

Column

A Column will show each child below the previous children. It’s similar to a LinearLayout with vertical orientation.

@Composable
fun ColumnExample() {
    Column {
        Text("Hello World!")
        Text("Hello World!2")
    }
}

Content Alignment

Horizontal

You can use horizontalAlignment to set the horizontal alignment of the content in the Column

fun ColumnCenterHorizontal() {
    Column(horizontalAlignment = Alignment.Start, modifier = Modifier.width(200.dp)) {
        Text("Hello World!")
        Text("Hello World!2")
    }

}

fun ColumnCenterHorizontal() {
    Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.width(200.dp)) {
        Text("Hello World!")
        Text("Hello World!2")
    }

}

fun ColumnCenterHorizontal() {
    Column(horizontalAlignment = Alignment.End, modifier = Modifier.width(200.dp)) {
        Text("Hello World!")
        Text("Hello World!2")
    }

}

You can also use the align modifier:

fun ColumnCenterHorizontal() {
    Column(modifier = Modifier.width(200.dp)) {
            Text("Hello World!")
            Text("Hello World!2", modifier = Modifier.align(Alignment.Start))
        }
}

fun ColumnCenterHorizontal() {
     Column(modifier = Modifier.width(200.dp)) {
            Text("Hello World!")
            Text("Hello World!2",modifier = Modifier.align(Alignment.CenterHorizontally))
        }
}

fun ColumnCenterHorizontal() {
    Column(modifier = Modifier.width(200.dp)) {
            Text("Hello World!")
            Text("Hello World!2",modifier = Modifier.align(Alignment.End))
        }

}

Vertical

You can use verticalArrangement to set the vertical alignment of the content in the Column

fun ColumnVerticalTop() {
    Column(verticalArrangement = Arrangement.Top, modifier = Modifier.height(100.dp).background(Color.LightGray)) {
            Text("Hello World!")
            Text("Hello World!2")
        }
}

fun ColumnVerticalCenter() {
    Column(verticalArrangement = Arrangement.Center, modifier = Modifier.height(100.dp).background(Color.LightGray)) {
            Text("Hello World!")
            Text("Hello World!2")
        }
}

fun ColumnVerticalBottom() {
    Column(verticalArrangement = Arrangement.Bottom, modifier = Modifier.height(100.dp).background(Color.LightGray)) {
            Text("Hello World!")
            Text("Hello World!2")
        }
}

See also:


Last update: September 2, 2021
Back to top