Tutorial Android — Lottie dengan Jetpack Compose

Pada tulisan kali ini saya akan membuat tutorial penggunaan Lottie dengan menggunakan Jetpack Compose di Android Studio.

Apa itu Jetpack Compose ? saya sudah membuat tutorial terkait pengenalan awal tentang Jetpack Compose pada link ini :

Tutorial Android — Berkenalan dengan Jetpack Compose

Dan saya juga sudah pernah menulis tentang penggunaan lottie dengan XML pada artikel ini :

Tutorial Android — Menggunakan Animasi Dari LottieFiles

Pada tutorial ini saya sudah menggunakan Gradle Version Catalog,

Untuk implementasi, pertama tambahkan library dari lottie untuk jetpack compose.

Tambahkan code berikut pada “libs.version.toml”

[versions]
...
lottie-compose = "6.0.0"


[libraries]
...
lottie-compose = { module = "com.airbnb.android:lottie-compose", version.ref = "lottie-compose" }

Lalu pada build.gradle(module)

tambahkan code berikut :

implementation(libs.lottie.compose)

Saya sudah menjelaskan terkait Gradle Version Catalog pada tutorial berikut :

Tutorial Android — Jetpack Compose Pagination MVVM

Untuk menambahkan lottie pada Jetpack Compose yang dilakukan pertama adalah buat Composable function seperti berikut

@Composable
fun AnimatedPreloader(modifier: Modifier = Modifier, lottie_image: LottieComposition?) {

    val preloaderProgress by animateLottieCompositionAsState(
        composition = lottie_image,
        iterations = LottieConstants.IterateForever,
        isPlaying = true
    )
    
    LottieAnimation(composition = lottie_image, modifier = modifier, progress = preloaderProgress)
}

Lalu panggil function tersebut pada screen yang ingin ditampilkan Lottie Animation seperti berikut :

val lottie_file by rememberLottieComposition(
    spec = LottieCompositionSpec.RawRes(R.raw.tahapan)
)
AnimatedPreloader(
    lottie_image = lottie_file, modifier = Modifier
        .fillMaxWidth()
        .size(180.dp)
)

Sekian artikel dari saya.

Selamat Belajar.

Untuk dokumentasi dari lottie untuk jetpack compose terdapat pada link berikut

lottie/android-compose.md at master · airbnb/lottie

Keep in touch!

https://www.fajarsodik.github.io

https://www.linkedin.com/in/m-fajarsodik/

Jika menyukai konten ini dan mau mensupport:

https://saweria.co/mfajars