How to add Text with all Caps in Android Jetpack Compose

Styling text is an important aspect of designing mobile apps. Sometimes, we display all text in capital letters to show the significance. Let’s learn how to capitalize text in Jetpack Android.

The Text composable doesn’t have a built-in property to change text case. Hence, we use the Kotlin function uppercase() for this purpose. See the code snippet given below.

@Composable
fun TextExample() {
    Text(text = ("This is an example of text with caps all").uppercase(),
        fontSize = 24.sp)
}

Following is the output.

Following is the complete code.

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(
                    color = MaterialTheme.colors.background,
                    modifier = Modifier.fillMaxSize()
                ) {
                    TextExample()
                }
            }
        }
    }
}

@Composable
fun TextExample() {
    Text(text = ("This is an example of text with caps all").uppercase(),
        fontSize = 24.sp)
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApplicationTheme {
        TextExample()
    }
}

I hope this Jetpack Compose Text capitalize tutorial is helpful for you.

How to add Text with all Caps in Android Jetpack Compose

Mohammed Rashid