FadingExpandingLabel

Functions summary

Unit
@Composable
FadingExpandingLabel(
    text: String,
    modifier: Modifier,
    color: Color,
    fontSize: TextUnit,
    fontStyle: FontStyle?,
    fontWeight: FontWeight?,
    fontFamily: FontFamily?,
    letterSpacing: TextUnit,
    textDecoration: TextDecoration?,
    textAlign: TextAlign?,
    lineHeight: TextUnit,
    softWrap: Boolean,
    maxLines: Int,
    minLines: Int,
    textStyle: TextStyle,
    animationSpec: FiniteAnimationSpec<Float>
)

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

Functions

FadingExpandingLabel

@Composable
fun FadingExpandingLabel(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = LocalTextConfiguration.current.textAlign,
    lineHeight: TextUnit = TextUnit.Unspecified,
    softWrap: Boolean = true,
    maxLines: Int = LocalTextConfiguration.current.maxLines,
    minLines: Int = 1,
    textStyle: TextStyle = LocalTextStyle.current,
    animationSpec: FiniteAnimationSpec<Float> = FadingExpandingLabelDefaults.animationSpec
): Unit

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

Displays the given string in a Text, with an animation that fades text in line by line when new lines of text are added or removed. This is intended to be be used for labels in a Button or Card, where we want the container to expand to fit the contents when the lines of the text change.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.FadingExpandingLabel

var text by remember { mutableStateOf("Text Text Text Text") }
var lines by remember { mutableIntStateOf(1) }

Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Button(
        onClick = {
            lines = lines % 3 + 1
            text = (1..lines).joinToString(separator = " ") { "Text Text Text Text" }
        },
        modifier = Modifier.fillMaxWidth(),
        label = { FadingExpandingLabel(text = text, textAlign = TextAlign.Left) },
    )
}
Parameters
text: String

Text string that will be shown.
modifier: Modifier = Modifier

Modifier to be applied to the animated text.
color: Color = Color.Unspecified

Color to apply to the text. If Color.Unspecified, and textStyle has no color set,this will be LocalContentColor.
fontSize: TextUnit = TextUnit.Unspecified

The size of glyphs to use when painting the text. See TextStyle.fontSize.
fontStyle: FontStyle? = null

The typeface variant to use when drawing the letters (e.g., italic). See TextStyle.fontStyle.
fontWeight: FontWeight? = null

The typeface thickness to use when painting the text (e.g., FontWeight.Bold).
fontFamily: FontFamily? = null

The font family to be used when rendering the text. See TextStyle.fontFamily.
letterSpacing: TextUnit = TextUnit.Unspecified

The amount of space to add between each letter. See TextStyle.letterSpacing.
textDecoration: TextDecoration? = null

The decorations to paint on the text (e.g., an underline). See TextStyle.textDecoration.
textAlign: TextAlign? = LocalTextConfiguration.current.textAlign

The alignment of the text within the lines of the paragraph. See TextStyle.textAlign.
lineHeight: TextUnit = TextUnit.Unspecified

Line height for the androidx.compose.ui.text.Paragraph in TextUnit unit, e.g. SP or EM. See TextStyle.lineHeight.
softWrap: Boolean = true

Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If softWrap is false, TextAlign may have unexpected effects.
maxLines: Int = LocalTextConfiguration.current.maxLines

An optional maximum number of lines for the text to span, wrapping if necessary. If it is not null, then it must be greater than zero.
minLines: Int = 1

The minimum height in terms of minimum number of visible lines. It is required that 1 <= minLines<= maxLines.
textStyle: TextStyle = LocalTextStyle.current

TextStyle for the animated text.
animationSpec: FiniteAnimationSpec<Float> = FadingExpandingLabelDefaults.animationSpec

Animation spec for the text fade animation.