m

    marios proto

    1 year ago
    👋 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

    Dmitrii Smirnov

    1 year ago
    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
    m

    marios proto

    1 year ago
    yes you are right! Thank you.Some offset of the text breaks it
    divid3d

    divid3d

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

    marios proto

    1 year ago
    I tried that, but it didn’t work unfortunately! thank you for your suggestion
    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

    Colton Idle

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

    marios proto

    1 year ago
    noted! thank you
    Colton Idle

    Colton Idle

    1 year ago
    Chris Sinco [G]

    Chris Sinco [G]

    1 year ago
    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.