How to remove space below text baseline in jetpack compose?

Question

Currently I get this:

But I want something like this:

But also the text from "50" and "min" should be aligned to the top.

My code:

Row(verticalAlignment = Alignment.Bottom) {
    Text(
        text = "18",
        color = MaterialTheme.colors.primaryVariant,
        fontSize = 60.sp,
        modifier = Modifier
            .weight(1f).height(62.dp),
        textAlign = TextAlign.End,
    )
    Text(
        text = "hrs",
        modifier = Modifier.weight(1f).height(16.dp),
    )
}
Row(verticalAlignment = Alignment.Top) {
    Text(
        text = "50",
        color = MaterialTheme.colors.primaryVariant,
        fontSize = 28.sp,
        modifier = Modifier.weight(1f).height(30.dp).align(Alignment.Top),
        textAlign = TextAlign.End,
    )
    Text("min", modifier = Modifier.weight(1f))
}

As you see in my code I solved that by using the height property currently. But it doesn't work for the align top and it feels a bit wrong. is there a better way to make it work?

score 6 · Answer 1 · answered May 23 '21 at 22:29

6

You can use the AnnotatedString to display the text with multiple styles.

Something like:

Row() {
    Text(
        text = buildAnnotatedString {
        withStyle(style = SpanStyle(
            color = MaterialTheme.colors.primaryVariant,
            fontSize = 60.sp)) {
            append("18")
        }
        append(" hrs ")
    })
}

For the second case you can apply a BaselineShift to the min text:

Row() {
    Text(
        text = buildAnnotatedString {
            withStyle(style = SpanStyle(
                color = MaterialTheme.colors.primaryVariant,
                fontSize = 28.sp)) {
                append("50")
            }
            withStyle(style = SpanStyle(
                baselineShift = BaselineShift(+0.65f))) {
                append(" min ")
            }

        })
}

answered May 23 '21 at 22:29

Gabriele Mariotti

320,139
94
887
841

1

Thank you for your help and your effort to reproduce this. Unfortunately, there is still padding of the text below the baseline. Here is a bit more Info: https://imgur.com/a/CaQWZAY Do you have a clue how to solve this? – Daniel Däschle May 24 '21 at 07:38
@DanielDäschle Use also in this case a BaselineShift with a negative value – Gabriele Mariotti May 24 '21 at 07:40
By adding a negative baselineshift it doesn't remove the space below but the space above gets more. I want to remove the space above as well if possible to center it vertically. – Daniel Däschle May 24 '21 at 08:17
1

@DanielDäschle sorry, my bad. In this case the only way is to use a Layout modifier – Gabriele Mariotti May 24 '21 at 09:40
2

I tried it using layout modifier several hours. Didn't got it working :( – Daniel Däschle May 25 '21 at 19:22

score 2 · Answer 2 · answered Aug 15 '21 at 18:48

You can use AlignmentLine.LastBaseLine to properly size and position you're Text. You can do something like this:

Modifier.layout { measurable, constraints ->
    // Measure the composable
    val placeable = measurable.measure(constraints)

    // Check the composable has a LastBaseline
    check(placeable[LastBaseline] != AlignmentLine.Unspecified)
    val lastBaseline = placeable[LastBaseline]

    val placeableY = placeable.height - lastBaseline
    val height = placeable.height - placeableY

    layout(placeable.width, height) {
        placeable.placeRelative(0, -placeableY)
    }
}

If you want to completely remove even the bottom FirstBaseLine just subtract it to the height and that should do it.

score 0 · Answer 3 · answered Jun 03 '22 at 10:01

From version 1.2.0-alpha05, includeFontPadding is turned off as they announced: (https://developer.android.com/jetpack/androidx/releases/compose-ui#1.2.0-alpha05)

Text: includeFontPadding is now turned off by default. The clipping issues as a result of includeFontPadding=false is handled and no clipping should occur for tall scripts.

In case you haven't found the right solution. You can try this:

Text(text = buildAnnotatedString{
  withStyle(style = 
    ParagraphStyle(
      platformStyle = PlatformParagraphStyle(includeFontPadding = false),
      lineHeightStyle = LineHeightStyle(
        LineHeightStyle.Alignment.Bottom,
        LineHeightStyle.Trim.Both
      )
    )
  ){
        append("18")
    }
})

How to remove space below text baseline in jetpack compose?

3 Answers3

Linked