Android Compose horizontal alignment problem

Question

I have a Android Compose layout issue. This example is simplified. So please don't worry about the hierarchy.

A card should contain two main content areas. One should take all available space starting from the left side. The other one is located at the right side and has a fixed width. I use a Spacer to keep it at the right side of the card.

It works fine if the text is short enough. If the text gets longer, it pushes the second one "from the card".

What should be changed that the first column takes only the available space?

Card( modifier = Modifier .fillMaxWidth() .height(150.dp) .padding(bottom = 16.dp), elevation = 0.dp, shape = RoundedCornerShape(11.dp) ) { Row { Column( Modifier .padding(top = 11.dp, bottom = 13.dp, end = 12.dp, start = 16.dp), ) { Text( text = "First Text gets very long. Two long for Text the second text. It gets pushed out of the screen.", fontSize = 16.sp, fontWeight = FontWeight.Bold, maxLines = 2, overflow = TextOverflow.Ellipsis ) } Spacer(Modifier.weight(1f)) Column( modifier = Modifier .width(86.dp) .fillMaxHeight() ) { Text( text = "Second Text", fontSize = 16.sp, fontWeight = FontWeight.Bold, maxLines = 2, overflow = TextOverflow.Ellipsis ) } } }

Gabriele Mariotti · Accepted Answer · 2023-02-24 12:32:44Z

2

You can apply the weight modifier to the first Column removing the Spacer:

 Row(Modifier.height(IntrinsicSize.Min)) { Column( modifier = Modifier.weight(1f), ) { Text( text = "First ......screen.", // overflow = TextOverflow.Ellipsis ) } Column( modifier = Modifier .width(86.dp) .fillMaxHeight() ) { Text( text = "Second Text", fontSize = 16.sp, fontWeight = FontWeight.Bold, maxLines = 2, overflow = TextOverflow.Ellipsis ) } }

edited Feb 24, 2023 at 12:32

answered Feb 24, 2023 at 11:25

Gabriele Mariotti

370k114 gold badges1k silver badges935 bronze badges

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

6 Comments

J.K Over a year ago

Row(Modifier.height(IntrinsicSize.Min)) { @Gabriele Mariotti

J.K Over a year ago

Correct me if wrong the closing brackets made me some confusion, please check

J.K Over a year ago

No mention please. you are true inspiration for us. Actually I was feared to comment this when i see your score. :)

Gabriele Mariotti Over a year ago

Thanks for your feedback. I am happy if I can help others and every feedback is welcome.

Vivek Modi Over a year ago

@GabrieleMariotti you are great teacher...

|

Collectives™ on Stack Overflow

Android Compose horizontal alignment problem

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related