Text, Button and Icon
Sprout's plant screen needs a title, a "Water" button with a drop icon, and a way for screen-reader users to understand every part. Three composables do almost all of it: Text, Button and Icon.
The rule
Text shows, Button does, Icon hints; every icon says what it means.
Text displays a string. Style it from the theme so it stays consistent:
Text(text = plant.name, style = MaterialTheme.typography.titleLarge)Button takes an onClick lambda, and its label is not a parameter but a content slot: a trailing lambda where you place other composables.
Button(onClick = { count++ }) {
Icon(Icons.Filled.WaterDrop, contentDescription = null)
Spacer(Modifier.width(8.dp))
Text("Water")
}Button lays its content out in a row, so the icon and word sit side by side. Variants such as OutlinedButton and TextButton work the same way.
Icon draws a symbol, often from Icons.Filled or Icons.Outlined. Its contentDescription is what screen readers such as TalkBack announce:
- If the icon carries meaning alone, describe it:
"Water plant". - If nearby text already says it, pass
null, so it is not read twice.
For a tappable icon without a label, wrap it in IconButton, and then the description is required.
The shortcut
For each element, ask "does it show, do, or hint?", then "would a blind user know what it is?"
The name
It shows →
TextwithtitleLargestyle.
Drills
Answer fast — trust the rule.
Where does a Button's label go?
An icon sits next to the word "Water" inside a button. What should its contentDescription be?
An IconButton shows only a trash-can icon. What must its Icon have?
Where should you get a text style like titleLarge from?
Remember
- Text shows, Button does, Icon hints; every icon says what it means.
- Button content is a slot: put Icon and Text inside it.
- Describe icons that stand alone; use
nullfor decorative ones.