Cara Implementasi 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.

Cara Implementasi SearchView dengan RecyclerView Android

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 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>

3) Membuat sebuah Toolbar, berinama, misalnya "my_toolbar", seperti berikut ini:

<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>

Jangan lupa untuk, set Theme/Stylenya menjadi NoActionBar, pada activity kalian.

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>

5) Selanjutnya kita akan membuat class baru, misalnya berinama "DataFilter", class ini nantinya akan kita gunakan untuk memasukan data-data yang terdapat didalam RecycerView, seperti Text dan Juga Image. Class tersebut akan kita gunakan sebagai parameter didalam ArrayList.

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;
    }
}

6) Buat class baru, berinama "RecyclerViewAdapter", source codenya, seperti berikut ini:

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();
    }
}

Penjelasan:

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>

8) Buka file MainActivity pada project kalian, masukan soruce code berikut ini:

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 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 = 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++;
        }
    }
}

Penjelasan:

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:

Screenshot_SearchView dengan RecyclerView Example1 Screenshot_SearchView dengan RecyclerView Example2

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.

Buka Komentar Tutup Komentar

Disqus Comments