Text in Box Composable aligns left despite Alignment.Center

Question

I want the AnnotatedString in the Box Composable below to display in the middle of the screen and centered, but the text is aligned to the left, although it displays in the middle of the screen. How can I fix this?

Box(
    modifier = Modifier.fillMaxSize(),
) {
    val emptyMessage = AnnotatedString(
        text = "You don't have any items in this list. Click the ",
        spanStyle = SpanStyle(Color.Gray)
    ).plus(
        AnnotatedString(
            text = "+ ",
            spanStyle = SpanStyle(Color.Gray, fontSize = 18.sp),
        )
    ).plus(
        AnnotatedString(
            text = "button below to add an item.",
            spanStyle = SpanStyle(Color.Gray)
        )
    )

    Text(
        modifier = Modifier.align(Alignment.Center),
        text = emptyMessage,
    )
}

Raj Narayanan · Accepted Answer · 2023-01-11T13:34:59.520

The Following property has to be used:

TextAlign = TextAlign.Center

Box(
    modifier = Modifier.fillMaxSize(),
) {
    val emptyMessage = AnnotatedString(
        text = "You don't have any items in this list. Click the ",
        spanStyle = SpanStyle(Color.Gray, fontSize = 18.sp)
    ).plus(
        AnnotatedString(
            text = "+ ",
            spanStyle = SpanStyle(Color.Gray, fontSize = 23.sp),
        )
    ).plus(
        AnnotatedString(
            text = "button to add an item.",
            spanStyle = SpanStyle(Color.Gray, fontSize = 18.sp)
        )
    )

    Text(
        modifier = Modifier.align(Alignment.Center).padding(10.dp),
        textAlign = TextAlign.Center,
        text = emptyMessage,
    )
}

Text in Box Composable aligns left despite Alignment.Center

1 Answers1