Lottie + Jetpack Compose

Issue

How can I use combination of Lottie json animation and Jetpack Compose UI in Android? I already tried AndroidView(resId = R.layout.animation) where is com.airbnb.lottie.LottieAnimationView with field lottie_rawRes but is it the best way?

Solution

As of compose version alpha05, Lottie seems to be working fine:

@Composable
fun CustomView(modifier: Modifier = Modifier
        .fillMaxWidth()) {
    val visibility = remember { mutableStateOf(0) }
    val context = ContextAmbient.current
    val customView = remember { LottieAnimationView(context) }
    // Adds view to Compose
    AndroidView({ customView }) { view ->
        // View's been inflated - add logic here if necessary
        with(view) {
            setAnimation(R.raw.choose)
            playAnimation()
            repeatMode = LottieDrawable.INFINITE
            foregroundGravity = Gravity.CENTER
        }
    }
}

 

Answered By - Ziv Kesten