Menambahkan Fungsi Search di Listview Android

Sebelumnya saya telah menulis artikel tentang Tutorial Android Menggunakan Listview, untuk data list yang sangat banyak tentunya akan sangat lelah saat scroll untuk mencari data yang dibutuhkan. Oleh sebab itu, kita bisa tambahkan fungsi pencarian untuk data list yang banyak tersebut.

Pada tutorial kali ini, kita akan membuat listview sederhana yang akan menampilkan list product dengan fungsi pencarian diatas listview.

1. Buat proyek baru di Eclipse file New ⇒ Android ⇒ Application Project dan isi rincian informasi yang dibutuhkan. 
2. Buat file yang dibutuhkan untuk membuat ListView. Pada tutorial kali ini, saya menggunakan file default activity_main.xml sebagai Listview, dan membuat file baru dengan nama list_item.xml sebagai single list item nya. Kemudian pastikan anda membuat editText diatas listview yang bertujuan sebagai input untuk pencarian listview.

Pada file activity_main.xml isikan kode berikut :

kemudian pada file list_item.xml isikan kode berikut :

Sekarang, buka MainActivity.java anda, kemudian paste kan kodde dibawah ini untuk membuat simple ListView. Pada kode dibawah ini, saya memasukkan list data kedalam array dengan nama products[] dan menggunakan ArrayAdapter untuk memasukkannya ke dalam listview.

MainActivity.java

package com.androidhive.androidlistviewwithsearch;
 
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 MainActivity extends Activity {
     
    // List view
    private ListView lv;
     
    // Listview Adapter
     ArrayAdapter<string> adapter;
     
    // Search EditText
    EditText inputSearch;
     
     
     // ArrayList for Listview
ArrayList<HashMap<String, String>> productList;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // Listview Data
        String products[] = {"Dell Inspiron", "HTC One X", "HTC Wildfire S", "HTC Sense", "HTC Sensation XE",
                                "iPhone 4S", "Samsung Galaxy Note 800",
                                "Samsung Galaxy S3", "MacBook Air", "Mac Mini", "MacBook Pro"};
         
        lv = (ListView) findViewById(R.id.list_view);
        inputSearch = (EditText) findViewById(R.id.inputSearch);
         
        // Adding items to listview
        adapter = new ArrayAdapter<string>(this, R.layout.list_item, R.id.product_name, products);
        lv.setAdapter(adapter);       
         
    }
     
}

Mengaktifkan Fungsi Pencarian

Fungsi pencarian dapat diaktifkan dengan menulis baris kode sederhana. Yang perlu Anda lakukan adalah menambahkan addTextChangedListener ke EditText. Setelah pengguna memasukkan data baru di EditText kita perlu untuk mendapatkan teks dari itu dan menyerahkannya ke array adapter filter.

Tambahkan kode ini di mainActivity.java anda :

inputSearch.addTextChangedListener(new TextWatcher() {
     
    @Override
    public void onTextChanged(CharSequence cs, int arg1, int arg2, int arg3) {
        // When user changed the Text
        MainActivity.this.adapter.getFilter().filter(cs);   
    }
     
    @Override
    public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,
            int arg3) {
        // TODO Auto-generated method stub
         
    }
     
    @Override
    public void afterTextChanged(Editable arg0) {
        // TODO Auto-generated method stub                          
    }
});

Langkah terakhir tambahkan property berikut kedalam AndroidManifest.xml file.

android:windowSoftInputMode="stateHidden"

AndroidManifest.xml

Berikut adalah kode akhir dari file MainActivity.java :

package com.androidhive.androidlistviewwithsearch;
 
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 MainActivity extends Activity {
     
    // List view
    private ListView lv;
     
    // Listview Adapter
    ArrayAdapter<string> adapter;
     
    // Search EditText
    EditText inputSearch;
     
     
     // ArrayList for Listview
    ArrayList<HashMap<String, String>> productList;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // Listview Data
        String products[] = {"Dell Inspiron", "HTC One X", "HTC Wildfire S", "HTC Sense", "HTC Sensation XE",
                                "iPhone 4S", "Samsung Galaxy Note 800",
                                "Samsung Galaxy S3", "MacBook Air", "Mac Mini", "MacBook Pro"};
         
        lv = (ListView) findViewById(R.id.list_view);
        inputSearch = (EditText) findViewById(R.id.inputSearch);
         
        // Adding items to listview
        adapter = new ArrayAdapter<string>(this, R.layout.list_item, R.id.product_name, products);
        lv.setAdapter(adapter);
         
        /**
         * Enabling Search Filter
         * */
        inputSearch.addTextChangedListener(new TextWatcher() {
             
            @Override
            public void onTextChanged(CharSequence cs, int arg1, int arg2, int arg3) {
                // When user changed the Text
                MainActivity.this.adapter.getFilter().filter(cs);   
            }
             
            @Override
            public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,
                    int arg3) {
                // TODO Auto-generated method stub
                 
            }
             
            @Override
            public void afterTextChanged(Editable arg0) {
                // TODO Auto-generated method stub                          
            }
        });
    }    
}

• Download Code