Search code examples
androidkotlinandroid-jetpack-composeandroid-jetpackandroid-jetpack-compose-layout

Jetpack Compose - Column - Gravity center


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

  • You can use these parameters:

    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