Text in Jetpack Compose - Android

Text in Jetpack Compose Android 

What is Text in Jetpack compose?

Text is the most necessary components of an app. We can imagine to create an app without using a single text. Text literary means alphabets but here it may be numbers and symbols. There are many different ways by which we use text in our app but in this article we will learn how to use string text in jetpack compose app.

Text in Jetpack compose

A simple code to show text in our jetpack compose app 

Text("Hello World") 

This is not a good approach to use hard coding text. We recommend to use string resources instead of hardcoding Text values.

How to use string resources instead of hardcoding Text values?

A simple code for showing text in our app using string is below:

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

Go to res>>values>>strings.xml 

You will find <string name="app_name">Your text is here</string> you an create more string with different names which can we used in our app with different parameters and style.

Some parameters used to style our Text

fontSize: This can be use to set the size of our text appear in the app measured in sp. Eg: fontSize = 24.sp, by default font size in our app is 12.sp.

Color: Set the text color. Eg: Color.Blue but we can use the color code as color = Color(0xFFE997B3)

fontWeight: Specifies font weight as Bold, Medium, ExtraBold and SemiBold etc.

fontStyle: Font style parameter is used to italicize our text or we can set another FontStyle.

fontFamily: change the font family this property can be used. Eg: fontFamily = FontFamily.Cursive or or fontFamily = FontFamily(Typeface.SANS_SERIF)

letterSpacing: It can set the space between letters of our text.

shadow: To add a shadow to the text. Eg: 

val offset = Offset(5.0f, 10.0f)

shadow = Shadow(color = Color.Gray, offset = offset, blurRadius = 1f)

TextStyle: This can change text in a customized way. We can make text clickable, scale the text size and add color. It also change TextPaint properties, draw on a Canvas, and change text layout.

@Composable

fun MyFirstApp() {

    val offset = Offset(5.0f, 10.0f)

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

        color = Color(0xFFE997B3),

        fontWeight = FontWeight.ExtraBold, style = TextStyle(

        shadow=Shadow(Color.Blue,offset=offset, blurRadius = 1f)),

        fontStyle = FontStyle.Italic,

        fontFamily = FontFamily.Cursive)

    

       }

OUTPUT:

If we want to use large paragraph text to show on a same screen we can use column with scrollable

Copy this code →

@Composable
fun MyFirstApp() {
    Column (
        Modifier.padding(16.dp)
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
    ){
        val offset = Offset(5.0f, 10.0f)
        Text(text = stringResource(id = R.string.app_name),
            color = Color(0xFFE997B3),
            fontSize = 35.sp,
            fontWeight = FontWeight.ExtraBold, style = TextStyle(
                shadow=Shadow(Color.Blue,offset=offset, blurRadius = 1f)),
            fontStyle = FontStyle.Italic,
            fontFamily = FontFamily.SansSerif)
        Text(text = stringResource(id = R.string.paragraph))
    }
} 

OUTPUT:

Also Read Spannable Text in Jetpack Compose