Text and the Modifier System — Android Course

What you'll learn

Two things shape almost every composable: how you style it and the Modifier you attach. Modifiers are Compose's universal system for size, spacing, background, borders, click handling, and much more — learn them once and use them everywhere.

By the end you'll be able to:

Style Text with colour, size, and weight
Explain what a Modifier is and how it chains
Use the most common modifiers
Understand why modifier order matters

Styling Text

Text accepts styling parameters directly: color, fontSize (measured in sp), fontWeight, fontStyle, and textAlign. For richer or reusable styling you can pass a whole TextStyle, and later you'll pull styles from MaterialTheme.typography:

StyledText.kt

Text(
    text = "Hello Compose",
    color = Color.White,
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold,
    modifier = Modifier
        .background(Color(0xFF6366F1))
        .padding(horizontal = 20.dp, vertical = 12.dp)
)

9:41

Hello Compose

Styled Text — how this renders on a device

Note

Android uses two sizing units. sp (scale-independent pixels) is for font sizes — it respects the user's system font-size setting, an accessibility win. dp (density-independent pixels) is for everything else — padding, sizes, spacing — so layouts look consistent across screen densities. Use sp for text, dp for space.

The Modifier system

Almost every composable takes a modifier parameter. A Modifier is a chainable list of instructions that decorate or configure the composable — its size, padding, background, border, whether it's clickable, and more. You build one by chaining calls onto Modifier, and each call returns a new Modifier so they read top to bottom.

Key idea

Always accept a modifier: Modifier = Modifier parameter in your own composables and pass it to the root element inside. This lets callers size and position your component from the outside — it's the single most important convention for writing reusable composables.

Common modifiers

You'll reach for these constantly:

Modifier	Does
`.padding(16.dp)`	Adds space around the content (inside)
`.fillMaxWidth()`	Stretches to the full available width
`.size(48.dp)`	Sets a fixed width and height
`.background(color)`	Draws a background colour or shape
`.clip(shape)`	Clips content to a shape (e.g. rounded corners)
`.clickable { }`	Makes the composable respond to taps

Order matters

Modifiers apply in the order you chain them, and that order changes the result — a common source of surprise for beginners. Compare padding before and after a background:

Order.kt

// padding THEN background: the background fills the padded area
Modifier.padding(16.dp).background(Color.Yellow)

// background THEN padding: the padding sits OUTSIDE the background
Modifier.background(Color.Yellow).padding(16.dp)

Watch out

Because modifiers are applied outside-in as you read down the chain, .padding().background() and .background().padding() look different: in the first, the background covers the padding; in the second, the padding pushes the content in from the background's edge. When spacing looks off, check your modifier order first.

Recap & quick check

Key takeaways

Text takes styling params: color, fontSize (sp), fontWeight, fontStyle, textAlign.
Use sp for font sizes (respects user settings) and dp for spacing and sizes.
A Modifier is a chainable set of instructions for size, spacing, background, clicks, and more.
Accept modifier: Modifier = Modifier in your composables and pass it to the root — key for reuse.
Modifier order matters: .padding().background() differs from .background().padding().

Quick check

1. Which unit should you use for font sizes?

2. What is a Modifier?

3. Which modifier makes a composable stretch to the full width?

4. Why accept modifier: Modifier = Modifier in your composables?

5. Does .padding().background() look the same as .background().padding()?

You can style and size anything now. Next we arrange composables into real screens with Column, Row, and Box.