Hello everyone, How could I center / align the icon on the left to the middle of the first line (not...

# compose

[iroyo]

Hello everyone, How could I center / align the icon on the left to the middle of the first line (not the basline of the first line)? With one line is very easy but if you add more..

@Preview
@Preview(fontScale = 3f)
@Composable
fun TestCheckbox2() {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Icon(
            painter = painterResource(id = R.drawable.ic_checkbox_checked), contentDescription = null,
        )
        Text(
            text = "Line 1\nline2",
        )
    }
}

I one to avoid using a constraint layout and add “invisible” lines to align it.
First image what I have, second image what I want to achieve

[Travis Griggs]

I'm sure there are better ways than what I'm proposing, but I'm pushing myself to contribute. It's a little unclear what your constraints are. Do you always have exactly two lines, or it varies?

Cheesy solution 1:

@Preview
@Preview(fontScale = 3f)
@Composable
fun TestCheckbox3() {
   Column {
      Row(verticalAlignment = Alignment.CenterVertically) {
         Icon(Icons.Default.CheckBox, contentDescription = null)
         Text(text = "Line 1")
      }
      Row(verticalAlignment = Alignment.CenterVertically) {
         Icon(Icons.Default.CheckBox, contentDescription = null, modifier = Modifier.alpha(0f))
         Text(text = "line 2")
      }
   }
}

Assuming Solution 2:

@Preview
@Preview(fontScale = 3f)
@Composable
fun TestCheckbox4() {
   Row(modifier = Modifier.height(IntrinsicSize.Min), verticalAlignment = <http://Alignment.Top|Alignment.Top>) {
      Icon(
         Icons.Default.CheckBox,
         contentDescription = null,
         modifier = Modifier.fillMaxHeight(0.5f)
      )
      Text(text = "Line 1\nline2")
   }
}

[Travis Griggs]

I think there's a way to compose/align with virtual lines, but I haven't explored that yet. Hopefully my cheesy contributions will goad someone more experienced into giving a real solution 😄

[efemoney]

Modifier.alignBy on the icon & Modifier.alignByBaseline on the text.

[efemoney]

Then you can tweak the position of the icon based on its size and the alignment line

[ephemient]

Icon doesn't emit alignment lines, so unfortunately Modifier.alignByBaseline() won't help

[ephemient]

you can manually add alignment lines with a custom layout, but aligning by baseline doesn't center it anyway

[ephemient]

a simple hack you can easily do, though:

Row {
    var firstLineHeight by remember { mutableStateOf(0f) }
    Icon(
        ...,
        modifier = Modifier.heightIn(min = with(LocalDensity.current) { firstLineHeight.toDp() })
    )
    Text(
        ...,
        onTextLayout = { firstLineHeight = it.getLineBottom(0) }
    )
}

[Oleksandr Balan]

Your case is kinda similar to the recent article: https://link.medium.com/KVLIQrNk7yb

Article reccomends to add an additional text composable. So I think you could simply wrap your Icon in the Box and place some Text there with an empty string.

Row {
    Box(contentAlignment = Alignment.Center) {
        Text(text = "")
        Icon(
            imageVector = Icons.Default.List,
            contentDescription = null,
        )
    }
    Text(
        text = "Line 1\nline2",
    )
}

[iroyo]

yes this is what I’ll end up doing using a box. Thanks you all

[ephemient]

even if two Text instances use the same TextStyle, it's possible for their font padding to be different depending on the characters in use (see https://medium.com/androiddevelopers/fixing-font-padding-in-compose-text-768cd232425b), so that doesn't seem like a reliable solution to me