Android compose Text gravity

1. Overview

In this article, we will learn about aligning the text in Android Jetpack Compose and the options available to set the gravity. In XML, you had the attribute android:gravity to align the text.

2. Android Jetpack Compose Text

A Text is always the core for any UI. In Jetpack compose, you don’t need to overwrite properties and methods or extend big classes to have a specific design. Jetpack handles most of the complexities for you.

The Jetpack compose provides the following composable for displaying Text:

1. BasicText (shortened form with basic functionalities)
2. BasicTextField (shortened form with basic functionalities)
3. Text (follows Material design guidelines)
4. TextField (follows Material design guidelines)

For example, you can display the test using the Text composable as below:

@Composable
fun HelloWorldText() {
  Text("Hello World")
}

3. Jetpack Compose Text default alignment

By default, Text will select the natural text alignment depending on its content:

• Left edge of the Text container for left-to-right alphabets such as Latin, Cyrillic, or Hangul
• Right edge of the Text container for right-to-left alphabets such as Arabic or Hebrew

3.1. Text gravity

The textAlign parameter allows setting the alignment of the text within a Text composable surface area horizontally. TextAlign controls how the text aligns in the space it appears.

It supports the following values for aligning the text within the Text container:

1. TextAlign.Center (align the text in the center)
2. TextAlign.End (align the text on the trailing edge)
3. TextAlign.Justify (stretch lines of text that end with a soft line break to fill the width of the container.)
4. TextAlign.Left ( text on the left edge)
5. TextAlign.Right (align the text on the right edge)
6. TextAlign.Start (align the text on the leading edge)

For example, the following text aligns center within the Text container.

@Preview(showBackground = true)
@Composable
fun AlignText() {
    Text(
        modifier = Modifier
            .fillMaxWidth(),
        text = "Value",
        textAlign = TextAlign.Center
    )
}

Text alignment differs from layout alignment, which is about positioning a Composable within a parent container such as a Row or Column. You can refer this article for Row alignment and this post for Column alignment.

3.2. Vertical align text

However, you must wrap the Text composable in another container for vertical alignment.  

@Preview(showBackground = true)
@Composable
fun alignTextCenterBox() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Hello World",
        )
    }
}

Similarly, you can wrap the Text composable inside the Column container. A Column is a layout composable that places its children in vertical sequence.

The composable Column supports the following positioning behaviors:

1. Vertical Arrangement (Used to specify the vertical arrangement of the layout’s children in Column layouts)
2. Horizontal Alignment (Used to define the horizontal alignment of a Column layout inside a parent layout.)

To understand the verticalArrangement and horizontalAlignment of Column composable, refer to this article.

@Preview(showBackground = true)
@Composable
fun alignTextCenterColumn() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Text",
        )
    }
}

4. Conclusion

To sum up, we have learned the text gravity of Android Jetpack Compose.