Text is not centered vertically with textAlign = TextAlign.Center when using minLines, only horizontally

Question

Text(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.Black),
    minLines = 3,
    textAlign = TextAlign.Center,
    text = "Not centered vertically"
)

How can I center text by vertically and horizontally of its container when current lines count is less then minimum lines?

Answer 1

The textAlign attributes defines only how to align text horizontally.

You can use the TextMeasurer to measure a text and check if the width > width of the text. In this case the text will occupy more than 1 line in the Text composable

In this example I am using the screen width (since you are using fillMaxWidth()).

    val textMeasurer = rememberTextMeasurer()
    val textLayoutResult: TextLayoutResult =
        textMeasurer.measure(
            text = AnnotatedString(text),
            style = LocalTextStyle.current
        )
    val widthText = textLayoutResult.size.width

    val density = LocalDensity.current
    val configuration = LocalConfiguration.current
    val screenWidth = density.run { configuration.screenWidthDp.dp.toPx()}

    Text(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.Black),
        minLines = 3,
        textAlign = TextAlign.Center,
        text = if (widthText < screenWidth)  "\n" + text else text,
        color = White,
    )

Answer 2

textAlign is only responsible for horizontal alignment, usually to control vertical alignment you can use a container.

I like to use a technique where you add an invisible view that gives the layout some size guides, and then place the actual view using the parent alignment.

In this case, the blank text with minLines will take the necessary height, and the actual text will be centered in the box.

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.Black)
) {
    Text("", minLines = 3)
    Text(
        "Centered vertically",
        textAlign = TextAlign.Center,
        color = Color.White,
    )
}