Jetpack Compose How to Align text or content of Text component with specific size to bottom left or right?

Question

How can i align text to bottom section of a Text component with Jetpack Compose? TextAlign only has Start, End, Left, Center, Right and Justify options.

  Text(
        text = "First",
        textAlign = TextAlign.Start,
        modifier = Modifier
            .background(Color(0xFF1976D2))
            .size(200.dp),
        color = Color.White,
    )

I want to align Text component's content, each Text has a specific size using modifier.size(x), to align their text to bottom. In the image blue rectangles are Text with different sizes should align the text inside them like in classic Android done with android:gravity.

It is similar to textAlign = TextAlign.x but for bottom.

Setting alignment from a Box aligns Text inside Box or Modifier.align(Alignment.BottomEnd) in BoxScope does what android:layout_gravity does for views, aligns the Text component, not the content of Text component, you can see the difference here.

Code for the blue rectangles in the image is

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(250.dp)
            .background(Color.LightGray)

    ) {

        // This is the one at the bottom
        Text(
            text = "First",
            modifier = Modifier
                .background(Color(0xFF1976D2))
                .size(200.dp),
            color = Color.White,
        )

        // This is the one in the middle
        Text(
            text = "Second",
            modifier = Modifier
                .background(Color(0xFF2196F3))
                .size(150.dp),
            color = Color.White
        )

        // This is the one on top
        Text(
            text = "Third ",
            modifier = Modifier
                .background(Color(0xFF64B5F6))
                .size(100.dp),
            color = Color.White
        )
    }
}

For orange rectangles

@Composable
fun BoxShadowAndAlignmentExample() {

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(250.dp)
            .background(Color.LightGray)
            .padding(8.dp)
    ) {

        Box(
            modifier = Modifier.shadow(
                elevation = 4.dp,
                shape = RoundedCornerShape(8.dp)
            )
        ) {
            // This is the one at the bottom
            Text(
                text = "First",
                modifier = Modifier
                    .background(Color(0xFFFFA000))
                    .size(200.dp),
                color = Color.White
            )
        }

        Box(
            modifier = Modifier.shadow(
                elevation = 4.dp,
                shape = RoundedCornerShape(8.dp)
            )
                .align(Alignment.TopEnd)

        ) {
            // This is the one in the middle
            Text(
                text = "Second",
                modifier = Modifier
                    .background(Color(0xFFFFC107))
                    .size(150.dp),
                color = Color.White
            )
        }


        val modifier = Modifier.shadow(
            elevation = 4.dp,
            shape = RoundedCornerShape(8.dp)
        )
            .align(Alignment.BottomStart)

        Box(
            modifier = modifier

        ) {
            // This is the one on top
            Text(
                text = "Third ",
                modifier = Modifier
                    .background(Color(0xFFFFD54F))

                    .size(100.dp),
                color = Color.White
            )
        }
    }
}

score 50 · Answer 1 · answered Feb 22 '21 at 04:52

50

Using align modifier you can align child components in specific positions relative to their parents:

Box(modifier = Modifier.fillMaxSize()) {
    Text(modifier = Modifier.align(Alignment.BottomEnd),text = "Aligned to bottom end")
    Text(modifier = Modifier.align(Alignment.BottomStart),text = "Aligned to bottom start")
    Text(modifier = Modifier.align(Alignment.CenterStart),text = "Aligned to start center ")
    Text(modifier = Modifier.align(Alignment.TopCenter),text = "Aligned to top center ")
}

answered Feb 22 '21 at 04:52

Amirhosein

1,048
7
19

22

Good to remember that acessing the ```align``` modifier directly from a Text composable will work only if its parent is a ```Box``` (being child of a ```Column``` or of a ```Row``` should not work properly). – Lucas Sousa Jul 03 '21 at 18:48
1

This does not answer what i asked. It does what `android:layout_gravity` does for the views. My question is about how to do `android:layout_gravity`for Text component. I already aligned orange Text compnent's inside a box. But these Text's have a size and i want their context to be aligned inside them which is done with `android:gravity` in class Views. [Answer here explains the difference](https://stackoverflow.com/a/26190050/5457853) – Thracian Aug 19 '21 at 13:05

Hamid Ebadi · Accepted Answer · 2023-01-03T19:53:58.227

6

2 years later and I think I have the actual solution for this issue: for your text composable, add this modifier: .wrapContentHeight() and for the parameter, you may for example align it to the bottom with Alignment.Bottom

you can try with:

Text(
modifier = Modifier
  .height(150.dp)
  .wrapContentHeight(Alignment.Bottom)
,
text = "whooopla",
)

edited Jan 03 '23 at 19:53

answered Jan 03 '23 at 19:53

Hamid Ebadi

76
1
2

This is how it should be done because Modifier.wrapContent changes Constraints minWidth and minHeight to 0 which lets to measure content of Text to be measured with its actual size and align option position this in a container with size modifier before wrap – Thracian Aug 22 '23 at 18:56

score 2 · Answer 3 · answered Feb 21 '21 at 15:49

2

Say your component is a Box, place your text within the Box like this:

Box(
        modifier = Modifier.fillMaxSize(),
        Alignment.BottomStart
    ) {
        Text(
            "First",
            Modifier.padding(16.dp),
        )
    }

Basically, you define the section of the component that you want to use in that component, not in the text.

answered Feb 21 '21 at 15:49

Code Poet

6,222
2
29
50

1

Yeah, it's possible with Box with specific size and aligning text to bottom but you will also set background color for both Box and Text since Text wraps it's content while Box has to have for instance 200dp size. Isn't there a simpler way only with ```Text``` to align it's text to any position? – Thracian Feb 21 '21 at 16:09

Jetpack Compose How to Align text or content of Text component with specific size to bottom left or right?

3 Answers3

Linked