androidandroid-jetpack-composeandroid-jetpack-compose-layoutandroid-compose-layout

How to align Text to Top, Bottom and Center Vertically in Jetpack Compose?


How can I align the text using Text composable function vertically. Is there a way to do it without having to add another extra view to contain the Text.

The textAlign parameter of Text only has the following options:

TextAlign.

I have tried using textAlign = TextAlign.Center but it only centers it horizontally. How can I center it vertically without wrapping it in another view?

Text(
    text = "Text",
    modifier = Modifier.size(100.dp),
    textAlign = TextAlign.Center
)

Result:

result

What I am trying to achieve:

what I am trying to achieve


Solution

  • You have to use a parent container and align the composable inside it.

    For example a Box:

    Box( 
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Center
    ) {
        Text(
            text = "Text",
        )
    }
    

    or a Column:

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Text",
        )
    }