Comprehensive Guide to Jetpack Compose Text Component and Its Properties

Text Component Overview

In Jetpack Compose, UI elements are Kotlin functions; the Text composable is a function with many parameters that control the appearance of displayed text.

Text Attributes

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
) { ... }

All parameters have default values, allowing you to specify only the ones you need.

Examples of Individual Attributes

text – Displaying Simple Strings

@Composable
fun MyText() {
    Text("Jetpack Compose, by 依然范特稀西")
}

color – Changing Text Color

@Composable
fun MyText() {
    Text(text = stringResource(R.string.my_text), color = Color.Blue)
}

fontSize – Adjusting Font Size

@Composable
fun MyText() {
    Text(text = stringResource(R.string.my_text), fontSize = 30.sp)
}

fontStyle – Italic or Normal

@Composable
fun MyText() {
    Column {
        Text(text = stringResource(R.string.my_text), fontStyle = FontStyle.Normal)
        Text(text = stringResource(R.string.my_text), fontStyle = FontStyle.Italic)
    }
}

fontWeight – Controlling Boldness

FontWeight(50) // custom weight
// Predefined weights:
FontWeight.W100 // Thin
FontWeight.W400 // Normal
FontWeight.W700 // Bold

fontFamily – Selecting Font Family

@Composable
fun MyText() {
    Column {
        Text(text = stringResource(R.string.my_text), fontFamily = FontFamily.Default)
        Text(text = stringResource(R.string.my_text), fontFamily = FontFamily.SansSerif)
        Text(text = stringResource(R.string.my_text), fontFamily = FontFamily.Serif)
        Text(text = stringResource(R.string.my_text), fontFamily = FontFamily.Monospace)
        Text(text = stringResource(R.string.my_text), fontFamily = FontFamily.Cursive)
    }
}

letterSpacing – Adjusting Character Spacing

@Composable
fun MyText() {
    Text(text = stringResource(R.string.my_text), letterSpacing = 10.sp)
}

textDecoration – Underline, Strikethrough, None

@Composable
fun MyText() {
    Column {
        Text(text = stringResource(R.string.my_text), textDecoration = TextDecoration.None)
        Text(text = stringResource(R.string.my_text), textDecoration = TextDecoration.LineThrough)
        Text(text = stringResource(R.string.my_text), textDecoration = TextDecoration.Underline)
        // Combine underline and strikethrough
        val combine = listOf(TextDecoration.Underline, TextDecoration.LineThrough)
        Text(text = stringResource(R.string.my_text), textDecoration = TextDecoration.combine(combine))
    }
}

textAlign – Aligning Text Within Its Container

@Composable
fun MyText() {
    Column {
        Text(text = stringResource(R.string.my_text), modifier = Modifier.size(300.dp, 50.dp).background(Color.Gray), textAlign = TextAlign.Start)
        Text(text = stringResource(R.string.my_text), modifier = Modifier.size(300.dp, 50.dp).background(Color.Gray), textAlign = TextAlign.End)
        Text(text = stringResource(R.string.my_text), modifier = Modifier.size(300.dp, 50.dp).background(Color.Gray), textAlign = TextAlign.Center)
        Text(text = stringResource(R.string.my_text), modifier = Modifier.size(300.dp, 50.dp).background(Color.Gray), textAlign = TextAlign.Justify)
    }
}

lineHeight – Setting Line Height

@Composable
fun MyText() {
    Column {
        Text(text = "No lineHeight".repeat(10))
        Text(text = "With lineHeight".repeat(10), lineHeight = 30.sp)
    }
}

overflow & maxLines – Controlling Text Overflow

@Composable
fun MyText() {
    Column {
        Text(text = stringResource(R.string.my_text).repeat(10), overflow = TextOverflow.Clip, maxLines = 2)
        Text(text = stringResource(R.string.my_text).repeat(10), overflow = TextOverflow.Ellipsis, maxLines = 2)
    }
}

softWrap – Enabling/Disabling Automatic Wrapping

@Composable
fun MyText() {
    Text(text = stringResource(R.string.my_text).repeat(10), softWrap = false, overflow = TextOverflow.Ellipsis)
}

onTextLayout – Receiving Layout Information

@Composable
fun MyText() {
    Text(
        text = stringResource(R.string.my_text),
        onTextLayout = {
            Log.e("Layout", "width: ${it.size.width}, height: ${it.size.height}")
        }
    )
}

style – Consolidating Multiple Styling Properties

@Composable
fun MyText() {
    Text(
        text = stringResource(R.string.my_text),
        style = TextStyle(
            color = Color.Blue,
            fontSize = 20.sp,
            lineHeight = 20.sp,
            fontWeight = FontWeight.Bold,
            fontFamily = FontFamily.Monospace,
            fontStyle = FontStyle.Normal,
            shadow = Shadow(color = Color.Red, offset = Offset(10f, 10f), blurRadius = 10f)
        )
    )
}

modifier – Modifying Layout, Background, Border, etc.

@Composable
fun MyText() {
    Text(
        text = stringResource(R.string.my_text),
        modifier = Modifier
            .border(width = 3.dp, color = Color.Red, shape = RoundedCornerShape(topStart = 30.dp, topEnd = 30.dp, bottomStart = 20.dp, bottomEnd = 30.dp))
            .size(400.dp, 50.dp)
            .padding(10.dp)
    )
}

Selectable Text

By default, Text is not selectable. Wrapping it with SelectionContainer enables copy‑and‑paste, while DisableSelection can exclude specific parts.

@Composable
fun MyText() {
    SelectionContainer {
        Column {
            Text("Selectable 1")
            Text("Selectable 2")
            DisableSelection {
                Text("Not selectable 1")
                Text("Not selectable 2")
            }
            Text("Selectable 3")
        }
    }
}

Clickable Text

Adding Modifier.clickable makes a Text respond to taps.

@Composable
fun CounterText() {
    val count = remember { mutableStateOf(0) }
    Text(
        text = "${count.value}",
        fontSize = 75.sp,
        modifier = Modifier
            .clip(RoundedCornerShape(12.dp))
            .background(Color(0xFFC9C0BB))
            .clickable { count.value += 1 }
            .padding(25.dp)
    )
}

For precise character‑level click handling, use ClickableText with an AnnotatedString .

@Composable
fun ClickableDemo() {
    ClickableText(
        text = AnnotatedString(stringResource(R.string.my_text)),
        onClick = { index -> Log.d("ClickableText", "Clicked character $index") }
    )
}

Annotated Strings – Styling Sub‑segments

@Composable
fun StyledText() {
    Text(
        buildAnnotatedString {
            withStyle(SpanStyle(color = Color.Blue, fontWeight = FontWeight.Bold)) { append("Jetpack ") }
            append("Compose ")
            withStyle(SpanStyle(color = Color.Red, fontWeight = FontWeight.Bold, fontSize = 30.sp)) { append("by ") }
            append("依然范特稀西")
        }
    )
}

Practical Example – Clickable Hyperlink Text

Combine ClickableText , AnnotatedString , and pushStringAnnotation to create inline links such as privacy policies.

@Composable
fun PolicyText() {
    val annotated = buildAnnotatedString {
        append("登录即表明同意")
        pushStringAnnotation(tag = "privacy", annotation = "https://privacy.example.com")
        withStyle(SpanStyle(color = Color.Blue, fontWeight = FontWeight.Bold, textDecoration = TextDecoration.Underline)) {
            append("隐私条款")
        }
        pop()
        append("和")
        pushStringAnnotation(tag = "terms", annotation = "https://terms.example.com")
        withStyle(SpanStyle(color = Color.Blue, fontWeight = FontWeight.Bold, textDecoration = TextDecoration.Underline)) {
            append("用户协议")
        }
        pop()
    }
    val tags = listOf("privacy", "terms")
    ClickableText(text = annotated, onClick = { offset ->
        tags.forEach { tag ->
            annotated.getStringAnnotations(tag = tag, start = offset, end = offset)
                .firstOrNull()?.let { Log.d("Link", it.item) }
        }
    })
}

Conclusion

The article covered the full range of Jetpack Compose Text capabilities, from basic string display to advanced styling, selection, click handling, and hyperlink integration, providing Android developers with a solid reference for creating rich textual UI.