Text in Jetpack Compose

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")
text example

2. Displaying text from resource


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)
color text image jetpack

1. Changing the text size

Text("Hello Jetpack", fontSize = 22.sp)
large font text image

2. Making text bold

Text("Hello Jetpack", fontWeight = FontWeight.Bold)
bold text in jetpack compose

3. Making text Italic

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

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))
text alignment image of jetpack
centered text image in jetpack

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.

font family example image of compose

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.

    Text("Hello Jetpack", fontFamily = inconsolataFamily, fontWeight = FontWeight.Normal)
    Text("Hello Jetpack", fontFamily = inconsolataFamily, fontWeight = FontWeight.Bold)
    Text("Hello Jetpack", fontFamily = rubikamaze)
image showing different font

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.

2 thoughts on “Text in Jetpack Compose

Leave a Reply

Your email address will not be published. Required fields are marked *