All CategoriesAndroid App Development

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.
    <!-- 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.

    <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.

    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.

    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:

    <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:

    SearchView searchview;

    Add code in onCreate(){..}

    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 :

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

    Output:

  4. 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.Keep visiting our site www.acadgild.com for more updates on Bigdata and other technologies.

Related Popular Courses:    

ANDROID CERTIFICATION

ONLINE HADOOP TRAINING

BITCOIN TECHNOLOGY

BEST BUSINESS ANALYTICS COURSES IN INDIA

DATA SCIENCE EDUCATION

 
 
Android Programming

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close