hi everyone, any suggestion how to properly align ...

# compose

[miqbaldc]

hi everyone, any suggestion how to properly align the text on the last active icon?

my code attempt in 🧵

[miqbaldc]

StatusProgress.kt

StatusProgress.kt

[miqbaldc]

with the above code, seems the text is misplaced

[efemoney]

You can solve this pretty simply:

@Preview
@Composable
fun Test() {
  MaterialTheme {
    val data = remember {
      mutableListOf(
        "Lorem" to 5,
        "Ipsum" to 6,
        "Dolor sit Amet" to 3,
      )
    }
    Column(
      modifier = Modifier
        .background(Color.White)
        .fillMaxWidth()
        .padding(horizontal = 16.dp),
      verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
      data.forEach { (name, lastActiveIndex) ->
        var lastActiveXOffset by remember { mutableStateOf<Int?>(null) }

        Row(
          modifier = Modifier.fillMaxWidth(),
          horizontalArrangement = Arrangement.spacedBy(16.dp),
        ) {
          repeat(9) { index ->
            Box(
              Modifier
                .size(24.dp)
                .run {
                  when {
                    index <= lastActiveIndex -> paint(rememberVectorPainter(Icons.Default.CheckCircle))
                    else -> padding(1.dp).border(2.dp, Color.Gray, CircleShape)
                  }
                }
                .run {
                  when {
                    index != lastActiveIndex -> this
                    else -> onGloballyPositioned { lastActiveXOffset = it.positionInParent().x.roundToInt() }
                  }
                }
            )
          }
        }

        Text(
          text = name,
          modifier = Modifier.offset { IntOffset(lastActiveXOffset ?: 0, 0) },
        )
      }
    }
  }
}

onGloballyPositioned {} is invoked in the layout stage
offset {} is invoked in the draw stage
so ideally there shouldn’t be a 1-frame delay in this case.

Only issue with this is with how simple it is, it uses offset so there is a risk the text, if its long, might be shifted outside the bounds of the parent.

[efemoney]

image.png

[miqbaldc]

Thanks for the explanation and snippet

[miqbaldc]

after considering your approach, I then came across the ConstraintLayout in compose. And use the custom constraint set without using any Row at all. So, from left to right is defined by dynamic size of composable items.

e.g (for the icons):

Iterate over size of the icons
if index == 0, start linkTo parent
if index == lastIndex, end linkTo parent, start linkTo (index - 1) end,
else, start linkTo index - 1 (with margin = 16.dp)

(for the text)
iterate over the size of the icons
get the index of each icons
text start linkto icon index start, text end linkto icon index end

and so on


this ways, the text will positioned to the center for every icon

I’ll maybe add a snippet later in here as well

thanks for giving me the insight of your snippet btw