:wave: Rookie question! I am trying to align the icon with the text so that they are on the same hei...

# compose

[marios proto]

👋 Rookie question!
I am trying to align the icon with the text so that they are on the same height.
This is the code for reproducing it

@Composable
fun IconTopLeftText(
    backgroundImageId: Int,
    iconId: Int,
    padding: Int = 16,
    imagePadding: Int,
    text: String,
    textColor: Int,
    textSize: Int
) {
    Box(modifier = Modifier
        .padding(padding.dp)
        .semantics(true) { }) {
        val drawable = AppCompatResources.getDrawable(LocalContext.current, backgroundImageId)

        Image(
            rememberDrawablePainter( drawable ),
            contentDescription = null)
        Row(
            horizontalArrangement = Arrangement.Start,
            verticalAlignment = <http://Alignment.Top|Alignment.Top>,
        ) {
            Image(
                painter = painterResource(id = iconId),
                modifier = Modifier
                    .padding(end = imagePadding.dp),
                contentDescription = null
            )

            Text(
                text = text,
                fontSize = textSize.sp,
                color = colorResource(id = textColor)
            )
        }
    }
}

Any ideas what am I missing please?

[Dmitrii Smirnov]

Try to add some color to background of your Text and you may notice that it would be probably on the same height with icon

[Dmitrii Smirnov]

there are extra offsets for capitalized characters and for lines to be separated from each other

[marios proto]

yes you are right! Thank you.Some offset of the text breaks it

[divid3d]

Maybe using Modifier.alignBy(FirstBaseLine) on Image would allow you to achieve such behaviour.

[marios proto]

I tried that, but it didn’t work unfortunately! thank you for your suggestion

[marios proto]

Image(
    painter = painterResource(id = iconId),
    modifier = Modifier
        .padding(end = imagePadding.dp)
.offset(y=5.dp),
    contentDescription = null
)

I am going to give some offset to the image to make it more aligned

[Colton Idle]

There is an issue tracker to remove font padding. That's probably what would help here.

[marios proto]

noted! thank you

[Colton Idle]

https://issuetracker.google.com/issues/171394808

[Chris Sinco [G]]

Did you try to set lineHeight of the Text to the same height as the Icon? That might get the alignment for the first line in the paragraph.