Text composable in Android Kotlin - Deep Dive

Overview - Text composable

What is it?

The Text composable is a basic building block in Jetpack Compose used to display text on the screen. It lets you show words, sentences, or paragraphs with different styles and sizes. You can customize its appearance easily, like changing color, font, or alignment. It is the simplest way to add readable content in a Compose UI.

Why it matters

Without the Text composable, apps would struggle to show any readable information to users. Text is how apps communicate messages, labels, instructions, and data. The Text composable solves the problem of displaying styled text efficiently and consistently across different screen sizes and devices. Without it, developers would have to build complex text rendering from scratch.

Where it fits

Before learning Text composable, you should understand basic Jetpack Compose setup and how composables work. After mastering Text, you can learn about more complex text features like AnnotatedString for rich text, TextField for user input, and custom text layouts. Text composable is a foundation for all text-related UI in Compose.

Mental Model

Core Idea

Text composable is a simple, reusable UI element that displays styled text content in Jetpack Compose.

Think of it like...

Think of the Text composable like a label on a jar. Just as a label shows what’s inside the jar clearly and attractively, the Text composable shows words on the screen clearly and nicely.

┌─────────────────────────────┐
│        Text Composable       │
├─────────────┬───────────────┤
│ Content     │ "Hello World"│
│ Style       │ Color, Font   │
│ Layout      │ Alignment     │
└─────────────┴───────────────┘

Build-Up - 6 Steps

1

Foundation

Displaying simple text content

Concept: Learn how to show plain text on the screen using the Text composable.

Use Text("Hello, Jetpack Compose!") inside a composable function to display text. This is the simplest way to add readable content.

Result

The app screen shows the phrase "Hello, Jetpack Compose!" in default style.

Understanding that Text composable is the basic way to show any text helps you start building UI with readable content.

2

Foundation

Customizing text appearance

Concept: Learn how to change text color, font size, and style using parameters.

Text("Welcome", color = Color.Blue, fontSize = 20.sp, fontWeight = FontWeight.Bold) changes the text color to blue, size to 20sp, and makes it bold.

Result

The text "Welcome" appears in blue, bold, and larger font on the screen.

Knowing how to style text lets you make your UI more attractive and readable.

3

Intermediate

Text alignment and max lines

🤔Before reading on: do you think Text composable can limit lines and align text inside its container? Commit to your answer.

Concept: Learn to control how text aligns and how many lines it can use.

Text("Long text here", textAlign = TextAlign.Center, maxLines = 2) centers the text and limits it to two lines, truncating if longer.

Result

Text is centered horizontally and does not overflow beyond two lines.

Controlling alignment and line limits helps keep UI clean and prevents text from breaking layouts.

4

Intermediate

Using AnnotatedString for rich text

🤔Before reading on: can you guess if Text composable supports multiple styles in one text block? Commit your guess.

Concept: Learn to display text with multiple styles in one string using AnnotatedString.

val annotated = buildAnnotatedString { append("Hello ") withStyle(style = SpanStyle(color = Color.Red)) { append("World") } } Text(annotated) shows 'Hello' normal and 'World' in red.

Result

Text shows mixed styles in one line, with part colored differently.

Knowing AnnotatedString unlocks powerful text styling beyond uniform appearance.

5

Advanced

Handling overflow and soft wrapping

🤔Before reading on: do you think Text composable automatically wraps text or cuts it off? Commit your answer.

Concept: Learn how to control text overflow behavior and wrapping with overflow and softWrap parameters.

Text("Very long text...", maxLines = 1, overflow = TextOverflow.Ellipsis, softWrap = false) shows one line with '...' if text is too long.

Result

Text truncates with ellipsis instead of wrapping or overflowing.

Understanding overflow control prevents UI breakage and improves user experience with long text.

6

Expert

Performance and recomposition considerations

🤔Before reading on: do you think changing text parameters always causes full UI redraw? Commit your prediction.

Concept: Learn how Text composable handles recomposition efficiently and how to avoid unnecessary redraws.

Text is a lightweight composable that only redraws when its parameters change. Using remember and stable parameters helps optimize performance in large lists.

Result

Apps remain smooth even with many Text composables updating frequently.

Knowing how Compose optimizes Text recomposition helps build performant apps and avoid lag.

Under the Hood

Text composable uses the underlying Android text rendering system but wraps it in Compose's declarative UI model. When you call Text, Compose creates a layout node that measures and draws the text using native APIs. Compose tracks parameters and only recomposes Text when inputs change, minimizing work. Styling is applied via SpanStyles inside AnnotatedString or simple parameters.

Why designed this way?

Jetpack Compose was designed to be declarative and efficient. Text composable abstracts complex text rendering into a simple function call, letting developers focus on UI logic. Using native text APIs ensures performance and compatibility. The design balances ease of use with flexibility for advanced styling.

┌───────────────┐
│ Text Composable│
├───────────────┤
│ Input Params  │
│ (String, Style)│
├───────────────┤
│ Compose UI    │
│ Framework     │
├───────────────┤
│ Native Text   │
│ Renderer      │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does Text composable automatically wrap text by default? Commit yes or no.

Common Belief: Text composable always wraps text automatically without extra settings.

Reality: Text composable wraps text by default, but this can be controlled with softWrap and maxLines parameters.

Why it matters: Assuming automatic wrapping always happens can cause layout bugs when text overflows unexpectedly.

Quick: Can you style parts of a Text composable by passing multiple style parameters? Commit your answer.

Common Belief: You can pass multiple style parameters to Text to style different parts separately.

Reality: Text composable accepts one style parameter; to style parts differently, you must use AnnotatedString.

Why it matters: Misunderstanding this leads to frustration when trying to style text partially and failing.

Quick: Does changing text color in Text composable cause the entire UI to recompose? Commit yes or no.

Common Belief: Changing text color causes a full UI recomposition and slows the app.

Reality: Compose only recomposes the Text composable itself when parameters change, not the whole UI tree.

Why it matters: Knowing this prevents premature optimization and helps focus on real performance bottlenecks.

Quick: Is Text composable suitable for user input fields? Commit yes or no.

Common Belief: Text composable can be used for user input since it shows text.

Reality: Text composable is for display only; TextField composable is designed for user input.

Why it matters: Using Text instead of TextField for input breaks expected behavior and accessibility.

Expert Zone

1

Text composable's performance depends heavily on stable parameters; using unstable objects causes unnecessary recompositions.

2

AnnotatedString allows embedding clickable spans and custom gestures, enabling rich interactive text beyond simple display.

3

Text composable integrates with Compose's semantics system for accessibility, but developers must provide meaningful content descriptions manually when needed.

When NOT to use

Avoid using Text composable for editable or selectable text; use TextField or SelectionContainer instead. For very complex text layouts or animations, consider custom layout composables or Android Views integration.

Production Patterns

In production, Text composable is often combined with theming for consistent styles, used inside LazyColumn for lists, and paired with state management to update text dynamically. Developers also use AnnotatedString for inline links and styled messages.

Connections

Declarative UI

Text composable is a core example of declarative UI pattern in mobile development.

Understanding Text composable helps grasp how declarative UI frameworks describe UI as functions of state.

Accessibility

Text composable connects to accessibility by providing readable content that screen readers can interpret.

Knowing how Text works with semantics improves app usability for users with disabilities.

Typography in Graphic Design

Text composable styling parallels typography principles in graphic design, like font choice and alignment.

Recognizing typography concepts helps create visually appealing and readable app text.

Common Pitfalls

#1 Text overflows container without wrapping or truncation.

Wrong approach:

Text("Very long text that does not fit")

Correct approach:

Text("Very long text that does not fit", maxLines = 1, overflow = TextOverflow.Ellipsis)

Root cause:

Not setting maxLines and overflow causes text to overflow and break layout.

#2 Trying to style parts of text by passing multiple style parameters.

Wrong approach:

Text("Hello World", color = Color.Red, fontWeight = FontWeight.Bold, fontSize = 20.sp) // expects partial styling

Correct approach:

val annotated = buildAnnotatedString {
withStyle(SpanStyle(color = Color.Red)) { append("Hello") }
append(" World")
}
Text(annotated)

Root cause:

Misunderstanding that Text accepts only one style parameter for entire text.

#3 Using Text composable for user input fields.

Wrong approach:

Text(text = userInput)

Correct approach:

TextField(value = userInput, onValueChange = { newText -> ... })

Root cause:

Confusing display-only Text with interactive TextField.

Key Takeaways

Text composable is the fundamental way to display styled text in Jetpack Compose.

You can customize text appearance with parameters like color, font size, and alignment.

For multiple styles in one text block, use AnnotatedString with Text composable.

Control text overflow and wrapping to keep your UI clean and readable.

Text composable is optimized for performance and only recomposes when inputs change.

Practice

1. What is the main purpose of the Text composable in Jetpack Compose?

easy

A. To display text on the screen

B. To create buttons

C. To handle user input

D. To manage app navigation

Solution

1. Step 1: Understand the role of Text composable

   The Text composable is designed to show words or sentences visibly on the app screen.

2. Step 2: Compare with other UI elements

   Buttons handle clicks, input fields take user input, and navigation manages screen changes, so these are not the Text composable's job.

3. Final Answer:

   To display text on the screen -> Option A

4. Quick Check:

   Text composable = display text [OK]

Hint: Text composable always shows text content [OK]

Common Mistakes:

• Confusing Text with Button composable
• Thinking Text handles user input
• Assuming Text manages navigation

2. Which of the following is the correct syntax to display the text "Hello World" using the Text composable?

easy

A. Text: "Hello World"

B. Text(content = "Hello World")

C. Text("Hello World")

D. Text { "Hello World" }

Solution

1. Step 1: Recall Text composable syntax

   The Text composable accepts the text content as the first positional parameter.

2. Step 2: Check each option

   A uses invalid colon syntax. B correctly uses positional argument Text("Hello World"). C uses invalid content parameter. D uses lambda syntax which is incorrect for Text.

3. Final Answer:

   Text("Hello World") -> Option C

4. Quick Check:

   Text("string") = positional first arg [OK]

Hint: Use Text("your text") for simple display [OK]

Common Mistakes:

• Using content= parameter name
• Using colon instead of parentheses
• Trying to pass text inside braces

3. What will be displayed on the screen when this code runs?

Text(text = "Welcome", fontSize = 24.sp, color = Color.Red)

medium

A. The word "Welcome" in default color and size

B. The word "Welcome" in red color with font size 24 sp

C. An error because fontSize is not a valid parameter

D. The word "Welcome" in blue color with font size 24 sp

Solution

1. Step 1: Understand parameters used

   The fontSize parameter sets the text size, and color sets the text color. Both are valid for Text composable.

2. Step 2: Analyze the values

   Font size is 24.sp (scaled pixels), color is Color.Red, so text appears red and sized 24 sp.

3. Final Answer:

   The word "Welcome" in red color with font size 24 sp -> Option B

4. Quick Check:

   fontSize and color change text appearance [OK]

Hint: fontSize and color change text look visibly [OK]

Common Mistakes:

• Assuming default color is applied ignoring color param
• Thinking fontSize is invalid
• Confusing color values

4. Identify the error in this Text composable code:

Text(text = Hello World)

medium

A. fontSize parameter is required

B. Incorrect parameter name, should be content instead of text

C. Text composable cannot display multiple words

D. Missing quotes around the string "Hello World"

Solution

1. Step 1: Check string syntax

   In Kotlin, string literals must be enclosed in double quotes. Here, "Hello World" is missing quotes.

2. Step 2: Validate parameter name and requirements

   The parameter name text is correct. Text composable can display multiple words. fontSize is optional.

3. Final Answer:

   Missing quotes around the string "Hello World" -> Option D

4. Quick Check:

   Strings need quotes in Kotlin [OK]

Hint: Always put text strings inside double quotes [OK]

Common Mistakes:

• Forgetting quotes around text
• Using wrong parameter names
• Thinking fontSize is mandatory

5. You want to display a greeting message that changes color based on a Boolean variable isMorning. Which code correctly uses the Text composable to show "Good Morning" in green if isMorning is true, otherwise "Good Evening" in blue?

hard

A. Text(text = if (isMorning) "Good Morning" else "Good Evening", color = if (isMorning) Color.Green else Color.Blue)

B. Text(text = "Good Morning" or "Good Evening", color = Color.Green or Color.Blue)

C. Text(text = "Good Morning" && "Good Evening", color = Color.Green && Color.Blue)

D. Text(text = isMorning ? "Good Morning" : "Good Evening", color = isMorning ? Color.Green : Color.Blue)

Solution

1. Step 1: Understand Kotlin conditional expressions

   Kotlin uses if (condition) value1 else value2 for inline conditions, not the ternary operator.

2. Step 2: Analyze each option

   Text(text = if (isMorning) "Good Morning" else "Good Evening", color = if (isMorning) Color.Green else Color.Blue) correctly uses Kotlin's if-else expressions for both text and color. Text(text = "Good Morning" or "Good Evening", color = Color.Green or Color.Blue) uses invalid syntax with 'or'. Text(text = "Good Morning" && "Good Evening", color = Color.Green && Color.Blue) uses '&&' which is logical AND, not for choosing values. Text(text = isMorning ? "Good Morning" : "Good Evening", color = isMorning ? Color.Green : Color.Blue) uses ternary operator syntax which Kotlin does not support.

3. Final Answer:

   Text(text = if (isMorning) "Good Morning" else "Good Evening", color = if (isMorning) Color.Green else Color.Blue) -> Option A

4. Quick Check:

   Kotlin uses if-else, not ?: for inline conditions [OK]

Hint: Use Kotlin if-else, not ?:, for inline conditions [OK]

Common Mistakes:

• Using ?: ternary operator syntax
• Using logical operators instead of conditions
• Trying to combine strings or colors with 'or' or '&&'