androidandroid-jetpack-composetext-alignment

how to center text vertically in relation to an icon in jetpack compose?


I'm trying to center a text vertically in jetpack compose but the baseline always begins at the bottom of the icon and i can't figure out why.

Row of the elements already has verticalAlignment = Alignment.CenterVertically set and I've tried almost every other combination of alignments both on text and icon and at this point I'm stuck. Here's the current state of the code

AnimatedVisibility(visible = expanded) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(
                    modifier = modifier
                        .padding(5.dp),
                    imageVector = Icons.Default.Email,
                    contentDescription = "email icon"
                )
                Text(
                    text = state.email
                )
            }
        }

And the current result not vertically aligned text

I want something like this: result I want


Solution

  • I think, includeFontPadding causes that. If you are set includeFontPadding to false, you can reach what you want

        Text(
            text = "dummy@email.com",
            style = TextStyle(platformStyle = PlatformTextStyle(includeFontPadding = false))
        )