Cara Membuat Pencarian SearchView dengan ListView

Oleh Wildan M Athoillah 21.30

Assalamualaikum Warahmatullahi Wabarakatuh.

Kesempatan kali ini, saya akan mengajarkan pada kalian, bagaimana cara membuat pencaraian SearchView dengan ListView pada Aplikasi Android, SearchView digunakan untuk memfilter/menyaring data yang ingin diambil dari database, dan ListView berperan untuk menampilkan list/daftar data dari database, kedua fungsi tersebut mempunyai peranan yang sangat penting dalam pembuatan aplikasi.

Nantinya, SearchView tersebut akan kita tempatkan pada Toolbar, untuk memudahkan user dalam memilih item pada aplikasi, data yang akan kita tampilkan pada ListView, tersimpan pada ArrayList, pada tutorial ini, kita tidak akan menggunakan Database seperti SQL, terlebih dahulu, untuk pemula, kita akan memasukan datanya secara langsung pada ListView, menggunakan ArrayList agar lebih cepat dan mudah.

Materi yang harus kalian pelajari sebelumnya:

Cara Membuat Pencarian SearchView dengan ListView

Materi berikut ini merupakan lanjutan dari materi sebelumnya, jadi saya sarankan kalian sudah mempersiapkan, beberapa kompenen yang diperlukan, seperti Toobar, SearchView dan ListView. Agar pada tutorial berikut ini menjadi lebih mudah.

1) Langkah pertama, kalian siapkan terlebih dahulu, 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>

2) Membuat sebuah 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>

3) Selanjutnya akan kita tambahkan komponen-komponen yang diperlukan, seperti Toolbar dan LisView pada layout actvity_main.xml.

<?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:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.searchviewexample.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>

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:scrollbars="vertical"/>

</LinearLayout>

Selanjutnya buka file MainActiviy.java pada project kalian, kalian buat atau edit source codenya menjadi seperti berikut ini:

package android.cianjur.developer.net.searchviewexample;

import android.annotation.SuppressLint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.support.v7.widget.SearchView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.Collections;

public class MainActivity extends AppCompatActivity {

    //Data-Data yang Akan dimasukan Pada ListView
    private String[] mahasiswa = {"Wildan","Taufan","Adibil;","Hari","Adam",
            "Hermawan","Indra","Widi","Anisa","Hani","Ujang","Saepuloh","Dirham","Rizal","Risma",
            "Wulandari","Widi Utari","William"};

    //ArrayList digunakan Untuk menampung Data mahasiswa
    private ArrayList data;
    private ArrayAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ListView listView = findViewById(R.id.list);
        data = new ArrayList<>();
        getData();
        adapter = new ArrayAdapter<>(this, R.layout.support_simple_spinner_dropdown_item, data);
        listView.setAdapter(adapter);
    }

    private void getData(){
        //Memasukan Semua Data mahasiswa kedalam ArrayList
        Collections.addAll(data, mahasiswa);
    }

    //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) {
                //Untuk memfilter data dari ArrayAdapter
                adapter.getFilter().filter(query);
                searchView.clearFocus();
                return true;
            }

            @Override
            public boolean onQueryTextChange(String nextText) {
                //Data akan berubah saat user menginputkan text/kata kunci pada SearchView
                adapter.getFilter().filter(nextText);
                return false;
            }
        });
        return true;
    }
}

Penjelasan:

Pada program tersebut, kita membuat sebuah variable Array, yaitu mahasiswa, dengan data-data yang sudah kita masukan sebelumnya, lalu data tersebut akan kita masukan kedalam ArrayList.

Pada method getData, kita memasukan semua data mahasiswa kedalam ArrayList, menggunakan fungsi Collection.addAll().

ArrayAdapter digunakan untuk mengatur, bagaimana item pada ListView akan tampil, didalam adapter, kita memasukan data ArrayList, selanjutnya kita memanggil adapter pada ListView dengan menggunakan fungsi setAdapter().

setOnQueryTextListener(), fungsi ini digunakan untuk memprses permintaan data (query) dari user. Didalam method. onQueryTextSubmit(), program akan memfilter data dari adapter, dengan menggunakan fungsi getFilter().

Berikutnya pada method onQueryTextChange() kita tambahkan juga fungsi getFilter(), agar saat user menginputkan Text atau kata kunci pada SearchView, makan data pada ListView akan langsung berubah, jadi kita tidak perlu mengeksekusinya terlebih dahulu.

Demo:

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.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.