https://kotlinlang.org logo
m

marios proto

08/26/2021, 2:49 PM
👋 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
Copy code
@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?
1
d

Dmitrii Smirnov

08/26/2021, 3:02 PM
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
there are extra offsets for capitalized characters and for lines to be separated from each other
☝️ 1
m

marios proto

08/26/2021, 3:12 PM
yes you are right! Thank you.Some offset of the text breaks it
d

divid3d

08/26/2021, 3:13 PM
Maybe using
Modifier.alignBy(FirstBaseLine)
on Image would allow you to achieve such behaviour.
m

marios proto

08/26/2021, 3:15 PM
I tried that, but it didn’t work unfortunately! thank you for your suggestion
Copy code
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
c

Colton Idle

08/26/2021, 3:33 PM
There is an issue tracker to remove font padding. That's probably what would help here.
m

marios proto

08/26/2021, 3:34 PM
noted! thank you
c

Colton Idle

08/26/2021, 4:12 PM
c

Chris Sinco [G]

08/26/2021, 6:10 PM
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.
🤔 1