Beranda
Android Programming

[Android] Cara Mudah Membuat Loading Animation Dengan Custom Dialog Dan Lottie Pada Android


Animasi Loading menurut penulis diperlukan saat sebuah aplikasi melakukan proses yang membutuhkan waktu rata - rata lebih dari 4 detik. Hal ini agar user(pengguna aplikasi) tau bahwa proses sedang berjalan, jika rata - rata dibawah 4 detik menurut penulis tidak perlu adanya animasi loading karena animasi lebih sering terlewat (skipped).  SDK Android sebetulnya sudah menyediakan animasi loading yang berada pada komponen ProgressBar.

   Saat ini ternyata ada cara mudah membuat animasi loading selain dengan ProgressBar yaitu dengan cara menggunakan SDK dari Lottie. SDK Lottie menyediakan banyak sekali animasi yang bisa dimanfaatkan untuk membuat berbagai komponen android lain beranimasi namun pada artikel ini akan fokus pada pemanfaatan SDK Lottie untuk membuat animasi loading.

   Animasi loading yang akan dibahas pada artikel ini adalah animasi loading model PopUp Dialog. Biasanya penulis manfaatkan saat mengakses API yang memiliki respons time rata - rata lebih dari 2 detik, karena jika ditotal dengan kemukinan terburuk proses pada android untuk melaukan request dan menerima request rata - ratanya menjadi 4 detik atau lebih. Cara mudah menentukan proses tersebut perlu animasi loading atau tidak adalah coba dan test berkali - kali proses tersebut. Jika proses sering terasa lama maka lebih baik diberikan animasi loading agar user tidak mengira kalau aplikasi freeze / nge-hang.

   Projek yang menjadi contoh pada artikel ini menggunakan pattern MVC Bahasa Java dan ViewBinding. PopUp Dialog dibuat dengan kelas Custom hasil memodifikasi kelas Dialog.java milik SDK Android. PopUp Dialog ini sebetulnya bisa dibuat langsung lewat activity namun dibuat menjadi kelas custom agar bisa Reusable. Reusable adalah prinsip penting dalam Object Oriented Programming, agar sebuah paket View dapat digunakan berulang untuk kondisi serupa.

Persiapan

1.
Cari animasi yang akan digunakan di Lottie. Animasi yang penulis gunakan adalah animasi preloader ini, untuk mengunduhnya pilih Download JSON.
2.
Tambahkan pada build.gradle 
implementation 'com.airbnb.android:lottie:3.4.0'
3.
Buat folder raw pada folder res dan pastekan file JSON yang sudah diunduh ke folder ini.

FOLDER RAW


Eksekusi

Buat Layout Dialog. 
Penulis menamainya view_loading_dialog.xml kode dibawah ini
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:background="@android:color/white"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        app:cardCornerRadius="20dp">
    <LinearLayout
            android:orientation="vertical"
            android:padding="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

        <com.airbnb.lottie.LottieAnimationView
                android:layout_width="@dimen/_100sdp"
                android:layout_height="@dimen/_90sdp"
                android:layout_gravity="center_horizontal"
                android:id="@+id/loading_animation"
                app:lottie_rawRes="@raw/loading_animation"
                app:lottie_autoPlay="true"
                app:lottie_loop="true"/>

        <TextView
                android:id="@+id/dialog_loading_pesan"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text=""/>

    </LinearLayout>
</androidx.cardview.widget.CardView>
Opsi pada SDK Lottie
1. Memanggil File JSON
app:lottie_rawRes="@raw/loading_animation"

2. AutoPlay
Jika animasi tidak diputar otomatis misalkan user harus klik sesuatu agar animasi berjalan maka set False
app:lottie_autoPlay="true"

3. Loop
Digunakan agar animasi berjalan tanpa henti contoh kasus adalah untuk animasi loading ini. Jika animasi karena trigger dan hanya sesaat contoh animasi Like / Love pada Facebook / Instagram set False.
app:lottie_loop="true"


Buat Kelas Custom Dialog
Penulis menamainya ViewLoadingDialog.java. Kodenya dibawah ini
public class ViewLoadingDialog extends Dialog {
    private String pesan = "";
    private ViewLoadingDialogBinding binding;

    public ViewLoadingDialog(Context context) {
        super(context);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        binding = ViewLoadingDialogBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());
        DialogOption();
    }

    private void DialogOption(){
        setCanceledOnTouchOutside(false);
        Objects.requireNonNull(getWindow()).setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        binding.dialogLoadingPesan.setText(pesan);
    }

    public void setPesan(String pesan) {
        this.pesan = pesan;
    }

}

Contoh reusable pada kelas ini adalah pesan pada tampilan PopUp dapat diubah - ubah sesuai konteks.

Cara Penggunaan
Penulis memberikan contoh penggunaanya dengan PopUp Dialog ini dengan trigger onClick.

Buat Objek ViewLoadingDialog
ViewLoadingDialog loadingDialog = new ViewLoadingDialog(context);
Contoh panggil saat onClick
    @Override
    public void onClick(View view) {
        if (binding.btnLoading == view){

            //Taruh sebelum sebuah proses dimulai
            loadingDialog.setPesan("Mohon Tunggu Sebentar");
            loadingDialog.show();
            //

            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    loadingDialog.dismiss(); //taruh saat proses selesai
                }
            }, 5000);
        }
    }
Ketika proses sesungguhnya kerjakan sesuai komentar pada kode diatas. Contoh kasus saat manggil API letakkan baris kode setPesan() dan show() pada sebelum kode pemanggilan kemudian letakkan baris kode dismiss() pada bagian callBack pada SDK semacam Retrofit dan FAN biasanya pada method onSuccess(), onResponse(), onError(), dan lain - lain.

Contoh hasilnya dibawah ini :
Loading Animation
Bingung?? coba unduh projeknya lewat akun github penulis kemudian jalankan dan pelajari. Masih bingung juga?? bisa hubungi penulis melalui widget Sosial Media, selama ada waktu senggang pasti dibalas dan dijelaskan semampunya.

Link Github :

Loading Dialog Example

Credits or References :

Chirag Kachhadiya

Saya seorang programmer dengan fokus developer Web dan Android.