40

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.

enter image description 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 ) } } }
Improve this question

3 Answers 3

Reset to default
70

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

Alignments inside a box

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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).
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_gravityfor 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
15

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", )
Improve this answer

1 Comment

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
6

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.

Improve this answer

2 Comments

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?
The full parameter name with parameter is contentAlignment = Alignment.BottomStart, in case people are wondering.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.