https://kotlinlang.org logo
#compose
Title
# compose
s

Sam

10/09/2020, 7:25 AM
I know this has been discussed since
alpha04
came out, but I searched every answer here along with
compose-samples
. How do we horizontally center all children in a
Column
? This doesn’t compile:
Copy code
Column(Modifier.align(Alignment.Horizontal)) { ... }
And this compiles but doesn’t do the job:
Copy code
Column(Modifier.align(Alignment.CenterHorizontally)) { ... }
I’ve resorted to putting
Modifier.align(Alignment.CenterHorizontally)
on all the children within the Column, but I’m betting that’s not the intended solution.
a

Afzal Najam

10/09/2020, 7:31 AM
Are you sure that the parent of this Column is taking up all the space? This works for me, unless I'm missing something
Copy code
Column(Modifier.fillMaxSize().then(Modifier.padding(8.dp))) {
        Column(Modifier.align(Alignment.CenterHorizontally)) {
            Text(text = "hello")

            Column {
                Text(text = "World")
            }
        }
    }
s

Sam

10/09/2020, 7:35 AM
Yep I’m sure, because I have
Text("or")
that is all the way to the left, and if I give that text
Alignment.CenterHorizontally
it will go to the center. What are the rules of
Center
vs
CenterHorizontally
? I used to think
Center
was used on the container to govern the children, but now I don’t know what to think..
a

Afzal Najam

10/09/2020, 7:42 AM
Hmm, I think you might be looking for the
horizontalAlignment
argument actually, instead of the align Modifier. That's the one that deals with children.
verticalArrangement
for the vertical children stuff too. Try this:
Copy code
Column(
    modifier = Modifier.fillMaxSize().then(Modifier.padding(8.dp)), 
    horizontalAlignment = Alignment.CenterHorizontally) {
    Text(text = Screen.Profile.title)

    Column {
        Text(text = Screen.Profile.title)
    }
}
👍 3
s

Sam

10/09/2020, 7:49 AM
That worked! Thanks @Afzal Najam
👍 1
3 Views