Jetpack Compose How to Align text or content of Text component with specific size to bottom left or right?
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 ")
}
Related videos on Youtube
![Thracian](https://i.stack.imgur.com/RLMJA.png?s=256&g=1)
Thracian
Updated on July 19, 2022Comments
-
Thracian almost 2 years
How can i align text to bottom section of a
Text
component with Jetpack Compose? TextAlign only hasStart
,End
,Left
,Center
,Right
andJustify
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, eachText
has a specific size usingmodifier.size(x)
, to align their text to bottom. In the image blue rectangles areText
with different sizes should align the text inside them like in classic Android done withandroid:gravity
.It is similar to
textAlign = TextAlign.x
but for bottom.Setting alignment from a
Box
alignsText
insideBox
orModifier.align(Alignment.BottomEnd)
inBoxScope
does whatandroid:layout_gravity
does for views, aligns the Text component, not the content ofText
component, you can see thedifference
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 ) } } }
-
Thracian over 3 yearsYeah, 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? -
Lucas Sousa almost 3 yearsGood to remember that acessing the
align
modifier directly from a Text composable will work only if its parent is aBox
(being child of aColumn
or of aRow
should not work properly). -
Thracian almost 3 yearsThis does not answer what i asked. It does what
android:layout_gravity
does for the views. My question is about how to doandroid: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 withandroid:gravity
in class Views. Answer here explains the difference