[Tutorial Lanjutan] Cara Menggunakan Widget SearchView untuk Filter pada RecyclerView di Android Studio

Tutorial Cara Menambahkan atau Menggunakan Widget SearchView untuk Filter pada RecyclerView di Android Studio

Halo Para Android Developer, Apakah ngoding nya lancar? Semoga kalian cepat menemukan bug nya. Pada kesempatan kali ini saya akan membagian tutorial yang sangat diperlukan, yaitu Tutorial Cara Menggunakan atau Menambahkan Widget SearchView untuk Filter pada RecyclerView di Android Studio.

Sebelumnya, saya sudah pernah membagikan Tutorial Cara Membuat SearchView pada Toolbar di Android Studio. Nah, untuk itu, kita akan menggunakan widget SearchView untuk Filter pada RecyclerView di Android Studio.

Tutorial ini adalah lanjutan dari Cara Membuat RecyclerView Custom untuk menampilkan Gambar & Teks di Android Studio. Jadi untuk kalian yang ingin mengikuti tutorial ini, sebaiknya pelajari terlebih dahulu tutorial sebelumnya. Tutorial sebelumnya juga sudah saya update hanya untuk tutorial ini.

Sebelum kita masuk ke koding, saya akan menjelaskan secara singkat tentang kedua widget ini. RecyclerView adalah komponen untuk pengganti ListView dan GridView. Struktur pada RecyclerView lebih rapi dibandingkan dengan kedua widget tersebut (ListView dan GridView). Sedangkan SearchView akan digunakan untuk mencari atau filter atau menyaring data yang akan ditampilkan pada RecyclerView. Dengan menggunakan widget SearchView, pengguna dengan mudah dapat mencari data yang ingin di eksekusi. Dan, SearchView tersebut akan kita tampilkan pada Toolbar.

Tutorial Cara Menggunakan atau Menambahkan Widget SearchView untuk Filter pada RecyclerView di Android Studio

Sesuai dari judul, di tutorial ini kita tidak akan membuat projek baru dikarenakan akan memakan banyak waktu jika dibuat ulang. Jadi sebaiknya kalian mengikuti tutorial sebelumnya pada link dibawah ini untuk bisa mengerti pada tutorial ini.

Apabila kalian sudah membuat projek yang sama seperti pada tutorial sebelumnya, maka kalian bisa mengikuti tutorial dibawah ini dengan mudah. Jika kalian kesulitan dalam melakukan pembuatan pada tutorial tersebut, silahkan mendownload projeknya di bawah tutorial pada artikel tersebut.

Daftar file menu yang akan digunakan dalam projek ini:

  1. menu_search.xml [tutorial lanjutan]

Daftar file xml yang digunakan dalam projek ini:

  1. activity_main.xml [tutorial sebelumnya]
  2. list_item.xml [tutorial sebelumnya]

Daftar file java yang digunakan dalam projek ini:

  1. AdapterRecyclerView.java [tutorial sebelumnya]
  2. ItemModel.java [tutorial sebelumnya]
  3. MainActivity.java [tutorial sebelumnya]
  4. MyItem.java [tutorial sebelumnya]

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi RecyclerView App.

XML Menu File

Untuk membuat file menu pada projek, kalian harus membuat folder menu terlebih dahulu. untuk membuat file menu pada projek android studio, kalian bisa mengikuti tutorial pada link di bawah ini.

CARA MEMBUAT FOLDER MENU PADA PROJEK ANDROID STUDIO

Setelah kalian membuat folder menu, buatlah file xml di dalamnya dengan cara klik kanan pada folder menu, lalu pilih New>Menu resource file. Simpan file tersebut dengan nama menu_search. Berikut ini adalah kode lengkap untuk file menu_search.xml

app/res/menu/menu_search.xml

<?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:icon="@android:drawable/ic_menu_search"
        android:orderInCategory="1"
        android:title="Cari"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        app:showAsAction="always|collapseActionView" />
</menu>

Java Adapter File

Apabila kalian sudah mengikuti tutorial sebelumnya, maka saat ini pada Android Studio kalian sudah tersedia file AdapterRecyclerView dalam folder java. Buka file tersebut lalu tambahkan function setFilter() seperti pada kode dibawah ini.

void setFilter(ArrayList<ItemModel> filterModel) {
    dataItem = new ArrayList<>();
    dataItem.addAll(filterModel);
    notifyDataSetChanged();
}

Jika kalian tambahkan kode tersebut pada file AdapterRecyclerView maka kode lengkap pada file tersebut akan terlihat seperti pada kode dibawah ini.

app/java/com.androidrion.recyclerviewapp/AdapterRecyclerView.java

package com.androidrion.recyclerviewapp;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class AdapterRecyclerView extends RecyclerView.Adapter<AdapterRecyclerView.ViewHolder> {

    private ArrayList<ItemModel> dataItem;

    static class ViewHolder extends RecyclerView.ViewHolder {

        TextView textHead;
        TextView textSubhead;
        ImageView imageIcon;

        ViewHolder(View v) {

            super(v);

            textHead = v.findViewById(R.id.text_headline);
            textSubhead = v.findViewById(R.id.text_subhead);
            imageIcon = v.findViewById(R.id.imageList);
        }
    }

    AdapterRecyclerView(ArrayList<ItemModel> data) {

        this.dataItem = data;
    }

    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

        TextView textHead = holder.textHead;
        TextView textSubhead = holder.textSubhead;
        ImageView imageIcon = holder.imageIcon;

        textHead.setText(dataItem.get(position).getName());
        textSubhead.setText(dataItem.get(position).getType());
        imageIcon.setImageResource(dataItem.get(position).getImage());
    }

    @Override
    public int getItemCount() {

        return dataItem.size();
    }

    void setFilter(ArrayList<ItemModel> filterModel) {
        dataItem = new ArrayList<>();
        dataItem.addAll(filterModel);
        notifyDataSetChanged();
    }
}

Java Activity File

Jika sudah kalian tambahkan kode pada file adapter, sekarang tambahkan method pada file MainActivity.java. Tambahkan method onCreateOptionsMenu untuk membuat Toolbar bisa menampilkan menu search yang telah kita buat. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/res/java/com.androidrion.recyclerviewapp/MainActivity.java

package com.androidrion.recyclerviewapp;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.SearchView;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    AdapterRecyclerView recyclerViewAdapter;
    RecyclerView.LayoutManager recylerViewLayoutManager;
    ArrayList<ItemModel> data;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RecyclerView recyclerView = findViewById(R.id.recyclerView);
        recyclerView.setHasFixedSize(true);

        recylerViewLayoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(recylerViewLayoutManager);
        recyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayoutManager.VERTICAL));

        data = new ArrayList<>();
        for (int i = 0; i < MyItem.Headline.length; i++) {
            data.add(new ItemModel(
                    MyItem.Headline[i],
                    MyItem.Subhead[i],
                    MyItem.iconList[i]
            ));
        }

        recyclerViewAdapter = new AdapterRecyclerView(data);
        recyclerView.setAdapter(recyclerViewAdapter);
    }

    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu_search, menu);
        final SearchView searchView = (SearchView) menu.findItem(R.id.search).getActionView();
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {

                newText = newText.toLowerCase();
                ArrayList<ItemModel> itemFilter = new ArrayList<>();
                for (ItemModel model : data) {
                    String nama = model.getName().toLowerCase();
                    if (nama.contains(newText)) {
                        itemFilter.add(model);
                    }
                }
                recyclerViewAdapter.setFilter(itemFilter);
                return true;
            }
        });

        return super.onCreateOptionsMenu(menu);
    }
}

Run ‘app’

Sekarang kalian bisa menjalankan projek kalian, apabila kode diatas tidak terjadi error maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial lanjutan Cara Menambahkan atau Menggunakan Widget SearchView untuk Filter pada RecyclerView di Android Studio. Tutorial diatas sangatlah mudah apabila kalian mengikuti tutorial sebelumnya. Jika kalian mengalami kendala dalam melakukan langkah-langkah diatas, silahkan beri komentar anda dibawah artikel ini. Jangan lupa juga untuk like, comment, & subscribe Channel YouTube Android Rion. Semoga artikel ini membantuk kalian semua. Terima kasih.

Download Project

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

Pass Code: 1234

Get real time updates directly on you device, subscribe now.

You might also like
Leave A Reply

Your email address will not be published.