Menambah Fitur Pencarian di ListView Android

Ketika kita mempunyai data yang sangat banyak dilist, tentunya tidak efektif kalau kita terus menerus Scrolling. Contohnya adalah data kontak kita yang sudah sampai ratusan. Dengan alasan inilah, maka kita perlu membuat fitur pencarian dibagian atas listview. Pencarian di Listview ini dalam istilah teknis adalah Filter.

Rancangan

Untuk tutorial kali ini, kita akan membuat listview sederhana yang akan menampilkan 10 negara asia tenggara. Jika kita mengetikkan misalkan ‘m’ maka hanya akan muncul ‘Myanmar’ dan ‘Malaysia’ secara realtime.

gambar kiri, list sebelum di filter, gambar kanan list saat di filter (pencarian)

XML layout

Untuk membuat filter list, kita membutuhkan 2 file xml. Yang pertama adalah list_item_filter.xml dan activity_filter.xml. list_item_filter digunakan untuk menampung data per item sedangkan activity_filter dipakai untuk menampung list_item_filter dan EditText pencarian .

list_item_filter

?

source code

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical" >         <!-- Single ListItem -->            <!--  negara list -->     <TextView android:id="@+id/negara_name"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:padding="10dip"         android:textSize="16dip"         android:textStyle="bold"/>       </LinearLayout>

activity_filter.xml

?

source code

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:orientation="vertical" >            <!-- Editext for Search -->     <EditText android:id="@+id/inputSearch"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:hint="Search Country.."         />        <!-- List View -->     <ListView         android:id="@+id/list_view"         android:layout_width="fill_parent"         android:layout_height="wrap_content" />     </LinearLayout>

FilterListActivity.java

File ini adalah file java yang tugasnya menampilkan data kelist dan menambahkan fitur filter

?

source code

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

package com.listdemo;   import java.util.ArrayList; import java.util.HashMap;   import android.app.Activity; import android.os.Bundle; import android.text.Editable; import android.text.TextWatcher; import android.widget.ArrayAdapter; import android.widget.EditText; import android.widget.ListView;   public class FilterListActivity extends Activity {     // List view   private ListView lv;     // Listview Adapter   ArrayAdapter<String> adapter;     // Search EditText   EditText inputSearch;     // ArrayList for Listview   ArrayList<HashMap<String, String>> negaraList;     @Override   public void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_filter);       // Data Array yang akan ditampilkan di list     String negara[] = {"Indonesia","Malaysia","Brunei","Filipina",               "Thailand","Myanmar","Singapura","Vietnam",               "Kamboja","Laos" };     // ambil list_view dan inputsearchnya di xml     lv = (ListView) findViewById(R.id.list_view);     inputSearch = (EditText) findViewById(R.id.inputSearch);       // proses menambahkan array kedalam listview     adapter = new ArrayAdapter<String>(this, R.layout.list_item_filter,         R.id.negara_name, negara);     lv.setAdapter(adapter);       /**      * Kode dibawah ini dipakai untuk memfilter/pencarian realtime      * */     inputSearch.addTextChangedListener(new TextWatcher() {       @Override       public void onTextChanged(CharSequence cs, int arg1, int arg2,           int arg3) {         FilterListActivity.this.adapter.getFilter().filter(cs);       }       @Override       public void beforeTextChanged(CharSequence arg0, int arg1,           int arg2, int arg3) {       }       @Override       public void afterTextChanged(Editable arg0) {         // TODO Auto-generated method stub       }     });   } }