Tutorial Membuat Swipe Refresh di Android Material Design

Last Updated on 9 years by Mas Herdi

Hi all, sudah lama saya tidak memposting sesuatu tentang Android Material Design. Jadi untuk melengkapi seri Belajar Material Design di Android kali ini saya akan membagi cara bagaimana membuat Swipe Refresh Layout di Android Material Design.

Bagi yang belum tahu, Swipe Refresh, atau swipe to refresh adalah metode baru yang diperkenalkan oleh Google di Material Design yang memudahkan kita untuk me-refresh data di aplikasi Android dengan cara yang sangat praktis, yaitu dengan men-swipe/menarik layar dari atas ke bawah. Dengan adanya Swipe Refresh Layout, kita tidak perlu lagi menekan tombol refresh untuk mengambil data terbaru, cukup dengan menarik layar dari atas ke bawah.

Membuat Swipe Refresh Layout Android Material Design

Oke, langsung saja untuk cara membuatnya pertama-tama kalian harus mengimpor Design Support Library pada project kalian di Android Studio. Untuk pre-requisites nya disarankan kalian membaca dahulu artikel-artikel di bawah ini :

Pre-requisites :

• Membuat Project Android di Android Studio
• Tutorial Lengkap Belajar Material Design di Android

Setelah kalian membuat project baru dan mengimport design support library ke project kalian. Maka isikanlah kode di bawah ini pada file main_activity.xml atau file XML utama di project kalian :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_swiperefresh"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/tv_helloworld"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:gravity="center"
                android:text="@string/hello_world" />
        </ScrollView>

    </android.support.v4.widget.SwipeRefreshLayout>

</LinearLayout>

Perlu dilihat pada kode di atas SwipeRefreshLayout membungkus sebuah view bernama ScrollView di dalamnya, view yang dibungkus oleh SwipeRefreshLayout itulah yang nantinya akan direfresh datanya ketika kita menarik layar dari atas ke bawah (menjalankan fungsi swipe to refresh). View yang boleh dibungkus oleh SwipeRefreshLayout hanyalah view yang mempunyai fungsi scrolling/bisa di-scroll, seperti ListView, RecyclerView, ataupun ScrollView. Jika kalian menempatkan static view, yang tidak bisa discroll seperti LinearLayout di dalam SwipeRefreshLayout maka akan terjadi error.

Setelah itu, kode untuk kelasnya sendiri sangatlah mudah, kalian bisa mencopypastekan kode di bawah ini ke MainActivity.java pada project kalian, atau kalian bisa membuat kelas baru seperti saya bernama RefreshViewActivity.java. Berikut adalah source code nya :

package id.web.twoh.coolandroiddesign;

import android.os.Bundle;
import android.os.Handler;
import android.support.v4.content.ContextCompat;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * Created by Hafizh Herdi on 4/17/2016.
 */
public class RefreshViewActivity extends AppCompatActivity{

    SwipeRefreshLayout swLayout;
    LinearLayout llayout;
    TextView tvHello;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_refreshview);
        
        // Inisialisasi SwipeRefreshLayout
        swLayout = (SwipeRefreshLayout) findViewById(R.id.swlayout);

        llayout = (LinearLayout) findViewById(R.id.ll_swiperefresh);
        tvHello = (TextView) findViewById(R.id.tv_helloworld);

        // Mengeset properti warna yang berputar pada SwipeRefreshLayout
        swLayout.setColorSchemeResources(R.color.twoh_accent,R.color.twoh_primary);

        // Mengeset listener yang akan dijalankan saat layar di refresh/swipe
        swLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {

                // Handler untuk menjalankan jeda selama 5 detik
                new Handler().postDelayed(new Runnable() {
                    @Override public void run() {

                        // Berhenti berputar/refreshing
                        swLayout.setRefreshing(false);

                        // fungsi-fungsi lain yang dijalankan saat refresh berhenti
                        llayout.setBackground(ContextCompat.getDrawable(RefreshViewActivity.this, R.drawable.ic_bg_navview));
                        tvHello.setText("www.twoh.co");
                    }
                }, 5000);
            }
        });
    }
}

Pada kode di atas, kita mempunyai objek SwipeRefreshLayout yang mana fungsi-fungsi swipe to refresh akan dijalankan lewat objek tersebut. Pertama kita bisa mengatur properti warna lingkaran yang muncul di SwipeRefreshLayout pada saat loading mengambil data. Kita bisa mengeset lebih dari satu warna yang akan mengakibatkan warna yang berubah-ubah saat lingkaran loading berputar, sesuai dengan urutan warna yang kita set.

Setelah itu kita bisa mengeset onRefreshListener(), yang akan dijalankan ketika layar di swipe/ditarik dari atas ke bawah. Fungsi onRefreshListener() mempunyai fungsi lagi bernama onRefresh() di dalamnya yang merupakan fungsi utama pada SwipeRefreshLayout.

Ketika kode di atas dijalankan, maka saat kita melakukan swipe to refresh (menarik layar dari atas ke bawah) yang terjadi adalah muncul indikator loading berupa lingkaran yang berputar di bagian atas layar (di bawah Toolbar Android). Loading akan berjalan selama lima detik, karena ada Handler di sana, dan kemudian setelah lima detik maka loading akan berhenti berputar dan tulisan serta background aplikasi akan berganti.

Ini hanyalah contoh, sehingga fungsi yang dijalankan pada onRefresh() adalah fungsi-fungsi yang sederhana. Namun pada implementasinya di dunia nyata, pada saat onRefresh() biasanya aplikasi menjalankan fungsi untuk mengambil data dari web server, dan kemudian mengolahnya untuk ditampilkan kembali pada aplikasi yang biasanya berbentuk ListView.

Demo

Untuk demo aplikasi SwipeRefreshLayout adalah sebagai berikut :

Swipe to Refresh Android Material Design

Pada gambar paling kiri adalah ketika kita ingin melakukan refresh dengan cara menarik layar dari atas ke bawah, maka akan muncul lingkaran dengan tanda panah. Gambar di sebelahnya adalah tampilan ketika fungsi onRefresh sedang berjalan akan muncul loading lingkaran, dan perhatikan warnanya berubah merah karena diatas kita mengeset dua warna pada object SwipeRefreshLayout. Kemudian gambar terakhir paling kanan adalah tampilan ketika fungsi refresh sudah selesai dijalankan ;).

That’s all! Kalian bisa download source code-nya di GitHub saya, jangan lupa untuk follow dan star projectnya ya ? Bagi yang kurang jelas silahkan tanya di bagian komentar. Semoga membantu.