Cara Membuat Swipe Refresh Material Design
Assalamualaikum Warahmatullahi Wabarakatuh.
Pada tutorial Meterial Design kali ini, kita akan belajar bagaimana cara membuat serta menggunakan Swipe Refresh atau Wipe to Refresh untuk aplikasi Android pada Android Studio. Swipe Refresh adalah metode baru dari konsep maerial design yang diguanakan untuk memudahkan kita, me-refresh atau memuat data baru pada suatu halaman, dengan adanya Swiipe Refresh ini, jika user ingin memuat ulang atau me-reload data baru pada suatu halaman, penggunaannya cukup praktis, kita hanya perlu menarik layar dari atas ke bawah, tanpa memerlukan komponen tambahan lainnya.
Swipe Refresh pada umunya digunakan, untuk me-reload data baru pada sebuah list atau daftar item yang ditampilkan dari database didalam aplikasi, dan bisa juga digunakan untuk me-refresh suatu halaman web pada webview, untuk pejelasan lebih lanjut, pada meteri berikut ini, kita akan belajar membuat program sederhana dengan menggunakan Swipe Refresh pada Android Studio.
Materi Lainnya Yang Direkomendasikan:
- Cara Membuat RatingBar Material Design Android Studio
- Tutorial Membuat TabLayout Material Design
- Tutorial Membuat RecyclerView Material Design
Membuat Swipe Refresh Material Design
Buka Android Studio kalian, Buatlah project baru, berinama project tersebut, misalnya, "Demo Swipe Refresh", lalu bua MainActivity pada project tersebut.
Untuk membuat Swipe Refresh, pertama tama, kita perlu menambahkan beberapa library, seperi Design Support Library didalam dependencies pada file build.gradle (Didalam direktori app).
compile 'com.android.support:appcompat-v7:26.1.0'
compile 'com.android.support:design:26.1.0'
compile 'com.android.support:support-v4:26.1.0'
Setelah kalian mengimport beberapa library yang diperlukan, selanjutnya, kalian buka file activity_main.xml, disini kita akan menambahkan Layout Swipe Refresh dengan beberapa widget pendukung lainnya, seperti ScrollView dan TextView, pada Activity tersebut, edit kode xmlnya, menjadi seperti berikut ini:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="android.cianjur.developer.net.swiperefreshdemo.MainActivity">
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<TextView
android:id="@+id/text_example"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Selamat Datang di WILDAN TECHNO ART"
android:textSize="16sp"
android:textStyle="normal|bold" />
</ScrollView
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
SwipeRefreshLayout membungkus sebuah view bernama ScrollView di dalamnya, ScrollView tersebut yang nantinya akan direfresh datanya ketika kita menarik layar dari atas ke bawah. Perlu kalian ketahui, view yang boleh dibungkus oleh SwipeRefreshLayout hanyalah view yang mempunyai fungsi scrollinga atau bisa di scroll, contohnya seperti RecyclerView, ListView, atau ScrollView. Jika kalian menempatkan view static, yang tidak bisa discroll seperti RelaiveLayout atau LinearLayout di dalam SwipeRefreshLayout, maka akan terjadi error.
Tampilan layout designnya, terlihat seperti ini:
Jika kalian sudah selesai mendesign layoutnya, selanjutnya kita buka file MainActivity.java, lalu masukan source code berikut ini:
package android.cianjur.developer.net.swiperefreshdemo;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private TextView objekKata;
private SwipeRefreshLayout SwipeRefresh;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
objekKata = findViewById(R.id.text_example);
// Inisialisasi SwipeRefreshLayout
SwipeRefresh = findViewById(R.id.swipe_refresh);
// Mengeset properti warna yang berputar pada SwipeRefreshLayout
SwipeRefresh.setColorSchemeResources(R.color.colorAccent, R.color.colorPrimary);
// Mengeset listener yang akan dijalankan saat layar di refresh/swipe
SwipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
// Handler digunakan untuk menjalankan jeda selama 5 detik
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
// Berhenti berputar/refreshing
SwipeRefresh.setRefreshing(false);
//Berganti Text Setelah Layar di Refresh
objekKata.setText("Belajar Pemrograman Android");
}
},4000); //4000 millisecond = 4 detik
}
});
}
}
Pada kode di atas, kita mempunyai objek SwipeRefreshLayout, akan kita gunakan untuk menjalankan fungsi swipe to refresh.
Method setColorSchemeResources() digunakan untuk mengatur properti warna lingkaran yang muncul di SwipeRefreshLayout pada saat memuat data. Kita bisa mengeset lebih dari satu warna yang akan mengakibatkan warna berubah-ubah saat lingkaran loading pada Swipe Refresh berputar, sesuai dengan urutan warna yang kita set.
Method onRefreshListener(), akan berjalan saat layar di swipe/ditarik dari atas ke bawah. Didalam onRefreshListener() terdapa sebuah fungsi yang harus kita implementasikan, bernama onRefresh() di dalamn method tersebut merupakan fungsi utama pada SwipeRefreshLayout.
Saat user menarik layar dari atas ke bawah, yang terjadi adalah muncul indikator loading berupa lingkaran yang berputar di bagian atas layar, dibagian bawah ActionBar/Toolbar, Proses loading akan berjalan selama empat detik, yang sudah kita set didalam Handler, setelah lima detik maka loading akan berhenti berputar dan tulisan pada TextView akan berganti.
Demo:
Coba kalian perhatikan, Text didalam TextView tersebut akan berubah setelah Swipe Refresh selesai berputah, saat berpuar, warna lingkaran pada loading tersebut akan berubah-ubah sesuai dengan warna yang kita set tadi.
Project ini merupakan contoh sederhana dari penggunaan Swipe Refresh, untuk tutorial selanjutnya, kita akan mencoba mengimplemenasikan Swipe Refresh pada Webview atau sebuah List/RecyclerView didalam aplikasi Android.
Wassalamualaikum Warahmatullahi Wabarakatuh.
