CODEWITHSUNDEEP
android-jetpack-compose
Jeeva
Jeeva

Reputation: 4835

textAllCaps in jetpack compose

How do I achieve the same effect as textAllCaps in Jetpack Compose, I know that I can use toUpperCase method on the string itself to turn the string into uppercase. But I wonder is there a property that I can add to Text composable to visually turn the text into uppercase?

Text(
    text = stringResource(id = R.string.app_name).toUpperCase(Locale.current)
)

Upvotes: 44

Views: 27783

Answers (6)

Phil Dukhov
Phil Dukhov

Reputation: 88072

There's not such property, but you can create it by yourself:

@Composable
fun CapsText(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
) {
    Text(
        text = text.uppercase(),
        modifier = modifier,
        color = color,
        fontSize = fontSize,
        fontStyle = fontStyle,
        fontWeight = fontWeight,
        fontFamily = fontFamily,
        letterSpacing = letterSpacing,
        textDecoration = textDecoration,
        textAlign = textAlign,
        lineHeight = lineHeight,
        overflow = overflow,
        softWrap = softWrap,
        maxLines = maxLines,
        onTextLayout = onTextLayout,
        style = style,
    )
}

Upvotes: 38

Vasan
Vasan

Reputation: 131

.toUpperCase(Locale.current) is deprecated and replaced with .uppercase() example usage as below :

Text(
    text = ("any").uppercase()
)

This will render in UI as ANY

Upvotes: 13

A J
A J

Reputation: 4632

You can do this:

keyboardOptions = KeyboardOptions(
            capitalization = KeyboardCapitalization.Characters
        )

Upvotes: 7

Husni
Husni

Reputation: 366

Text(
    text = stringResource(id = R.string.app_name).uppercase()
)

You can just add .uppercase() on the stringResource. currently I'm using compose 1.2.0-beta03 version.

Upvotes: 35

Chintan Soni
Chintan Soni

Reputation: 25267

You can always use capitalize function of String class. Alternatively, Text composable can also take Annotated String as an input, you can use toUpperCase function of AnnotatedString:

@Preview(showBackground = true)
@Composable
fun Sample() {
    Text(text = upperCased("Hello"))
}

@Composable
fun upperCased(input: String): AnnotatedString {
    return buildAnnotatedString {
        append(input)
//        You can also add styling here as below:
//        
//        withStyle(style = SpanStyle(color = Color.Blue)) {
//            append("John")
//        }
//        append("Doe")
//
//        withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
//            append("W")
//        }
//        append("orld")
    }.toUpperCase()
}

One benefit I see here is that you can avoid re-writing styles throughout the app.

Upvotes: 1

Olga Borlis
Olga Borlis

Reputation: 1

  Text(
                stringResource(id = R.string.main_widget)**.toUpperCase(Locale.getDefault())**,
                fontFamily = aeonikPro,
                fontWeight = FontWeight.Medium,
                color = ColorGraySecondary,
                fontSize = 20.sp
            )

Upvotes: -2

Related Questions