Text()

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.

Attributes

attributes take value to specify how widget will be customized

text

It is the required attribute that take string value and must be passed to Text() to display text on composable.

Syntax:-


Text( text = "$string_value" )

Mutliple Ways to pass string value to the `Text()`

1. Directly passing String value or variable


Text( text = "Hello World")

val user_name = "Devansh"
Text( text = user_name )

2. String Resource

we can also define string values inside string.xml file in res directory in jetpack compose project .

Now , to use this string values in composable function we have one method called stringResource(id = )

this method will accept id of our string value that are generated in R.java file.


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

3. Using `buildAnnotatedString {...}` block

It is used to customize part of string or character.

withStyle() is used for customise subString and append() method are use to append string as an whole string as one String on display.

SpanStyle() is used to declare text style by properties as shown below.

you can different customization as normal text in this method for subString


Text(
    text = buildAnnotatedString {

        withStyle(style = SpanStyle(color = Purple80)) {
            append("Good ")
        }

        withStyle(style = SpanStyle(color = Pink80)) {
            append("Morning ")
        }

        withStyle(style = SpanStyle(color = Color.Red)) {
            append("Devansh ")
        }
    }
)

Example of buildAnnotatedString{...}

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

8. Super Script Text

baseLineShift attribute are used to set text as BaselineShift.Superscript

we have created composable fuction to crete text with Super Script.


@Composable
fun SuperScriptText(normalText: String, superText: String) {
    Text(
        buildAnnotatedString {
            withStyle(
                style = SpanStyle(
                    fontSize = 16.sp
                )
            ) {
                append(normalText)
            }
            withStyle(
                style = SpanStyle(
                    fontSize = 10.sp,
                    fontWeight = FontWeight.Normal,
                    baselineShift = BaselineShift.Superscript
                )
            ) {
                append(superText)
            }
        }
    )
}

9. Sub Script Text

baseLineShift attribute are used to set text as BaselineShift.Subscript

we have created composable fuction to crete text with sub Script.


@Composable
fun SubScriptText(normalText: String, superText: String) {

    Text(
        buildAnnotatedString {
            withStyle(
                style = SpanStyle(
                    fontSize = 16.sp
                )
            ) {
                append(normalText)
            }
            withStyle(
                style = SpanStyle(
                    fontSize = 10.sp,
                    fontWeight = FontWeight.Normal,
                    baselineShift = BaselineShift.Subscript
                )
            ) {
                append(superText)
            }
        }
    )
}

TextStyle

TextStyle() are class to style our Text Widget in android compose application.

we need to style this widget using the TextStyle option to enhance the user experience.

In Jetpack Compose, we can use the following options for applying a TextStyle()


Text(
    text = "Hello World",
    style = TextStyle(
        color = Color.Red,
        fontSize = 16.sp,
        fontFamily = FontFamily.Monospace,
        fontWeight = FontWeight.W800,
        fontStyle = FontStyle.Italic,
        letterSpacing = 0.5.em,
        background = Color.LightGray,
        textDecoration = TextDecoration.Underline
    )
)

1.Text Color:


Text(
    text = "Text with Color",
    style = TextStyle(color = Color.Red)
)

2. Background Color:


Text(
    text = "Text with Background Color",
    style = TextStyle(background = Color.Yellow)
)

3. Shadow:


Text(
    text = "Text with Shadow",
    style = TextStyle(
        shadow = Shadow(
            color = Color.Black,
            offset = Offset(5f, 5f),
            blurRadius = 5f
        )
    )
)

4. Font Family:

You can use following system fonts or your custom font.


val Default: SystemFontFamily = DefaultFontFamily()
val SansSerif = GenericFontFamily("sans-serif")
val Serif = GenericFontFamily("serif")
val Monospace = GenericFontFamily("monospace")
val Cursive = GenericFontFamily("cursive")

Example:


Text(
    text = "Text with custom font",
    style = TextStyle(fontSize = 20.sp, fontFamily = FontFamily.Cursive)
)

5. Font Size:


Text(
    text = "Text with big font size",
    style = TextStyle(fontSize = 30.sp)
)

6. Font Style:

You can use either FontStyle.Normal or FontStyle.Italic


Text(
    text = "Text with Italic text",
    style = TextStyle(fontSize = 20.sp, fontStyle = FontStyle.Italic)
)

Output:

7. Text Decoration:

You can use either TextDecoration.Underline or TextDecoration.LineThrough

TextDecoration.Underline - Draws a horizontal line below the text. TextDecoration.LineThrough - Draws a horizontal line over the text.


@Composable
fun TextDecorationStyle() {
    Column {        Text(
            text = "Text with Underline",
            style = TextStyle(
                color =  Color.Black, fontSize = 24.sp,
                textDecoration = TextDecoration.Underline
            )
        )
        Text(
            text = "Text with Strike",
            style = TextStyle(
                color =  Color.Blue, fontSize = 24.sp,
                textDecoration = TextDecoration.LineThrough
            )
        )
    }
}

Typography:

From MaterialTheme, we can reuse the default typography. They customize the textstyle() with various text sizes.

Following options available in material theme typography:

Note:-

In latest Update from end of 2023 Versions Typogrphy Constants name are changed but functionallity remains same so use after checking what size you need.

Sample code:


@Composable
fun TextHeadingStyle() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.Green)
    ) {        Text(
            text = "Heading 3",
            style = MaterialTheme.typography.h3
        )
        Text(
            text = "Heading 4",
            style = MaterialTheme.typography.h4
        )
        Text(
            text = "Heading 5",
            style = MaterialTheme.typography.h5
        )
    }
}

Output: