Animated vector images in Compose

bookmark_border Stay organized with collections Save and categorize content based on your preferences.

Animating vectors in Compose is possible in a few different ways. You can use any of the following:

• AnimatedVectorDrawable file format
• ImageVector with Compose animation APIs, like in this Medium article
• A third-party solution like Lottie

Animated vector drawables (experimental)

To use an AnimatedVectorDrawable resource, load up the drawable file using animatedVectorResource and pass in a boolean to switch between the start and end state of your drawable, performing the animation.

@Composable
fun AnimatedVectorDrawable() {
    val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
    var atEnd by remember { mutableStateOf(false) }
    Image(
        painter = rememberAnimatedVectorPainter(image, atEnd),
        contentDescription = "Timer",
        modifier = Modifier.clickable {
            atEnd = !atEnd
        },
        contentScale = ContentScale.Crop
    )
}
AnimationSnippets.kt

For more information about the format of your drawable file, see Animate drawable graphics.