Text in Jetpack Compose

Table of Contents

What is Text in jetpack compose?

Anything written on UI is part of the TEXT composable in jetpack compose and before compose it is used to show with TEXTVIEW in XML. Let’s have an example of text in jetpack compose.

1. Displaying text

Text("Hello Jetpack")

2. Displaying text from resource

Text(stringResource(R.string.hello_jetpack))

3. Basic Styling of text in compose

The text composable has multiple parameters to style its content. We are going to discuss the common use cases. Let’s change the text colour

 Text("Hello Jetpack", color = Color.Blue)

1. Changing the text size

Text("Hello Jetpack", fontSize = 22.sp)

2. Making text bold

Text("Hello Jetpack", fontWeight = FontWeight.Bold)

3. Making text Italic

Text("Hello Jetpack", fontStyle = FontStyle.Italic)

4. Text Alignments in compose

The textAlign parameter lets you set the horizontal alignment of text within a Text composable surface area. By default, the text will select natural text alignment depending on its content value like the left edge for Latin, Cyrillic, or Hangul and the right edge for Arabic or Hebrew.

Text("Hello Jetpack", textAlign = TextAlign.Right, modifier = Modifier.width(150.dp))
Text("Hello Jetpack", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp))

In the above code block, we added a modifier parameter with a width of 150dp to increase text composable surface area so that alignment can be visible properly. In my opinion, the modifier is the main power of Jetpack Compose, we will see it in later posts.

Note: – If you want to set text alignment manually then always use TextAlign.Start and TextAlign.End instead of TextAlign.Left and TextAlign.Right respectively. Because start and end text alignment will behave according to the language provided while left and right alignment simply put text to the right and left edges of the text surface area.

5. Using different fonts in Jetpack Compose

Text Composable has fontFamily parameter to allow setting the font used in the composable. By default, serif, sans-serif, monospace and cursive font families are included.

But if you want to use custom fonts and typefaces then add them to res/font folder. And then in type.kt file reference them like this

val inconsolataFamily = FontFamily(
    Font(R.font.inconsolata_regular, FontWeight.Normal),
    Font(R.font.inconsolata_bold, FontWeight.Bold)
)
val rubikamaze = FontFamily(Font(R.font.rubikmaze_regular, FontWeight.Normal))

In the above code snippet Font function can take two more parameters which are fontStyle and loadingStrategy, if your font has an Italic typeface then you can add fontStyle parameter with FontStyle.Italic And loadingStrategy parameter is too advanced for this post as it focuses on Basic text styling. Now you are ready to use your custom font family.

Column{
    Text("Hello Jetpack", fontFamily = inconsolataFamily, fontWeight = FontWeight.Normal)
    Text("Hello Jetpack", fontFamily = inconsolataFamily, fontWeight = FontWeight.Bold)
    Text("Hello Jetpack", fontFamily = rubikamaze)
}

I have to leave you with this basic understanding of Text composable of Jetpack Compose. As this is my first blog, I beg the reader’s pardon for any mistake or wrongdoing. Thanks for visiting my blog.