Animate Text Appearance with Icon in Jetpack Compose

Hey there, Jetpack Compose enthusiasts! This blog post dives into a custom composable function we can all use to add a touch of flair to our apps: RevealTextWithIcon.

This nifty composable lets you present text content alongside an icon, with a cool reveal animation that brings them both into view. Imagine the text fading in smoothly as the icon slides into its position — it’s a great way to grab user attention and enhance the overall experience.

Unveiling the Code

Let’s take a closer look at the code for our RevealTextWithIcon composable:

/**
 * Reveal Text with Icon
 *
 * @param text Text to reveal
 * @param icon Icon to show
 * @param textStyle Text Style
 * @param iconSize Size of the Icon
 * @param spacing Spacing between Icon and Text
 */
@Composable
fun RevealTextWithIcon(
    modifier: Modifier = Modifier,
    text: String,
    icon: Painter,
    textStyle: TextStyle = TextStyle(
        fontSize = 24.sp,
        color = Color.Black
    ),
    iconSize: Dp = 64.dp,
    spacing: Dp = 8.dp,
) {
    val density = LocalDensity.current

    val textMeasurer = rememberTextMeasurer()

    var isRevealed by remember { mutableStateOf(false) }

    // Calculate Text Layout Result
    val textLayoutResult by remember(text, textStyle) {
        mutableStateOf(
            textMeasurer.measure(
                text = text,
                style = textStyle
            )
        )
    }

    // Calculate Canvas Size
    val canvasSize by…