Custom ListView Filter with Example in Android

Introduction:

It is very simple to make a ListView but a custom ListView contains so much data in a row like image, text, buttons etc. according to need of a application and if our ListView is very long then there is need to add a filter option for user to choose an item in a list easily.

To filter the Custom ListView we have to add an input field where the user can insert the keys to filter the ListView.

Methods & Classes:

Methods:

getView(): To inflate the row data of ListView this method is called.

getFilter(): This method is overrided when we implement the Filterable interface and it returns the new filter.

Classes:

Here we create a private class i.e ValueFilter inside our custom adapter class and extends with Filter class to perform the filter operation.

Filter has two major components i.e performFiltering(..) method and publishResults(..) method.

performFiltering() method creates a new Arraylist with filtered data.

publishResults() method is for notify data set changed.

Real Time Example:

Android gives the feature of filter option in Phone application to filter a particular name.And in various application this feature is used like in this example.

Example with Code:

Here you see How to implement filter custom ListView in Android.

These are the steps:

1. Create a new Application FilteringCustomListViewAndroid.
2. 2 XML Layout files are needed for it.
3. Two String array is need to be implement.XML Layout files:
   1. activity_main.xml : add the searchview and listview inside this.
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <!-- Editext for Search -->     <SearchView         android:id="@+id/search_view"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="@drawable/search_view_border"         android:iconifiedByDefault="false"         android:padding="2dp"         android:queryHint="Search...." />          <!-- ListView -->     <ListView         android:id="@+id/list_view"         android:layout_width="match_parent"         android:layout_height="match_parent" />

   2. list_item.xml : It shows the row data add imageview and textview inside this.

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   <ImageView         android:id="@+id/ivbaby"         android:layout_width="80dp"         android:layout_height="70dp"         android:paddingLeft="10dp"         android:paddingRight="10dp" />       <TextView         android:id="@+id/tvname"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginLeft="10dp"         android:layout_marginTop="10dp"         android:layout_toRightOf="@+id/ivbaby"         android:paddingBottom="10dp"         android:textColor="#000000"   android:textSize="20sp" />

   BabyDetailsData class:

   Create a class model BabyDetailsData and implements its setter’s getters for row data of each items of ListView. i.e.

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

   public class BabyDetailsData {       String babyname;     int babypicture;       public BabyDetailsData(String babyname, int babypicture) {         super();         this.babyname = babyname;         this.babypicture = babypicture;     }       public String getBabyname() {         return babyname;     }     public void setBabyname(String babyname) {         this.babyname = babyname;     }     public int getBabypicture() {         return babypicture;     }     public void setBabypicture(int babypicture) {         this.babypicture = babypicture;     }

   CustomListViewAdapter class:

   As I discussed above, here we implement Filterable interface and override the getfilter() method.

   Create ValueFilter class inside it.

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

   private class ValueFilter extends Filter{           @Override         protected FilterResults performFiltering(CharSequence constraint) {             FilterResults results = new FilterResults();               if (constraint != null && constraint.length() > 0) {                 ArrayList<BabyDetailsData> filterList = new ArrayList<BabyDetailsData>();                 for (int i = 0; i < mStringFilterList.size(); i++) {                     if ((mStringFilterList.get(i).getBabyname().toUpperCase())                             .contains(constraint.toString().toUpperCase())) {                           BabyDetailsData babydata = new BabyDetailsData(mStringFilterList.get(i)                                 .getBabyname(), mStringFilterList.get(i)                                 .getBabypicture());                           filterList.add(babydata);                     }                 }                 results.count = filterList.size();                 results.values = filterList;             } else {                 results.count = mStringFilterList.size();                 results.values = mStringFilterList;             }             return results;           }           @Override         protected void publishResults(CharSequence constraint,                 FilterResults results) {             babylist = (ArrayList<BabyDetailsData>) results.values;             notifyDataSetChanged();         }                }

   Strings.xml:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

   <string-array name="baby_names">         <item>Andrew</item>         <item>Benjamin</item>         <item>Christopher</item>         <item>Daniel</item>         <item>Ethan</item>         <item>Isabella</item>         <item>Joseph</item>         <item>Lily</item>         <item>Matthew</item>         <item>Michael</item>         <item>William</item>     </string-array>       <array name="baby_pictures">         <item>@drawable/andrew</item>         <item>@drawable/benjamin</item>         <item>@drawable/christopher</item>         <item>@drawable/daniel</item>         <item>@drawable/ethan</item>         <item>@drawable/isabella</item>         <item>@drawable/joseph</item>         <item>@drawable/lily</item>         <item>@drawable/matthew</item>         <item>@drawable/michael</item>         <item>@drawable/william</item>     </array>

   MainActivity class:

   Implement SearchView.OnQueryTextListener interface and override its methods onQueryTextChange() and onQueryTextSubmit().

   Initialize SearchView:

   1	SearchView searchview;

   Add code in onCreate(){..}

   1 2 3

   searchview = (SearchView) findViewById(R.id.search_view); babynames = getResources().getStringArray(R.array.baby_names); babypictures = getResources().obtainTypedArray(R.array.baby_pictures);

   Create some code in onQueryTextChange() method :

   1 2 3 4 5

   @Override     public boolean onQueryTextChange(String newText) {         adapter.getFilter().filter(newText);         return false;     }

   Output:

   Conclusion:

   This is the basic idea of how to filter custom ListView.It is nothing just to add the SearchView for the user to insert the keys to filter data inside the list.It is used in many application like I give the example of phone application.We can also customize the SearchView according to the need.This feature is very popular in android development.