Menambah Animasi di Aplikasi Android dengan Lottie Library-Kotlin

Animasi sederhana di aplikasi Android dengan Lottie

Fiqih Firdaus Maulana
5 min readJan 18, 2021
Lottie Kotlin

Halo semuanya, ketemu lagi nih kita, dan itu artinya saya masih mau lanjutin bikin-bikin tulisan kaya gini, hehee. Mungkin lansung kita mulai dari overview sedikit apa yang akan kita bahas kali ini.
Jadi kita akan membahas dan memberikan sedikit contoh, yang lagi-lagi dapat kalian jadikan sebagai referensi belajar maupun sekedar menambah fitur di aplikasi kalian.
Let's go…

Lottie

lotte

Seperti yang ditulis di dokumentasi mereka bahwa, lottie adalah sebuah library untuk Android, IOS, Web, dan Windows yang mem-parsing animasi dari Adobe After Effects kemudian diekspor sebagai json.
Yups, library lottie ini bisa digunakan untuk beberapa platform yang berbeda, mulai dari Android sampai Windows.
Lalu untuk konsep lottie sendiri, sebenarnya adalah Video animasi dari Adobe After Effects yang diekspor menjadi file json, kemudian kita parse kedalam aplikasi kita, bergitu.

Questions

Lalu bagaimana jika kita tidak bisa membuat animasi di after effects?
Tenang, lottie sudah menyediakan semuanya jadi tinggal kita gunakan saja. Ada beberapa animasi-animasi keren yang bisa langsung kalian gunakan tanpa harus membuat animasi sendiri, untuk kumpulan animasi yang bisa kita gunakan ada disini, lalu dokumentasi lottie nya ada disini, dan contoh aplikasi nya ada di story ini hehee.

Apakah semua animasi disana Gratis?
Tidak semua, ada beberapa animasi juga yang berbayar, kembali ke kalian sendiri mau menggunakan yang gratis atau berbayar.

Kalian bisa komentar untuk tanya atau ada yang perlu ditambahkan jika ada yang terlewat.

Kotlin

kotlin

Sudah tau lah yah, kotlin. Yaitu salah satu bahasa pemrograman yang dapat digunakan untuk membuat aplikasi android secara Native, di rilis pada 2016, pada Google I/O 2017 Google memberikan Kotlin dukungan penuh untuk Android mengantikan Java, dan masih banyak lagi.

“Kotlin First”

Required

Ini required untuk contoh aplikasi yang ada di story ini aja ya, jadi nanti kalian bisa ikutan untuk build Aplikasi kalian sendiri.

  1. Animasi format JSON
  2. Dependency Lottie library
  3. Niat untuk coba 🤣

Preparation

Pertama cari beberapa animasi yang ada di https://lottiefiles.com/ lalu kalian download, disini kalian dowload yang format JSON.

Contoh

Kalian cari Animasi untuk Loading, Dashboard, Button, Switch. Atau bisa menggunakan seperti di story ini:

  1. https://lottiefiles.com/935-loading
  2. https://lottiefiles.com/20546-i-stay-at-home
  3. https://lottiefiles.com/6140-touch-gesture-animation
  4. https://lottiefiles.com/34642-button-switch-ui

Sampai disini sudah ada semua animasi nya ya, oke lanjut kalian buat project baru di Android Studio.

Setelah itu buat Android Resource Directory, cara nya dengan klik kanan pada folder res>New>Android Resource Directory, nanti akan membuka pop up baru New Resource Directory kemudian Recource type kalian ganti dengan raw, kemudian OK.

Fungsi directory raw adalah menyimpan file-file mentah yang akan kita gunakan di project, disini kita gunakan untuk menyimpan file Animasi berformat JSON yang kita download tadi.

Selanjutnya ubah nama file yang kalian download tadi menjadi satu kata saja agar mudah memanggil nya nanti di codingan, contoh “loading.json”.
Lalu kalian Copy & Paste ke directory “raw” dengan cara CTRL+C & CTRL+V biasa.

Oke terakhir kita siapkan Activity baru nya, DashboardActivity.

Jika sudah selesai yok lah kita coding, sudah ga sabar kan?

Let’s Code

Skenario nya kita mau membuat aplikasi yang memiliki loading screen menggunakan animasi dari lottie, lalu mengarahkan ke halaman dashboard yang terdapat berapa animasi untuk kita uji coba, hehee.
Gas ya? gas!

implementation 'com.airbnb.android:lottie:3.2.0'

Pertama banget kita tambahkan dependency dari library lottie kedalam aplikasi, di build.gradle (Module)
Menjadi seperti berikut.

Lalu sekarang kita buat dulu splashscreen nya dengan menambahkan kode di bawah ke MainActivity.

Selanjutnya mari kita buat tampilan splashscreen nya dengan menambahkan kode di bawah ke file layout activity_main.xml

Kalian bisa menganti animasi loading nya dengan animasi yang kalian pillih sendiri bebas, dengan merubah nama nya.

app:lottie_rawRes="@raw/NAMA_FILE_ANIMASI_KALIAN"

Oke loading nya sudah, sekarang kita lanjut ke bagian Dashboard nya, kita mulai dari tampilan layout nya di activity_dashboard.xml
Gunakan kode dibawah.

Sampai disini sudah boleh dicoba run project nya, dan lihat bagaimana aplikasinya? Keren bukan.

app:lottie_autoPlay="true"
app:lottie_loop="true"

Ada dua atribut penting disini, “lottie_autoPlay” yang berfungsi agar animasi bisa otomatis bergerak, dan “lottie_loop” agar animasi begerak secara terus menerus, karena animasi sendiri bergerak dari frame ke frame, jika tidak di looping maka akan selesai ketika sudah sampai di frame terakhir.

Oke, sekarang mari kita coba eksperimen lagi dengan Animasinya.
Kalian tambahkan kode dibawah ke DashboardActivity

lalu hapus dua atribut ini yang ada di activity_dashboard.xml, sehingga layout activity_dashboard.xml menjadi seperti ini

app:lottie_autoPlay="true"
app:lottie_loop="true"

Kita tadi menggunakan beberapa fungsi yang ada di LottieAnimationView untuk mengatur frame ke berapa animasi mulai, reverse, dan memulai animasi jika di klik.

setSpeed(float)

/**
* Sets the playback speed. If speed < 0, the animation will play backwards.
*/
public void setSpeed(float speed) {
lottieDrawable.setSpeed(speed);
}

setMinProgress(float)

/**
*
@see #setMinProgress(float)
*
@see #setMaxProgress(float)
*/
public void setMinAndMaxProgress(
@FloatRange(from = 0f, to = 1f) float minProgress,
@FloatRange(from = 0f, to = 1f) float maxProgress) {
lottieDrawable.setMinAndMaxProgress(minProgress, maxProgress);
}

playAnimation()

/**
* Plays the animation from the beginning. If speed is < 0, it will start at the end
* and play towards the beginning
*/
@MainThread
public void playAnimation() {
if (isShown()) {
lottieDrawable.playAnimation();
enableOrDisableHardwareLayer();
} else {
wasAnimatingWhenNotShown = true;
}
}

Sudah boleh di run lagi.

Output

Akhir Kata

Huhh, sudah sampai akhir aja tenyata, okelah jadi Aplikasi kita sudah jadi nih, dan masih bisa di kembangkan lagi tentunya. Lalu untuk yang baca sampai bawah sini, kalian the best 😍
Terima kasih ya, dan semoga bermanfaat, jika suka dengan tulisan ini, kasih Clap kalian dibawah atau disamping, support dari kalian untuk story selanjutnya, and feel free to ask me. 😉

--

--