Coding Bihar

Android App Development

Coding Bihar is dedicated to providing you with the knowledge and tools you need to excel in Android development. Start your journey with us and transform your app ideas into reality with Jetpack Compose. Connect, learn, and grow with Coding Bihar today!

Text in Jetpack Compose - Android

Text in Jetpack Compose - Android  - Coding Bihar
Text in Jetpack Compose

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:
Text in Jetpack Compose
Text in Jetpack Compose
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
 Sandeep Gupta

Posted by Sandeep Gupta

Please share your feedback us at:sandeep@codingbihar.com. Thank you for being a part of our community!

Special Message

Welcome to coding bihar!