androidandroid-jetpack-composeandroid-compose-textfield

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


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
)

Solution

  • 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,
    )
    

    enter image description here

    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.