Hi. It is possible to do Card with centered Text (...

# compose

[Tomáš Procházka]

Hi.
It is possible to do Card with centered Text (or any other element) inside without using Box?
Card using Column inside, but for some reason not propagating contentAlignment 😞 Why?
Card should be just Box with custom border design.
It is possible to use Modifier.align(Alignment.CenterHorizontally)
for Text without Box, but for some reason is it is not possible to align it vertically with that way, only horizontally.

[David]

Card using Column inside, but for some reason not propagating contentAlignment 😞 Why?

As your said ElevatedCard hosts a Column (which you also can see by the ColumnScope) So contentAlignment will be referred to the horizontal alignment of things inside your column. It wouldn't make sense to center vertically in a column.

textAlign doesn't align a text vertically either, see this code. It sort of makes sense if you think of that a text can be of multiple lines. It is not a layout, so it is sort of out of it's responsibility.

Sounds like what you are asking for is a ElevatedCard that does not provide a Column out of the box. However, from my knowledge that doesn't exist.

This example shows it a bit more clearly:

@Preview
@Composable
fun test() {
    ElevatedCard(modifier = Modifier.size(100.dp)) {
        Text(
            modifier =
                Modifier.align(Alignment.CenterHorizontally).background(Color.Cyan).fillMaxHeight(),
            textAlign = TextAlign.Center,
            maxLines = 1,
            text = "center",
        )
    }
}

Result would look like this:

[Stylianos Gakis]

https://issuetracker.google.com/issues/274389472

What I've done is just ditch that horrible API, made my own Card composable which does not force you to be inside a Column which comes with these problems.

[Tomáš Procházka]

But inside of Column is possible to align to the center vertically, like that

[Tomáš Procházka]

Maybe the best way is don't use fixed height of the card, but simply put vertical padding to the text, like this

[David]

The latter way is generally how you want design and build components. Fixed height will complicate things when you adjust different accessibility settings, such as font size. So if the design had a component of, say 80.dp height, you shouldn't set it to be fixed at 80.dp but make sure to have the right internal padding etc so the components end up being the same size in default settings.