Hello all, I'm trying to get a certain layout working and I can't quite wrap my head around it. So i...

# compose

[Kevin S]

Hello all, I'm trying to get a certain layout working and I can't quite wrap my head around it. So in the image there's a checkbox and two texts. The two texts are left aligned, and also the checkbox is center aligned vertically with the first text. If I do Column {Row Row } then i cant left align the text and if i used Row { Column Column } Then I can't center align the verticals. I know there's Constraint Layouts in compose now but I don't want to use those. Any suggestions?

[Stylianos Gakis]

Could it be that you could use alignment to baseline https://developer.android.com/develop/ui/compose/layouts/alignment-lines to grab the baseline of the text there and try to make the icon align to that?

A hacky approach which I have actually done in the past, is that on the icon composable, I had something like

Box {
  Icon(align(CenterStart))
  Text("H", Modifier.withoutPlacement())
}

So that if the text font was bigger or smaller, the entire box would be adjusted and the Icon would move along with it.
Hacky but it worked for a similar layout I've had to build

[Kevin S]

Hmm that's an interesting approach. I was hoping for a more simplistic approach, but I'll look into this thank you

[Albert Chang]

The best approach would be a custom layout.

[Albert Chang]

If you don’t want to write a custom layout, you can also do something like this.

Row {
    var textCenter by remember { mutableFloatStateOf(0f) }
    Checkbox(
        modifier = Modifier.graphicsLayer {
            translationY = textCenter - size.height / 2
        }
    )
    Column {
        Text(
            text = "Label",
            onTextLayout = { textCenter = it.size.height / 2f }
        )
        Text(text = "Description")
    }
}

[Ahmed]

What about using a spacer?

[Skaldebane]

@Albert Chang I believe this would cause a flicker in the first frame, since the initial composition will have the initial value...

[Stylianos Gakis]

OnTextLayout is called when the layout phase of the text composable is done. That is before the graphicsLayer lambda will be called on the placement phase. So I think it doesn't actually miss a frame.

[Skaldebane]

Aha, TIL!