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" >
<EditText android:id="@+id/inputSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Search products.."
android:inputType="textVisiblePassword"/>
<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" >
<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
}
});
}
}