Hi folks, is there a way to make the icon scale according to the text. When font size is increased t...

# compose-android

[Sulav Timsina]

Hi folks, is there a way to make the icon scale according to the text. When font size is increased the text increases but the bullet icon doesn’t. So the alignment looks bad. Can someone help with this issue?

[Stylianos Gakis]

Can you try putting those two in a row (as I suppose you've done already) and just vertically alight the icon in the available space? It's the align() modifier which should be available inside the RowScope

[Sulav Timsina]

Row {
    Icon(
        modifier = Modifier.size(MyTheme.dimensions.medium),
        painter = painterResource(id = drawable),
        tint = animatedColor.value,
        contentDescription = null,
    )
    Spacer(modifier = Modifier.width(MyTheme.dimensions.tiny))
    Text(
        modifier = Modifier.align(Alignment.CenterVertically),
        style = MaterialTheme.typography.bodySmall,
        text = rule.copy,
        color = animatedColor.value,
    )
}

@Stylianos Gakis This is how it is now.

[Stylianos Gakis]

I mostly meant to align the icon vertically, since it's the text which at least from your screenshot looks to be the one which typically takes up most of the space.
So to take
modifier = Modifier.size(MyTheme.dimensions.medium),
and replace it with
modifier = Modifier.size(MyTheme.dimensions.medium).align(Alignment.CenterVertically),

But you could also not do that in the individual items and instead do
Row(verticalAlignment = Alignment.CenterVertically) { ...
So this alignment applies to all items inside that row.
And tbh that's even better since perhaps the icon can also grow bigger than the text

[Sulav Timsina]

With this (applying the modifier to each icon), the icon is now centerVertical. I want the icon to be aligned to the center of the first line. Is that even possible? I think my want is clear. @Stylianos Gakis

[Sulav Timsina]

with .align(<http://Alignment.Top|Alignment.Top>) this is how it looks:

[Stylianos Gakis]

Btw in a thread, I already get notified when you reply, you do not need to ping me again with the @.

So you want it to be center aligned to only your first sentence if the entire text is many lines, right?

[Sulav Timsina]

Yes that’s correct.

[ephemient]

you may want to do a custom layout to size it to the space between top and baseline

[Stylianos Gakis]

Okay, then I can tell you how I did it.

Have this modifier somewhere:

fun Modifier.withoutPlacement(): Modifier = this.layout { measurable, constraints ->
  val boxPlaceable = measurable.measure(constraints)
  layout(width = boxPlaceable.width, height = boxPlaceable.height) {}
}

I have on a row somehthing like this:

Row {
 Box(contentAlignment = Alignment.Center) {
  Text("H", modifier = Modifier.withoutPlacement)
  Icon(your icon here)
 }
 Text("Your long text here")
}

[ephemient]

or use InlineTextContent anad ParagraphStyle to insert the bullet into the text itself

[ephemient]

https://issuetracker.google.com/issues/299662276 should solve it eventually

[Stylianos Gakis]

This way, there is a fake "H" rendering right on the left side but without placing itself, but it takes up exactly the space that one letter would take. And this respects the font size adjustments.
And renders an Icon exactly at the same spot, center aligned, so that it's always at the center of wherever your text would be.

That's my hacky solution until what ephemient linked is potentially fixed.

[Stylianos Gakis]

This is what it looks like [attached picture]
This is the code https://github.com/HedvigInsurance/android/blob/c7df5183f44378e01fd3a955c53e63821e[…]src/main/kotlin/com/hedvig/android/core/ui/infocard/InfoCard.kt I am showing you here

[Sulav Timsina]

That worked like a charm. Thanks.

[Stylianos Gakis]

No worries

[sindrenm]

I'm curious if a11y services (like screen readers) will still pick up on that unplaced Text("H") or if it's ignored because it's not placed. Do you know?

[Stylianos Gakis]

Yeah that's why I am not doing alpha = 0f, but I am not placing it at all.
It's been a long time since I tested this, but I remember that it was fine? If you're super curious and you test it out yourself too let me know 😅

[sindrenm]

I'm afraid I'm only curious. At least for now. But yeah, it would make sense that a11y would ditch stuff that isn't placed. 👍

[Sulav Timsina]

this is how talkback would announce it. Ignore the last item. that was modified by me for some business reason.

Screen Recording 2024-08-08 at 13.29.16.mov

[Stylianos Gakis]

Alright, and the icon would be announced properly if you provided a contentDescription to it I suppose right? Now I am assuming you're passing null there.