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

Question

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:

What I am trying to achieve:

Post your code and an image of what you are trying to achieve. — Gabriele Mariotti, Aug 30 '21 at 15:53
Philip Dukhov, ah okay thank you, so my only choice now is to wrap it in another view, for example a ```Box``` — danartillaga, Aug 31 '21 at 01:00

score 16 · Accepted Answer · answered Aug 31 '21 at 11:38

You have to use a parent container.

For example:

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

or:

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

evaristokbza · Answer 2 · 2021-08-30T17:24:48.650

It is difficult to give an exact answer without seeing your code, but I would say you need to use container's Alignment.CenterVertically instead of TextAlign

Something like:

Row {
    Text(
        text = "Text",
        modifier = Modifier.align(alignment = Alignment.CenterVertically)
    )

    Image(
        ...
    )
}

or:

Column(
    modifier = Modifier
        .align(Alignment.CenterVertically)
) {
    Text(text = "Text")
    Text(text = "Text 2")
}

Thracian · Answer 3 · 2021-08-30T17:38:18.540

3

I asked the same question here which is done with android:gravity param using views, as answered by PhilipDukhov it's not possible only with Text, you need to have another container, preferably Box to align Text component inside.

edited Aug 30 '21 at 17:38

answered Aug 30 '21 at 17:32

Thracian

13,723
7
65
116

score 1 · Answer 4 · answered Jan 04 '22 at 15:32

1

first use .wrapContentHeight() in modifier, then you can use align(CenterVertically) param to center the text.

answered Jan 04 '22 at 15:32

The MJ

263
3
15

score 0 · Answer 5 · answered May 05 '22 at 11:04

Create a simple composable function to show anything in center:

@Composable
fun Center(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {
    Box(
        modifier = modifier,
        contentAlignment = Alignment.Center
    ) {
        content()
    }
}

Call it from any other function:

@Composable
fun CenterAlignedText() {
    Center(Modifier.fillMaxSize()) {
        Text("Hello World!")
    }
}

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

5 Answers5

Related