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

Issue

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.

  • Left
  • Right
  • Center
  • Justify
  • Start
  • End

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",
    )
}

Answered By – Gabriele Mariotti

Answer Checked By – Clifford M. (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published