Cara Membuat Pencarian SearchView dengan ListView


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.

Belum ada Komentar untuk "Cara Membuat Pencarian SearchView dengan ListView"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Daftar Situs Idn Poker Online di 18Dewa dan juga Poker Qiu atau di sebut Pokerqiu adalah situs ceme online terpercaya sama dengan 18Dewapoker dan situs poker pkv yang terkenal adalah Masterdomino88 atau nama lain Domino88 bersaing di dunia game online poker Bandar389 dan poker idn lainnya yang memberikan kemenangan tinggi yaitu Big Poker88 baru lagi agen poker bernama Rekan Poker yang punya banyak peluang besar.