4. Text in JetPack Compose

Updated: Dec 12, 2021

What's Text?

If you are an Android developer, it's a TextView.

If you new to Android programming, it's just a label or paragraph.


1. Text Size

Change the text size using fontSize parameter

@Composable
fun TextWithSize(label : String, size : TextUnit) {
    Text(label, fontSize = size)
}

//TextWithSize("Big text",40.sp) -- call this method 

2. Text Color

Change the text color using color parameter

@Composable
fun ColorText() {
  Text("Color text", color = Color.Blue)
}

3. Bold Text

Use fontWeight parameter to making the bold text

@Composable
fun BoldText() {
    Text("Bold text", fontWeight = FontWeight.Bold)
}

4. Italic Text

Use fontStyle paramter to making the italic text

@Composable
fun ItalicText() {
    Text("Italic Text", fontStyle = FontStyle.Italic)
}

5. Maximum number of lines

To limit the number of visible lines in a Text composable, set the maxLines parameter:

@Composable
fun MaxLines() {
    Text("hello ".repeat(50), maxLines = 2)
}

6. Text Overflow

When limiting a long text, you may want to indicate a text overflow, which is only shown if the displayed text is truncated. To do so, set the textOverflow parameter:

@Composable
fun OverflowedText() {
    Text("Hello Compose ".repeat(50), maxLines = 2, overflow = TextOverflow.Ellipsis)
}

7. Selectable Text

By default, composables aren’t selectable, which means by default users can't select and copy text from your app. To enable text selection, you need to wrap your text elements with a SelectionContainer composable:

@Composable
fun SelectableText() {
    SelectionContainer {
        Text("This text is selectable")
    }
}

Output




Refer our blog about TextStyle

https://www.jetpackcompose.net/post/textstyle-in-jetpack-compose


Refer official documentation for more details

https://developer.android.com/jetpack/compose/text


Source code

https://github.com/JetpackCompose/Jetpack-Compose-Samples/blob/master/JetPackComposeSamples/app/src/main/java/net/jetpackcompose/composetext/activities/ActivityTextBasics.kt


1,603 views0 comments

Recent Posts

See All

This site developed for Jetpack Compose tutorial. We will post tutorials frequently. You can also join our community by clicking login. 

  • Twitter
  • LinkedIn

You have any queries contact me. 

Subscribe for latest updates

Thanks for submitting!