How to change the TextDecoration.Underline with a custom style?

Question

I wanted to apply custom underline style to the underlined text. Can we change within TextDecoration.underline ??

textStyle = MaterialTheme.typography.titleMedium.copy(
    textAlign = TextAlign.Start,
    fontWeight = FontWeight.W600,
    color = color,
    textDecoration = TextDecoration.Underline
)

How do you want to change it? – Gabriele Mariotti Mar 05 '23 at 17:07 — Gabriele Mariotti, Mar 05 '23 at 17:07
Any custom changes like color, width etc. – Jeevan Rupacha Mar 06 '23 at 01:49 — Jeevan Rupacha, Mar 06 '23 at 01:49

score 8 · Accepted Answer · answered Mar 06 '23 at 06:52

Instead of using textDecoration = TextDecoration.Underline you can simply draw a line at the bottom of the Text.

Something like:

Text(
    modifier = Modifier.drawBehind {
        val strokeWidthPx = 1.dp.toPx()
        val verticalOffset = size.height - 2.sp.toPx()
        drawLine(
            color = Teal200,
            strokeWidth = strokeWidthPx,
            start = Offset(0f, verticalOffset),
            end = Offset(size.width, verticalOffset)
        )
    },
    text = text,
)

If you have a Text with more than 1 line you have to calculate text height and draw the line for each line of text.

Best answer for custom underline. – Abdul Waheed Aug 20 '23 at 08:17 — Abdul Waheed, Aug 20 '23 at 08:17

How to change the TextDecoration.Underline with a custom style?

1 Answers1