How to Center Align UI Elements in Android Jetpack Compose

By Mohammed Rashid •  November 12th, 2022 • 

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.

Mohammed Rashid

Keep Reading