Jetpack Compose - Column - Gravity center

Use this

   Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    )

You can use these parameters:

  • horizontalAlignment = the horizontal gravity of the layout's children.
  • verticalArrangement= the vertical arrangement of the layout's children

Something like:

Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
) {
        Text(
                text = "First item",
                modifier = Modifier.padding(16.dp)
        )
        Text(
                text = "Second item",
                modifier = Modifier.padding(16.dp)
        )
        Text(
                text = "Third item",
                modifier = Modifier.padding(16.dp)
        )
}

enter image description here

If you want only to center horizontally just use:

Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
) {
    Column (  ) { ... }

enter image description here


You can use

Text(
  text = item.title,
  textAlign = TextAlign.Center,
  modifier = Modifier.align(alignment = Alignment.CenterHorizontally)
)
  • textAlign is for aligning text inside the box.
  • Modifier.align() is for aligning text box inside column