Cara Menerapkan SearchView dengan RecyclerView pada Fragment


Assalamualaikum Warahmatullahi Wabarakatuh.

Pada tutorial ini, kita akan belajar cara menerapkan SearchView dengan RecyclerView pada sebuah Fragment, Untuk memulai tutorial ini, saya sarankan kalian sudah memahami atau membuat bebererapa komponen yang diperlukan seperti Toolbar, SearchVeiw, RecyclerView dan Fragment. Jika kalian sudah paham atau membuat komponen yang saya sarankan tadi, maka kita akan lanjut pada tutorial berikut ini.

Cara Menerapkan SearchView dengan RecyclerView pada Fragment

Pada program yang akan kita buat, akan menampilkan daftar Item yang kedalam RecyclerView dengan menggunakan ArrayList, RecyclerView tersebut akan kita implementasikan pada sebuah fragment, lalu dengan menggunakan SearchView, user dapat mencari item dialam RecyclerView dengan mudah.

Materi lainnya yang direkomendasikan untuk kalian pelajari:

Cara Menerapkan SearchView dengan RecyclerView pada Fragment

1) Pertama, memasukan, bebrapa library berikut ini didalam dependencies pada file build.gradle.

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) Buat menu resourcenya, 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) Buat 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/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/Widget.AppCompat.Light.PopupMenu">

</android.support.v7.widget.Toolbar>

4) Buat layout baru, berinama "view_design" Untuk design layout RecyclerViewnya, kita menggunakan 1 buah ImageView dan 1 buah TextView, seperti ini.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    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"
        app:srcCompat="@drawable/meme1"
        android:contentDescription="TODO"
        tools:ignore="ContentDescription,HardcodedText" />

    <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="Text"
            android:textColor="#000000"
            android:textSize="18sp"
            android:textStyle="bold" />

    </LinearLayout>

</RelativeLayout>

5) Selanjutnya kita akan membuat class baru, berinama "DataFilter", class ini 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.searchviewfinalexample;

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", yang digunakan untuk mengatur view-view yang akan ditampilkan pada RecyclerView

package android.cianjur.developer.net.recyclerviewexample;

import android.support.design.widget.Snackbar;
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.RelativeLayout;
import android.widget.TextView;

import java.util.ArrayList;

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) Selanjutnya buat sebuah fragment, misalnya berinama "fragPage", lalu kita tambahkan RecyclerView, 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"
    android:background="@android:color/background_light"
    tools:context="android.cianjur.developer.net.searchviewfinalexample.fragPage">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical">

    </android.support.v7.widget.RecyclerView>

</RelativeLayout>

8) Buka file fragPage.java kalian, lalu masukan source berikut ini:

package android.cianjur.developer.net.searchviewfinalexample;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v4.app.Fragment;
import android.support.v4.content.ContextCompat;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.DividerItemDecoration;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.SearchView;

import java.util.ArrayList;

public class fragPage extends Fragment {

    private RecyclerViewAdapter adapter;
    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
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view_frag1 = inflater.inflate(R.layout.activity_frag_page, container, false);
        setHasOptionsMenu(true);
        arrayList = new ArrayList<>();
        RecyclerView recyclerView = view_frag1.findViewById(R.id.recycler);
        DaftarItem();
        //Menggunakan Layout Manager, Dan Membuat List Secara Vertical
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getContext());
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setHasFixedSize(true);
        //Membuat Underline pada Setiap Item Didalam List
        DividerItemDecoration itemDecoration = new DividerItemDecoration(getContext(), DividerItemDecoration.VERTICAL);
        itemDecoration.setDrawable(ContextCompat.getDrawable(getContext(), R.drawable.line));
        recyclerView.addItemDecoration(itemDecoration);
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        adapter = new RecyclerViewAdapter(arrayList);
        //Memasang Adapter pada RecyclerView
        recyclerView.setAdapter(adapter);
        return view_frag1;
    }

    //Code Program pada Method dibawah ini akan Berjalan saat Option Menu Dibuat
    @Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
        inflater.inflate(R.menu.manu_bar, menu);
        MenuItem searchItem = menu.findItem(R.id.search);
        SearchView searchView  = new SearchView(getActivity());
        searchView.setQueryHint("Cari Sesuatu....");
        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;
            }
        });
        searchItem.setActionView(searchView);
    }

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

Agar menu Option atau SearchView muncul pada Toolbar, kita perlu menambahkan fungsi setHasOptionsMenu(), pada method onCreateView().

Pada method onCreateOptionsMenu(), disana kita menambahkan fungsi getActivity(), untuk mendapatkan context dari activity.

Dan terakhir gunakan fungsi searchItem.setActionView(searchView), untuk mengset searchView kita pada searchItem atau item Search didalam menu.xml kita.

9) Pada activity_main.xml, disini kita akan menambahkan RecyclerView dan juga Toolbar yang sudah kita buat tadi. lalu tambahkan juga sebuah container, misalnya FrameLayout, Fragment tersebut akan kita tampilkan pada FrameLayout.

<?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.searchviewfinalexample.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>

    <FrameLayout
        android:id="@+id/halaman"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>

</LinearLayout>

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

package android.cianjur.developer.net.searchviewfinalexample;

import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        fragPage frag = new fragPage();
        FragmentManager FM = getSupportFragmentManager();
        FragmentTransaction FT = FM.beginTransaction();
        FT.replace(R.id.halaman, frag);
        FT.commit();
    }
}

Demo:

Screenshot1_SearchView dengan RecyclerView pada Fragment Screenshot2_SearchView dengan RecyclerView pada Fragment

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.

Wassalamualaikum Warahmatullahi Wabarakatuh.