Hello guys am having a long day trying to create t...

# compose-android

[IsaacMart]

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?

[vide]

Have you tried using a Column and a Row?

[vide]

You could do something like this

Column {
  Text("text1")
  Row(horizontalArrangement = Arrangement.SpaceBetween) {
    Text("text2")
    Text("text3")
  }
  Text("text4")
  Row(horizontalArrangement = Arrangement.End) {
     Text("text6")
  }
}

to achieve a similar layout

[IsaacMart]

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.

[Oleksandr Balan]

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:

@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:

StatusCard(Color.Red) {
    Text(
        text = "Lorem ipsum",
        modifier = Modifier.padding(8.dp)
    )
}