4
4
.
.
2
2
.
.
1
1
C
C
o
o
l
l
u
u
m
m
n
n
I
I
n
n
f
f
o
o
Column is Container View which organizes his child Views vertically like Column (on top of each other).
If all the Views don't fit on the screen you should use ScrollableColumn instead so that you could scroll vertically.
Syntax
import androidx.compose.foundation.layout.Column
Column {
Text("First Line")
Text("Second Line")
}
E
E
x
x
a
a
m
m
p
p
l
l
e
e
In this example we create Column View with three Text Views on top of each other.
Children are horizontally children to: Start, Center, End.
MainActivity.kt
package com.example.testcompose
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.unit.dp
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally //CenterHorizontally, Start, End
) {
Text("Start" , Modifier.border(2.dp, Color.Red).padding(10.dp).align(Alignment.Start))
Text("Center", Modifier.border(2.dp, Color.Red).padding(10.dp)) //CenterHorizontally
Text("End" , Modifier.border(2.dp, Color.Red).padding(10.dp).align(Alignment.End))
}
}
}
}
Output
