CODEWITHSUNDEEP
androidandroid-jetpack-compose
Gnanesh023
Gnanesh023

Reputation: 250

how to change text color Opacity in jetpack compose

how can i change the opacity of Text Color.White in JetPack Compose

Text(text = funfact , fontSize = 18.sp, color = Color.White )

Upvotes: 13

Views: 14446

Answers (4)

Stephen Vinouze
Stephen Vinouze

Reputation: 2065

You can change the alpha channel from the Color attribute:

Text(text = funfact, fontSize = 18.sp, color = Color.White.copy(alpha = 0.5f))

Upvotes: 26

Philippe Banwarth
Philippe Banwarth

Reputation: 17725

You can also use the alpha modifier:

Text(
    text = funfact,
    modifier = Modifier.alpha(0.5f),
    fontSize = 18.sp,
    color = Color.White,
)

Upvotes: 11

Geraldo Neto
Geraldo Neto

Reputation: 4030

If you want to set alpha for a Text using Material Design standards, a more direct and similar way to @ReVs answer is:

Text(text = "Your text", modifier = Modifier.alpha(ContentAlpha.medium))

Hope it helps!

Upvotes: 4

Edgar V
Edgar V

Reputation: 77

Insert the text component inside a CompositionLocalProvider as follows:

CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Text(text = "Your text")
}

ContentAlpha contains 3 default types of opacity: medium, high and disabled.

Tested on stable version of Compose 1.3.1.

Upvotes: 3

Related Questions