CODEWITHSUNDEEP
androidandroid-jetpack-compose
Luis Aguilar
Luis Aguilar

Reputation: 735

How to strikethrough Text in android Jetpack Compose?

I want to strikethrough a Text in Android Jetpack Compose. I have checked some documentation but I still don't find something that looks to what I want to achieve.

https://developer.android.com/jetpack/compose/text

This is my Text component:

Text("$863",fontSize = 24.sp, modifier = Modifier.width(IntrinsicSize.Min), maxLines = 1)

This is what I want to achieve:

enter image description here

Can any one please help me or give me any idea?

Upvotes: 24

Views: 10165

Answers (4)

cutiko
cutiko

Reputation: 10517

As other answers point you can use the textDecoration argument, but if you already have an style that need to be slightly modified to fit the crossed-out text, then is better to copy your style.

        Text(
            ...
            style = YourTheme.typography.normalText.copy(
                textDecoration = TextDecoration.LineThrough,
                color = YourTheme.colors.primaryTextColorLight
            )
        )

That way is more understandable than the main style is altered. In this case, the crossed-out text is the same as normal text but with the strike-through and with lighter text color.

Upvotes: 1

tim.paetz
tim.paetz

Reputation: 2771

Compose now supports TextDecoration directly on your @Composable Text so you don't have to copy/override the style:

@Composable
fun TextWithLineThroughExample(){
    Text(
        text = "Text with LineThrough",
        textDecoration = TextDecoration.LineThrough,
        style = MaterialTheme.typography.bodyLarge, // You can set this separate now
    )
}

Upvotes: 6

Tippu Fisal Sheriff
Tippu Fisal Sheriff

Reputation: 2846

Add style for text

@Composable
fun TextWithLineThroughExample(){
    Text(
        text = "Text with LineThrough",
        style = TextStyle(textDecoration = TextDecoration.LineThrough)
    )
}

enter image description here

Upvotes: 61

SapuSeven
SapuSeven

Reputation: 1573

I recommend copying the current style with adjusted properties:

@Composable
fun textWithLineThroughExample(){
    Text(
        text = "Text with LineThrough",
        style = LocalTextStyle.current.copy(textDecoration = TextDecoration.LineThrough)
    )
}

This approach keeps all other existing style properties (for example within a ProvideTextStyle block).

Upvotes: 11

Related Questions