https://kotlinlang.org logo
#compose
Title
# compose
j

Justin Xu

02/07/2023, 3:34 AM
I have a composable displaying a money amount like this:
Copy code
Row(
    verticalAlignment = <http://Alignment.Top|Alignment.Top>,
    modifier = Modifier
        .height(IntrinsicSize.Min)
) {
    Text(
        text = dollarSign, // $
        fontSize = fontSize.times(0.6)
    )
    Text(
        text = moneyAmount, // 89
        fontSize = fontSize
    )
}
That should show a small dollar sign before the money amount. However, the dollar sign is not aligned with the top of the money amount, and I can't figure out why. There's a screenshot below with a gray background on the Row composable to illustrate
2
o

Oleksandr Balan

02/07/2023, 8:02 AM
I would 1
Text
and set a
baselineShift
for the dollar sign.
Copy code
val fontSize = 64.sp
Text(
    text = buildAnnotatedString {
        withStyle(
            SpanStyle(
                fontSize = fontSize.times(0.6f),
                baselineShift = BaselineShift(0.25f),
            )
        ) {
            append("$")
        }
        append("89.00")
    },
    fontSize = fontSize,
)
It is a bit guessing game with that “0.25” value, but at least it should be consistent with font size.
t

Tung97 Hl

02/07/2023, 5:20 PM
I think buildAnnotatedString can help in this situation
3 Views