Jetpack Compose - Column - Gravity center

Question

I'm creating a layout with Jetpack Compose and there is a column. I would like center items inside this column:

 Column(modifier = ExpandedWidth) {
        Text(text = item.title)
        Text(text = item.description)
 }

Solution 1

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)
        )
}

If you want only to center horizontally just use:

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

Solution 2

Use this

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

Solution 3

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

Solution 4

You have the option to apply gravity on the individual items as follows then it will center the items.

Column(modifier = ExpandedWidth) {
       Text(modifier = Gravity.Center, text = item.title)
       Text(modifier = Gravity.Center, text = item.description)
}

Solution 5

I don't like it too much, but this is what it worked to me:

Column(modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center) {
                //Your composable elements
            }

Compose 1.0.0-beta07

View more solutions