Composables and modifiers

Building blocks

A Compose screen is a tree of composables. You combine small built-in ones into your own, the same way you combine words into sentences. Here are the ones you will use every day:

@Composable
fun ProductRow() {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(
            painter = painterResource(R.drawable.tiffin),
            contentDescription = "Steel tiffin box",
            modifier = Modifier.size(64.dp),
        )
        Column(Modifier.padding(start = 12.dp)) {
            Text("Steel tiffin box", style = MaterialTheme.typography.titleMedium)
            Text("Rs 349", color = MaterialTheme.colorScheme.primary)
        }
        Spacer(Modifier.weight(1f))
        IconButton(onClick = { /* add to cart */ }) {
            Icon(Icons.Default.Add, contentDescription = "Add to cart")
        }
    }
}

Modifiers

Almost every composable has a modifier parameter. A Modifier is built by chaining functions: Modifier.fillMaxWidth().padding(16.dp).background(Color.White). Each function adds one decoration or behaviour. Common ones: size, width, height, fillMaxWidth, fillMaxSize, padding, background, border, clip (round the corners), clickable, and weight (inside Row/Column).

Order matters

// Padding OUTSIDE the background: the coloured box is smaller, with a gap around it
Text("A", Modifier.padding(16.dp).background(Color.Yellow))

// Padding INSIDE the background: the coloured box is bigger, with space around the text
Text("B", Modifier.background(Color.Yellow).padding(16.dp))

// Clickable area: only the inner area responds here
Text("C", Modifier.padding(16.dp).clickable { })

By convention, every reusable composable you write takes modifier: Modifier = Modifier as a parameter and passes it to its outermost element. The caller can then add padding or size from outside without you changing the composable, exactly like the built-in ones.

dp and sp

Phones have very different pixel densities. dp (density-independent pixels) are a unit that looks about the same physical size on every screen; use it for sizes, padding and spacing. sp (scale-independent pixels) are like dp but also grow when the user increases the font size in system settings; use it for text sizes. Never use raw pixels for layout.

Content descriptions

contentDescription describes an image or icon for screen readers such as TalkBack, which blind and low-vision users rely on. Describe meaningful images ("Add to cart"); pass null for purely decorative ones. This is also checked by Play's pre-launch accessibility report.

Common mistakes

• Getting modifier order wrong, for example clickable before padding when you wanted the whole padded area clickable. Put clickable first in that case.
• Hard-coding colours like Color.Red everywhere. Use MaterialTheme.colorScheme so dark mode and branding work (module 9).
• Using dp for text size. Use sp so text follows the user's font setting.
• Leaving out contentDescription on icon buttons, which makes them unusable with a screen reader.