Search Bar Within List View in Android

Introduction

 

In this article, I explain how to build a simple list view and how a search bar works within a list view in Android. When we work on a type list and we want to search for data using a search bar in a list view, how the data is filtered and becomes a filtered result is explained.

 

So we can do all this using the following procedure.

 

Step 1

 

First of all, create a new project file as shown below using "File" -> "New" -> "Android Application Project".

 

 

Step 2

 

Now open the "activity_main.xml" and update it as Edit txt and List view as in the following code:

<?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 products.."
        android:inputType="textVisiblePassword"/>
    <!-- List View -->
    <ListView
        android:id="@+id/list_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
 </LinearLayout>

Step 3

 

Create a "list_item.xml" file to insert value as an item in the list view of "activity_main.xml" as shown in the following code:

<?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 -->
 <!-- Product Name -->
    <TextView android:id="@+id/product_name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:textSize="16dip"
        android:textStyle="bold"/>
 </LinearLayout>

Step 4

 

Open "strings.xml" and update it with a resources tag in which you have your array of strings as shown in the following:

<?xml version="1.0" encoding="utf-8"?>
<resources>
      <string name="app_name">ListView</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="delhi_btn">New Delhi</string>
    <string name="bnglr_btn">Bangalore</string>
    <string name="jpr_btn">Jaipur</string>
    <string name="noida_btn">Noida</string>
    <string name="glmrg_btn">Gulmarg</string>
    <string-array name="Countreis">
        <item >India</item>
        <item >Pakistan</item>
        <item >Bnagladesh</item>
        <item >Nepal</item>
        <item >China</item>
        <item >Russia</item>
        <item >America</item>
        <item >Ingland</item>
        <item >Japan</item>
        <item >Arab emirat</item>
        <item >Saudi Arabia</item>
        <item >Austrelia</item>
        <item> Kuwiat</item>
        <item >Israil</item>
    </string-array>
</resources>

Step 5

 

Open the "MainActivity.java" file and update it with adapter code for adapting the item within the list in list view as shown in the following:

package com.LisstView.myapp;
import java.security.PublicKey;
import java.util.ArrayList;
import java.util.HashMap;
import android.app.Activity;
import android.content.ClipData.Item;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView;
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[] = getResources().getStringArray(R.array.Countreis);
        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);
        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
            }
        });

    }
}

Step 6

 

Open the "AndroidManifest.xml" file and update it using the following code:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.LisstView.myapp"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.LisstView.myapp.MainActivity"
            android:label="@string/app_name"
            android:windowSoftInputMode="stateHidden">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Now you will get the output as in the following output.

 

Output for normal list view:

 

 

Output for search i in list view:

 

 

Output for search Inida: