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

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

}


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

}


@Composable
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:

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


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


@Composable
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

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


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


@Composable
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 7, 2022