Compose layout vertical alignment: SpaceBetween having no impact

Question

I want to push the Upcoming text to the bottom, while the 7 pax text remains at the top. I used verticalArrangement = Arrangement.SpaceBetween for that column, but it is having no effect since the column is not taking the full height. If I use fillMaxHeight for the column to force it to take the full height, the whole row takes the full screen height, which is not expected. How can I fix this?

@Composable fun SoFixClientTourCard() { Column { Row( verticalAlignment = Alignment.Top, modifier = Modifier .background(Color.White) .fillMaxWidth() .padding(16.dp) ) { // calendar Column( horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier .padding(top = 4.dp) .background(MaterialTheme.colors.error) .shadow(1.dp) .padding(horizontal = 8.dp, vertical = 4.dp) ) { Text("02", fontSize = 14.sp, fontWeight = FontWeight.Bold, color = Color.White) Text("OCT", fontSize = 12.sp, fontWeight = FontWeight.Bold, color = Color.White) } // tour & package name Column( modifier = Modifier .padding(horizontal = 16.dp) .weight(1f) ) { Text("Tanguar Haor Tour", style = MaterialTheme.typography.subtitle1, fontWeight = FontWeight.Bold) Text( "Couple Non-AC + Single Non-AC + Family Non-AC + Couple AC", style = MaterialTheme.typography.body2, lineHeight = 20.sp, modifier = Modifier.padding(top = 4.dp) ) } // FIXME: Align status to the bottom, pax to the top // pax & status Column( horizontalAlignment = Alignment.End, verticalArrangement = Arrangement.SpaceBetween, ) { Text("7 pax", fontSize = XS) val status = "Upcoming" Text( status, fontSize = XXXS, color = Color.White, modifier = Modifier .padding(top = 4.dp) // top margin .background( when (status.lowercase()) { "upcoming" -> MaterialTheme.colors.primary "cancelled" -> MaterialTheme.colors.error else -> Color.DarkGray } ) .padding(horizontal = 8.dp, vertical = 4.dp) ) } } } }

Thanks for your help!

Gabriele Mariotti · Accepted Answer · 2021-09-10 06:30:15Z

5

You can apply an intrinsic measurements to its parent container, in your case the Row.
Add the height(IntrinsicSize.Min) modifier to your Row and the fillMaxHeight() modifier to the 3rd Column. Something like:

Column { Row( verticalAlignment = Alignment.Top, modifier = Modifier .background(Color.White) .fillMaxWidth() .padding(16.dp) .height(IntrinsicSize.Min) ) { //.... // pax & status Column( modifier= Modifier.fillMaxHeight(), horizontalAlignment = Alignment.End, verticalArrangement = Arrangement.SpaceBetween, ) { //... } } }

edited Sep 10, 2021 at 6:30

answered Sep 10, 2021 at 5:42

Gabriele Mariotti

370k114 gold badges1k silver badges935 bronze badges

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

3 Comments

Raw Hasan Over a year ago

Worked perfectly. Thanks a lot!

Tonnie Over a year ago

Hi @Gab just for my info pliz comment what does height(IntrinsicSize.Min) do to the row

Gabriele Mariotti Over a year ago

@Tonnie The Row composable's minIntrinsicHeight will be the maximum minIntrinsicHeight of its children. The 3rd Column element's minIntrinsicHeight is 0 as it doesn't occupy space if no constraints are given; the 1st and 2nd Column minIntrinsicHeight will be that of the content given a specific width. Therefore, the Row element's height constraint will be the max minIntrinsicHeight of the 1st and 2nd Column. The 3rd Column will then expand its height to the height constraint given by the Row.

Collectives™ on Stack Overflow

Compose layout vertical alignment: SpaceBetween having no impact

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related