Feeling really dumb. Can't get text to center inside of a row. Code inside the thread.

# compose

[Colton Idle]

Feeling really dumb. Can't get text to center inside of a row. Code inside the thread.

[Colton Idle]

Row() {
        Spacer(
            modifier = Modifier
                .height(500.dp)
                .aspectRatio(4 / 3f)
                .background(aColorValue)
        )
        Text(
            text = "one",
            Modifier
                .fillMaxHeight(),
            color = MyTheme.colors.one,
        )
}

[Colton Idle]

Using the debug option on my device called "show layout bounds" it looks like the height of the text doesn't actually meet the 500.dp of the spacer size that I expected so I think that's the root of the issue and why textAlign = TextAlign.CENTER isn't working (when I add it). In the snippet above I just am trying to get the height bounds of Text to match the spacer.

[Louis Pullen-Freilich [G]]

Do you actually want the text to be 500.dp high? Or you want the text to be centered vertically inside the 500.dp space? If the latter, you probably instead want:

Text(
    modifier = Modifier.fillMaxHeight().wrapContentHeight()
)

[Colton Idle]

@Louis Pullen-Freilich [G] I figured that I do actually want to text to have a 500dp height, so that I can use textAlign = TextAlign.CENTER

But all of this is very reminicent of the whole 2 gravity options in xml.

So I guess option 1:
Get Text height to be 500 (match the spacer height) and set text.align = Center

Option 2:
Don't modify the text height, but somehow align it vertically

[Kari Kähkönen]

I'm not sure what you want exactly, but the following should show the text after the spacer so that it is centered

Row(verticalAlignment = Alignment.CenterVertically) {
    Spacer(
        modifier = Modifier
            .height(500.dp)
            .aspectRatio(4 / 3f)
            .background(aColorValue)
    )
    Text(
        text = "one",
        color = MyTheme.colors.one,
    )
}

[Colton Idle]

@Louis Pullen-Freilich [G] that method did not work unfortunately.

[Colton Idle]

@Kari Kähkönen thanks that worked, but I actually don't want the entire row to be aligned cetered vertically, as I have another piece of text that comes next in the row and I want it to be placed at the top.

If anyone knows how to center just one piece of text in it's parent that would be awesome

[Louis Pullen-Freilich [G]]

Isn't textAlign only for horizontal alignment? I'm not sure how it relates to vertical alignment in your example, why do you need the text to still be 500.dp high?

[Kari Kähkönen]

To limit centering to the text only, this should work:

Row {
    Spacer(
        modifier = Modifier
            .height(500.dp)
            .aspectRatio(4 / 3f)
            .background(aColorValue)
    )
    Text(
        text = "one",
        color = MyTheme.colors.one,
        modifier = Modifier.align(Alignment.CenterVertically)
    )
}

[Kari Kähkönen]

The align for the modifier comes from RowScope so Android Studio probably doesn't currently show autocomplete for it. But it does exist.

[Colton Idle]

@Kari Kähkönen AHHH. THAT WORKED.

Android Studio doesn't autofill Modifier.align so I didn't think it would work. Just coding it anyway makes it work. NICE!