Cara Membuat SearchView dengan RecyclerView Android
Assalamualaikum Warahmatullahi Wabarakatuh.
Sebelumnya kita sudah belajar, mengenai Cara Membuat Pencarian SearchView dengan ListView. Pada tutorial ini, kita akan belajar, cara Implementasi SerachView dengan RecycerView pada Aplikasi Android. RecyclerView adalah komponen pengganti ListView dan GridView, struktur program pada RecyclerView lebih rapi dibandingkan ListView, tapi saya sarankan untuk memahami pengguaan ListView terlebih dahulu.
Pada materi berikut ini, kita akan belajar membuat program dengan menggunakan RecyclerView, pertama kita akan menyiapkan data-data yan akan disimpan pada ArrayList, lalu menampilkannya pada RecyclerView.
SearchView akan diguanakan untuk memfilter/menyaring data yang akan ditampilkan pada RecyclerView, dengan menggunakan SearchView, user dapat dengan mudah dalam mencari data yang ingin dieksekusi. SearchView tersebut akan kita implementasikan pada Toolbar.
Materi yang harus kalian pelajari sebelumnya:
- Cara Membuat Custom Toolbar Material Design
- Cara Membuat Pencarian SearchView pada Toolbar Android
- Tutorial Membuat RecyclerView Material Design
Cara Implementasi SearchView dengan RecyclerView Android
1) Pertama, jangan lupa untuk memasukan, bebrapa library berikut ini:
compile 'com.android.support:appcompat-v7:27.0.2'
compile 'com.android.support:design:27.0.2'
compile 'com.android.support:cardview-v7:27.0.2'
compile 'com.android.support:recyclerview-v7:27.0.2'
2) Siapkan menu resourcenya, kalian dapat membuatnya, dengan cara: klik kanan pada dir res > new > Android resource file.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/search"
android:title="Cari"
android:orderInCategory="1"
android:icon="@drawable/ic_search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always|collapseActionView"/>
</menu>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="@style/AppTheme.AppBarOverlay"
app:popupTheme="@style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
4) Disini kita akan membuat design layout RecyclerViewnya seperti pada tutorial yang saya berikan sebelumnya. kita menggunakan 1 buah ImageView dan 1 buah TextView, atau kalian dapat mendesainnya sendiri.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/item_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="vertical">
<ImageView
android:id="@+id/meme"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:contentDescription="@string/todo"
app:srcCompat="@drawable/meme1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_toEndOf="@+id/meme"
android:layout_toRightOf="@+id/meme"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/memetitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:gravity="center"
android:text="@string/titlememe"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
package android.cianjur.developer.net.recyclerviewexample;
class DataFilter {
private String Nama;
private int ImageID;
DataFilter(String Nama, int ImageID){
this.Nama = Nama;
this.ImageID = ImageID;
}
String getNama() {
return Nama;
}
int getImageID() {
return ImageID;
}
}
package android.cianjur.developer.net.recyclerviewexample;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
//Class Adapter ini Digunakan Untuk Mengatur Bagaimana Data akan Ditampilkan
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder>{
//Variable ArrayList dengan Parameter dari Class DataFilter (Nama, ImageID)
private ArrayList<DataFilter> arrayList;
RecyclerViewAdapter(ArrayList<DataFilter> arrayList){
this.arrayList = arrayList;
}
//ViewHolder Digunakan Untuk Menyimpan Referensi Dari View-View
class ViewHolder extends RecyclerView.ViewHolder{
private TextView JudulMeme;
private ImageView Meme;
ViewHolder(View itemView) {
super(itemView);
//Menginisialisasi View-View untuk kita gunakan pada RecyclerView
JudulMeme = itemView.findViewById(R.id.memetitle);
Meme = itemView.findViewById(R.id.meme);
}
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//Membuat View untuk Menyiapkan dan Memasang Layout yang Akan digunakan pada RecyclerView
View V = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_design, parent, false);
return new ViewHolder(V);
}
@Override
public void onBindViewHolder(ViewHolder holder, final int position) {
//Mengambil Data dari method getNama seseuai Posisi Index pada Class DataFilter
final String Nama = arrayList.get(position).getNama();
holder.JudulMeme.setText(Nama);
//Mengambil Data dari method getImageID seseuai Posisi Index pada Class DataFilter
holder.Meme.setImageResource(arrayList.get(position).getImageID());
}
@Override
public int getItemCount() {
//Menghitung Ukuran/Jumlah Data Yang Akan Ditampilkan Pada RecyclerView
return arrayList.size();
}
void setFilter(ArrayList<DataFilter> filterList){
arrayList = new ArrayList<>();
arrayList.addAll(filterList);
notifyDataSetChanged();
}
}
Disana kita membuat sebuah variable ArrayList dengan parameter dari Class DataFilter, untuk mengambil data pada ArrayList tersebut, kita dapat menggunakn fungsi getNama (Untuk Nama) dan getImageID (Untuk Gambar), seperti yan terlihar didalam method onBindViewHolder().
Pada class tersebut, kita membuat method baru bernama "setFilter", method tersebut digunakan untuk menampilkan data-data yang sudah difilter pada ArrayList yang, dengan menggunakan fungsi notifyDataSetChanged(), maka saat kita memasukan text pada SearchView, data akan langsung terfiter, tanpa harus mengeksekusi searchView terlebih dahulu.
7) Pada activity_main.xml, disini kita akan menambahkan RecyclerView dan juga Toolbar yang sudah kita buat tadi.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context="android.cianjur.developer.net.recyclerviewexample.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
tools:targetApi="lollipop">
<include
android:id="@+id/toolbar"
layout="@layout/my_toolbar" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler"
android:layout_margin="8dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
package android.cianjur.developer.net.recyclerviewexample;
import android.annotation.SuppressLint;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.support.v7.widget.SearchView;
import android.support.v7.widget.Toolbar;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private RecyclerView recyclerView;
private RecyclerViewAdapter adapter;
private RecyclerView.LayoutManager layoutManager;
private ArrayList<DataFilter> arrayList;
//Daftar Judul
private String[] Nama = {"Wildan", "Taufan", "Aish", "Ferdi", "Taufik", "Dzaki", "Annisa"};
//Daftar Gambar
private int[] Gambar = {R.drawable.meme1, R.drawable.meme2, R.drawable.meme3, R.drawable.meme4,
R.drawable.meme5, R.drawable.meme6, R.drawable.meme7};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
arrayList = new ArrayList<>();
recyclerView = findViewById(R.id.recycler);
DaftarItem();
//Menggunakan Layout Manager, Dan Membuat List Secara Vertical
layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setHasFixedSize(true);
//Membuat Underline pada Setiap Item Didalam List
DividerItemDecoration itemDecoration = new DividerItemDecoration(getApplicationContext(), DividerItemDecoration.VERTICAL);
itemDecoration.setDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.line));
recyclerView.addItemDecoration(itemDecoration);
recyclerView.setItemAnimator(new DefaultItemAnimator());
adapter = new RecyclerViewAdapter(arrayList);
//Memasang Adapter pada RecyclerView
recyclerView.setAdapter(adapter);
}
//Code Program pada Method dibawah ini akan Berjalan saat Option Menu Dibuat
@Override
public boolean onCreateOptionsMenu(Menu menu) {
//Memanggil/Memasang menu item pada toolbar dari layout menu_bar.xml
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_bar, menu);
MenuItem searchIem = menu.findItem(R.id.search);
final SearchView searchView = (SearchView) searchIem.getActionView();
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
@SuppressLint("SetTextI18n")
@Override
public boolean onQueryTextSubmit(String query) {
return false;
}
@Override
public boolean onQueryTextChange(String nextText) {
//Data akan berubah saat user menginputkan text/kata kunci pada SearchView
nextText = nextText.toLowerCase();
ArrayList<DataFilter> dataFilter = new ArrayList<>();
for(DataFilter data : arrayList){
String nama = data.getNama().toLowerCase();
if(nama.contains(nextText)){
dataFilter.add(data);
}
}
adapter.setFilter(dataFilter);
return true;
}
});
return true;
}
//Memasukan semua data dari variable Nama dan Gambar ke parameter Class DataFiter(Nama,ImageID)
private void DaftarItem(){
int count = 0;
for (String nama : Nama){
arrayList.add(new DataFilter(nama, Gambar[count]));
count++;
}
}
}
Didalam funsi onQueryTextChange(), terdapat sebuah statement yang diguanakan untuk memfilter input yang masuk, kita menggunaakn fungsi toLowerCase() agar setiap huruf yang dimasukan dan juga Text pada masing-masing nama, menjadi kecil, yang bertujuan untuk memudahkan user dalam mencari nama item.
Pada method tersebut, kita membua sebuah variable baru bernama "dataFilter", variable ini digunakan untuk menyimpan data yang sudah di Filter, lalu memasukannya kedalam fungsi setFilter().
Kita menggunakan fungsi for-each untuk mengambil semua data pada Array, dengan menggunkan fungsi if, maka program akan membandingkan, setiap huruf/text yang kita inputkan pada SearchView dengan data pada RecyclerView, jika ada salah satu Text yang kita inputkan sama, maka akan menampilkan data tersebut pada RecyclerView.
Demo:
Baca Juga: Cara Berpindah Activity Menggunakan RecyclerView
Projectnya bisa kalian download di Github Saya.
Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan. Pada tutorial selanjunya, kita akan belajar Cara Menerapkan SearchView dengan RecyclerView pada Fragment.
Wassalamualaikum Warahmatullahi Wabarakatuh.
