https://kotlinlang.org logo
#compose-android
Title
# compose-android
i

IsaacMart

10/23/2023, 12:55 PM
Hello guys am having a long day trying to create this composable but it not forming. I have tried using box and a space but its not showing. How can i achieve this?
v

vide

10/23/2023, 1:27 PM
Have you tried using a
Column
and a
Row
?
You could do something like this
Copy code
Column {
  Text("text1")
  Row(horizontalArrangement = Arrangement.SpaceBetween) {
    Text("text2")
    Text("text3")
  }
  Text("text4")
  Row(horizontalArrangement = Arrangement.End) {
     Text("text6")
  }
}
to achieve a similar layout
i

IsaacMart

10/23/2023, 6:20 PM
Thanks @vide for the help. My main concern is creating a card that has a layout to its end showing status. The card should be responsive to different screen sizes.
o

Oleksandr Balan

10/24/2023, 12:25 AM
I would use a simple
Box
with a background color of the status, which will fill the
Card
height. The content height should be set to
IntrinsicSize.Min
, so that card is not expanded to the max available height, see intrinsic measurements. So something like this could do the trick:
Copy code
@Composable
private fun StatusCard(
    statusColor: Color,
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Card(modifier) {
        Row(Modifier.height(IntrinsicSize.Min)) {
            content()

            Box(
                modifier = Modifier
                    .fillMaxHeight()
                    .width(8.dp)
                    .background(statusColor)
            )
        }
    }
}
And usage:
Copy code
StatusCard(Color.Red) {
    Text(
        text = "Lorem ipsum",
        modifier = Modifier.padding(8.dp)
    )
}