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 a value as an item in 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 output as in the following output.

Output for normal list view:

Output for search i in list view:

 

Output for search Inida: