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

Answer 1

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

Answer 2

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

Answer 3

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.