Search code examples
androidandroid-jetpack-compose

Android Compose - Align center one composable only in Column?


In Compose, you can align center all composables in a Column widget by doing the following:

Column(
        modifier = Modifier.fillMaxSize(),
        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)
        )
}

However, what if I only want to center the first composable?


Solution

  • I think this should work for you

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

    Sample Render