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!

Answer 1

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,
        ) {
            //...
        }
    }
}