Android compose vertical line connect components

user_19834502 0
Viewed 38

I want make a UI like this picture.

What I want:

Enter image description here

Now my result:

Enter image description here

My code:

Row(
    verticalAlignment = Alignment.CenterVertically
) {
    Image(
        imageVector = Icons.Rounded.CheckCircle,
        contentDescription = null,
        modifier = Modifier
            .size(16.dp)
            .onGloballyPositioned {
                topOffset = it.boundsInRoot().bottomCenter
            }
    )
    Spacer(modifier = Modifier.size(8.dp))
    Text(
        text = "abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd",
        fontSize = 16.sp,
    )
}

Spacer(modifier = Modifier.size(8.dp))

Row(
    verticalAlignment = Alignment.CenterVertically
) {
    Image(
        imageVector = Icons.Rounded.CheckCircle,
        contentDescription = null,
        modifier = Modifier
            .size(16.dp)
            .onGloballyPositioned {
                bottomOffset = it.boundsInRoot().bottomCenter
            }
    )
    Spacer(modifier = Modifier.size(8.dp))
    Text(
        text = "abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd",
        fontSize = 16.sp,
    )
}

I want draw a vertical line between the CheckCircle icons.

android-jetpack-compose android
2 Answers

A workaround, could be this:

Row {

  Vector() // Complete Icon, ticks and line

  Column {
    Text(...)
    Text(...)
  }

}
user_158808650

You can have a fixed height and then draw a line behind. You should also have another icon with white arrow.

An example:

@Composable
fun checkComposable() {
    // padding between rows
    val padding = 50.dp

    Row {
        Box(Modifier.height(intrinsicSize = IntrinsicSize.Min)) {
            Box(modifier = Modifier
                .width(4.dp)
                .padding(top = padding / 2, bottom = padding / 2)
                .fillMaxHeight()
                .background(Color.Black)
                .align(Alignment.Center))
            Column {
                Box(Modifier.height(padding)) {
                    Image(
                        imageVector = Icons.Rounded.CheckCircle,
                        contentDescription = null,
                        modifier = Modifier
                            .size(16.dp)
                            .align(Alignment.Center)
                    )
                }
                Box(Modifier.height(padding)) {
                    Image(
                        imageVector = Icons.Rounded.CheckCircle,
                        contentDescription = null,
                        modifier = Modifier
                            .size(16.dp)
                            .align(Alignment.Center)
                    )
                }
            }
        }
        Spacer(modifier = Modifier.width(8.dp))
        Column{
            Box(Modifier.height(padding)) {
                Text(
                    modifier = Modifier.align(Alignment.CenterStart),
                    text = "abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd",
                    fontSize = 16.sp,
                )
            }
            Box(Modifier.height(padding)) {
                Text(
                    modifier = Modifier.align(Alignment.CenterStart),
                    text = "abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd",
                    fontSize = 16.sp,
                )
            }
        }
    }
}
user_68053920
Related