Hello guys am having a long day trying to create this compos kotlinlang #compose-android

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

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

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.

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)
    )
}