Alignment is an important aspect of designing a mobile app. In this Jetpack Compose tutorial, let’s learn how to center vertically, center horizontally, and center both ways.
We use Column and its parameter horizontalAlignment to make the children center horizontally to the parent.
@Composable
fun Example() {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text(text = "Center Alignment")
}
}The text will be centered horizontally as seen in the output.
You can align children to the center vertically using verticalAlignment parameter. See the code snippet given below.
@Composable
fun Example() {
Column(verticalArrangement = Arrangement.Center) {
Text(text = "Center Alignment")
}
}The Text will be center aligned vertically.
The next thing is to center align elements horizontally and vertically.
@Composable
fun Example() {
Column(horizontalAlignment = Alignment.CenterHorizontally,verticalArrangement = Arrangement.Center) {
Text(text = "Center Alignment")
}
}And following is the output.
I hope this tutorial is helpful for you.
