Start native apps faster with the Composables CLI ->
Compose Component

FadingExpandingLabel

Animates label text for which the number of lines can vary, changing the size of the container component.

FadingExpandingLabel social preview

FadingExpandingLabelButtonSample

@Composable
fun FadingExpandingLabelButtonSample() {
    var text by remember { mutableStateOf("Line of Text One.") }
    var lines by remember { mutableIntStateOf(1) }
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Button(
            onClick = {
                lines = lines % 3 + 1
                text =
                    (1..lines).joinToString(separator = "\n") {
                        when (it) {
                            1 -> "Line of Text One."
                            2 -> "Line of Text Two."
                            else -> "Line of Text Three."
                        }
                    }
            },
            modifier = Modifier.fillMaxWidth(),
            label = { FadingExpandingLabel(text = text, textAlign = TextAlign.Left) },
        )
    }
}

Last updated: