drawBehind, drawWithContent, and border
Draw modifiers attach custom rendering to any composable. Modifier.drawBehind paints under the content, Modifier.drawWithContent lets you sequence drawing around drawContent(), and Modifier.border strokes a shaped outline.
drawBehind paints a highlight bar under a label.
val accent = MaterialTheme.colorScheme.primary
Text(
text = "Highlighted",
modifier = Modifier
.drawBehind {
drawLine(
color = accent,
start = Offset(0f, size.height),
end = Offset(size.width, size.height),
strokeWidth = 6f,
cap = StrokeCap.Round
)
}
.padding(bottom = 4.dp)
)drawWithContent tints over the content; border strokes a shaped edge.
Text(
text = "Tinted",
modifier = Modifier
.border(2.dp, MaterialTheme.colorScheme.outline, RoundedCornerShape(8.dp))
.padding(8.dp)
.drawWithContent {
drawContent()
drawRect(Color(0x223F51B5))
}
)