Tutorial Android : Membuat Custom Loading Animation

Sebenarnya Android sudah menyediakan loading animation yang biasa digunakan dengan ProgressDialog, namun terkadang untuk menyesuaikan dengan tema aplikasi atau warna yang berkaitan dengan perusahaan dan lain-lain mengharuskan kita untuk membuat custom loading tentunya.

Langsung saja kita membuat sebuah project dengan nama CustomLoading, buat dengan Empty Activity seperti di bawah ini

Membuat Project Baru masrahman28

Jika project sudah terbuat, kita masuk buat sebuah file drawable dengan nama custom_progress_loading.xml yang isinya seperti ini sebagai contoh, untuk pemilihan warna kalian bisa rubah di blok <gradient> oke

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%"
    android:pivotY="50%" >

    <shape
        android:innerRadiusRatio="4"
        android:shape="ring"
        android:thicknessRatio="5.333"
        android:useLevel="false" >

        <size
            android:height="18dip"
            android:width="18dip" />

        <gradient
            android:centerColor="#29aae1"
            android:centerY="0.50"
            android:endColor="#ffff88"
            android:startColor="#ffffff"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</animated-rotate>

kalian bisa melihat hasilnya di priview yang ada di sebelah kanan, contohnya jika menggunakan coding di atas akan tampak seperti di bawah ini

Contoh Loading yang akan muncul masrahman28

selanjutnya kita buat dua buah file anim, masih pada folder res ya sejajar dengan drawable. Kita beri nama zoom_bounce.xml

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fillBefore="false"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:interpolator="@android:anim/overshoot_interpolator"
    android:toXScale="1.0"
    android:pivotX="50%p"
    android:pivotY="50%p"
    android:toYScale="1.0" />

yang satu lagi kita buat dengan nama dismiss_bounce.xml, ini akan digunakan sebagai animasi untuk kemunculan dan kepergian dari loading yang kita buat

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="250"
    android:fillBefore="false"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toXScale="0.0"
    android:pivotX="50%p"
    android:pivotY="50%p"
    android:toYScale="0.0" />

selanjutnya kita tambahkan pada sytles.xml di dalam tag <resources> baris berikut

    <style name="CustomDialog" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowAnimationStyle">@style/DialogAnimation</item>
        <item name="android:typeface">monospace</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:backgroundDimEnabled">false</item>
    </style>

    <style name="DialogAnimation">
        <item name="android:windowEnterAnimation">@anim/zoom_bounce</item>
        <item name="android:windowExitAnimation">@anim/dismiss_bounce</item>
        <item name="android:typeface">monospace</item>
    </style>

Nah proses terakhir adalah, kita membuat sebuah view agar kita dapat memanggilnya ketika proses loading terjadi, kita buat sebuah layout dengan nama custom_loading.xml yang isinya seperti di bawah ini

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent" >
    <RelativeLayout
        android:id="@+id/lyLoading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="28dp"
        android:background="@android:color/transparent"
        tools:ignore="HardcodedText" >
        <ProgressBar
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:indeterminateDrawable="@drawable/custom_progress_loading" />
    </RelativeLayout>
</FrameLayout>

Sudah selesai kita membuat custom loading yang diharapkan, untuk menjalankannya kita membutuhkan sebuah AsyncTask dan bisa dilihat di Link berikut ini
Langsung saja, untuk menjalankannya kita masuk ke MainActivity.java dan rubah menjadi seperti di bawah ini, karena kita tidak mencoba mengambil data dari API jadi saya contohkan dengan sleep saja ya

package com.example.customloading;

import android.app.Dialog;
import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    Dialog customDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        new LoadData().execute();
    }

    public class LoadData extends AsyncTask<String, String, String>{
        @Override
        protected void onPreExecute() {
            super.onPreExecute();
            customDialog = new Dialog(MainActivity.this, R.style.CustomDialog);
            customDialog.setContentView(R.layout.custom_loading);
            customDialog.setCanceledOnTouchOutside(true);
            customDialog.show();
        }

        @Override
        protected String doInBackground(String... strings) {
            for(int i=0; i<=3; i++){
                System.out.println("Masuk Looping");
                try {
                    Thread.sleep(1000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            return null;
        }

        @Override
        protected void onPostExecute(String s) {
            super.onPostExecute(s);
            if(customDialog.isShowing())
                customDialog.dismiss();
        }
    }
}

dan custom loading bisa kita jalankan atau kita implementasikan di project kita