Custom Listview with Search Bar

Introduction 

In my previous post , we implemented a Custom ListView.
Now,we'll see how to implement a search function in it.The default text filter associated with theListView. For now,we'll see how we can search the ListView under the current circumstances.


The idea is to have an EditText above the ListView and when the user types a search query,theListView filters itself to show only the relevant results 

demo



Using the code

activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent"
android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical">


<EditText 
    android:id="@+id/EditText01"
android:layout_height="40dp"
android:layout_width="fill_parent"
android:hint="search"/>
 <ListView android:id="@+id/android:list"
    android:cacheColorHint="#00000000"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>




list_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="8dp">

<TextView
android:id="@+id/title"
android:textColor="#000"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_margin="10dp"
    android:layout_height="wrap_content"/>
    
<ImageView 
    android:id="@+id/imageview"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:src="@drawable/ic_launcher"
    android:layout_marginRight="10dp"
    android:contentDescription="@string/app_name"/>

</LinearLayout>



MainActivity.java:
package com.example.listsearch;

import java.util.ArrayList;
import java.util.Arrays;
import android.os.Bundle;
import android.app.Activity;
import android.app.ListActivity;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class MainActivity  extends ListActivity {
private String[] listview_names = {"India","Bangladesh", "China","Indonesia" };
   
private int[] listview_images   = {R.drawable.india,R.drawable.bangladesh,R.drawable.china,R.drawable.indonesia};

private ListView lv;
private EditText et;

private ArrayList<String> array_sort;
private ArrayList<Integer> image_sort;
int textlength=0;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
            lv =(ListView) findViewById(android.R.id.list);
            et=(EditText) findViewById(R.id.EditText01);
array_sort=new ArrayList<String> (Arrays.asList(listview_names));
image_sort=new ArrayList<Integer>();
for (int index = 0; index < listview_images.length; index++)
        {
image_sort.add(listview_images[index]);
        }
setListAdapter(new bsAdapter(this));
et.addTextChangedListener(new TextWatcher()
{
public void afterTextChanged(Editable s)
{
                        // Abstract Method of TextWatcher Interface.
}
public void beforeTextChanged(CharSequence s,
int start, int count, int after)
{
// Abstract Method of TextWatcher Interface.
}
public void onTextChanged(CharSequence s,
int start, int before, int count)
{
textlength = et.getText().length();
array_sort.clear();
image_sort.clear();
for (int i = 0; i < listview_names.length; i++)
{
if (textlength <= listview_names[i].length())
{
if(listview_names[i].toLowerCase().contains(
et.getText().toString().toLowerCase().trim()))
{
array_sort.add(listview_names[i]);
image_sort.add(listview_images[i]);
}
                                       }
}
AppendList(array_sort,image_sort);
}
});
lv.setOnItemClickListener(new OnItemClickListener() {

public void onItemClick(AdapterView<?> arg0,
                    View arg1, int position, long arg3)
{
   Toast.makeText(getApplicationContext(), array_sort.get(position),
   Toast.LENGTH_SHORT).show();
}
});
}
public void AppendList(ArrayList<String> str,ArrayList<Integer> img)
{
setListAdapter(new bsAdapter(this));
}
public class bsAdapter extends BaseAdapter
    {
        Activity cntx;
        public bsAdapter(Activity context)
        {
            // TODO Auto-generated constructor stub
            this.cntx=context;
        }
        public int getCount()
        {
            // TODO Auto-generated method stub
            return array_sort.size();
        }
        public Object getItem(int position)
        {
            // TODO Auto-generated method stub
            return array_sort.get(position);
        }
        public long getItemId(int position)
        {
            // TODO Auto-generated method stub
            return array_sort.size();
        }
        public View getView(final int position, View convertView, ViewGroup parent)
        {
            View row=null;
            
            LayoutInflater inflater=cntx.getLayoutInflater();
            row=inflater.inflate(R.layout.list_item, null);
            
            TextView   tv = (TextView) row.findViewById(R.id.title);
            ImageView im = (ImageView) row.findViewById(R.id.imageview);
            
            tv.setText(array_sort.get(position));
            im.setImageDrawable(getResources().getDrawable(image_sort.get(position)));
            
        return row;
        }
    }
}


Previous
Next Post »