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.

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

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

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

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
			}
		});
	}
}

Tutorial selanjutnya akan membahas onListItemClickListener agar list bisa di klik.