Android Custom Filter/Search-ListView

ListView With Images Text [BaseAdapter]

Tutorial How to perform Filter or Search against a Custom Listview with images
and Text.

FacebookTwitterGoogle+Share

Hello good people,We cover how to perform a Custom Filter against data in your ListView.Our
adapter is BaseAdapter and we shall be searching ListView with images and text.We shall
implement Filterable interface and derive from Filter class. If you prefer learing through video :
watch it from our channel here :

. Subscribe to our Youtube Channel here for more : Our Youtube Channel Cheers.

PLATFORM : Android Java

TOOLS : Eclipse,Bluestacks Emulator

SECTION 1 : Our Player Class.

Purpose :

1. Is our POJO class.Plain Old Java Object

2. Holds data consisting of a single Player.

1. package com.tutorials.listviewcustomfilterbase;
2.
3. public class Player {
4.
5. private String name;
6. private int img;
7.
8. public Player(String name,int img) {
9. // TODO Auto-generated constructor stub
10.
11. this.name=name;
12. this.img=img;
13. }
14.
15. public String getName() {
16. return name;
17. }
 18.
19. public void setName(String name) {
20. this.name = name;
21. }
22.
23. public int getImg() {
24. return img;
25. }
26.
27. public void setImg(int img) {
28. this.img = img;
29. }

SECTION 2 : Our Custom Adapter class

Purpose:

1. Adapts our images and Text to our ListView

2. Is where we bind data to views
3. Has an inner class CustomFilter that implements Filtering or Searching for us.
4. Implements Filterable method hence we override getFilter() method that in turn returns a
filter object.

1. package com.tutorials.listviewcustomfilterbase;
2.
3. import java.util.ArrayList;
4.
5. import android.content.Context;
6. import android.view.LayoutInflater;
7. import android.view.View;
8. import android.view.ViewGroup;
9. import android.widget.BaseAdapter;
10. import android.widget.Filter;
11. import android.widget.Filterable;
12. import android.widget.ImageView;
13. import android.widget.TextView;
14.
15. public class Adapter extends BaseAdapter implements Filterable{
16.
17. Context c;
18. ArrayList<Player> players;
19. CustomFilter filter;
20. ArrayList<Player> filterList;
21.
22. public Adapter(Context ctx,ArrayList<Player> players) {
23. // TODO Auto-generated constructor stub
24.
25. this.c=ctx;
26. this.players=players;
27. this.filterList=players;
28. }
29.
30. @Override
31. public int getCount() {
32. // TODO Auto-generated method stub
33. return players.size();
34. }
35.
36. @Override
37. public Object getItem(int pos) {
38. // TODO Auto-generated method stub
39. return players.get(pos);
40. }
41.
42. @Override
43. public long getItemId(int pos) {
44. // TODO Auto-generated method stub
45. return players.indexOf(getItem(pos));
46. }
47.
48. @Override
49. public View getView(int pos, View convertView, ViewGroup parent) {
50. // TODO Auto-generated method stub
51.
52. LayoutInflater inflater=(LayoutInflater)
c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
53.
54. if(convertView==null)
55. {
56. convertView=inflater.inflate(R.layout.model, null);
57. }
58.
59. TextView nameTxt=(TextView) convertView.findViewById(R.id.nameTv);
60. ImageView img=(ImageView) convertView.findViewById(R.id.imageView1);
61.
62. //SET DATA TO THEM
63. nameTxt.setText(players.get(pos).getName());
64. img.setImageResource(players.get(pos).getImg());
65.
66. return convertView;
67. }
68.
69. @Override
70. public Filter getFilter() {
71. // TODO Auto-generated method stub
72. if(filter == null)
73. {
74. filter=new CustomFilter();
75. }
76.
77. return filter;
78. }
79.
80. //INNER CLASS
81. class CustomFilter extends Filter
82. {
83.
84. @Override
85. protected FilterResults performFiltering(CharSequence constraint) {
86. // TODO Auto-generated method stub
87.
88. FilterResults results=new FilterResults();
89.
90. if(constraint != null && constraint.length()>0)
91. {
92. //CONSTARINT TO UPPER
93. constraint=constraint.toString().toUpperCase();
94.
95. ArrayList<Player> filters=new ArrayList<Player>();
96.
97. //get specific items
98. for(int i=0;i<filterList.size();i++)
99. {
100. if(filterList.get(i).getName().toUpperCase().contains(constraint))
101. {
102. Player p=new Player(filterList.get(i).getName(), filterList.get(i).getImg());
103.
104. filters.add(p);
105. }
106. }
107.
108. results.count=filters.size();
109. results.values=filters;
110.
111. }else
112. {
 113. results.count=filterList.size();
114. results.values=filterList;
115.
116. }
117.
118. return results;
119. }
120.
121. @Override
122. protected void publishResults(CharSequence constraint, FilterResults results) {
123. // TODO Auto-generated method stub
124.
125. players=(ArrayList<Player>) results.values;
126. notifyDataSetChanged();
127. }
128.
129. }
130.
131.
132.
133. }

SECTION 3: Our MainActivity class:

Purpose :

1. Our launcher activity

2. We set reference our ListView from XML and attach its BaseAdapter subclass to it.
3. We reference our SearchView and implement its onQueryTextChangeListener.

1. package com.tutorials.listviewcustomfilterbase;
2.
3. import java.util.ArrayList;
4.
5. import android.os.Bundle;
6. import android.app.Activity;
7. import android.view.Menu;
8. import android.widget.ListView;
9. import android.widget.SearchView;
10. import android.widget.SearchView.OnQueryTextListener;
11.
12. public class MainActivity extends Activity {
13.
14. ListView lv;
15. SearchView sv;
16.
17. String[] names={"Juan Mata","Ander Herera","Wayne Rooney","Eden Hazard","Michael
Carrick","Diego Costa","Jose Mourinho"};
18. int[]
images={R.drawable.mata,R.drawable.herera,R.drawable.rooney,R.drawable.hazard,R.dr
awable.carrick,R.drawable.costa,R.drawable.mourinho};
19.
20. @Override
21. protected void onCreate(Bundle savedInstanceState) {
22. super.onCreate(savedInstanceState);
23. setContentView(R.layout.activity_main);
24.
25. lv=(ListView) findViewById(R.id.listView1);
26. sv=(SearchView) findViewById(R.id.searchView1);
27.
28. //ADASPTER
29. final Adapter adapter=new Adapter(this, getPlayers());
30. lv.setAdapter(adapter);
31.
32. sv.setOnQueryTextListener(new OnQueryTextListener() {
33.
34. @Override
35. public boolean onQueryTextSubmit(String arg0) {
36. // TODO Auto-generated method stub
37. return false;
38. }
39.
40. @Override
41. public boolean onQueryTextChange(String query) {
42. // TODO Auto-generated method stub
43.
44. adapter.getFilter().filter(query);
45.
46. return false;
47. }
48. });
49.
50. }
51.
52. private ArrayList<Player> getPlayers()
53. {
54. ArrayList<Player> players=new ArrayList<Player>();
55. Player p;
56.
57. for(int i=0;i<names.length;i++)
58. {
59. p=new Player(names[i], images[i]);
 60. players.add(p);
61. }
62.
63. return players;
64. }
65.
66.
67. }

SECTION 4 : Our ActivityMain.xml layout

Purpose :

1. Acts as our template Layout.

2. Hold our ListView and SearchView

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:paddingBottom="@dimen/activity_vertical_margin"
6. android:paddingLeft="@dimen/activity_horizontal_margin"
7. android:paddingRight="@dimen/activity_horizontal_margin"
8. android:paddingTop="@dimen/activity_vertical_margin"
9. tools:context=".MainActivity" >
10.
11. <SearchView
12. android:id="@+id/searchView1"
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:layout_alignParentLeft="true"
16. android:layout_alignParentTop="true"
17. android:layout_alignRight="@+id/listView1"
18. android:layout_marginLeft="14dp"
19. android:queryHint="Search.." >
20.
21. </SearchView>
22.
23. <ListView
24. android:id="@+id/listView1"
25. android:layout_width="match_parent"
26. android:layout_height="wrap_content"
27. android:layout_alignParentLeft="true"
28. android:layout_below="@+id/searchView1" >
29.
30. </ListView>
 31.
32. </RelativeLayout>

SECTION 4: Our Model.xml Layout

Purpose :

1. Acts as our Row Model.Remember we want to display Listview with images and text.So
its how a single row in our ListView shall appear.
2. Contains Images andText.

1. <?xml version="1.0" encoding="utf-8"?>

2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent" >
5.
6. <ImageView
7. android:id="@+id/imageView1"
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:layout_alignParentLeft="true"
11. android:layout_alignParentTop="true"
12. android:layout_marginLeft="40dp"
13. android:layout_marginTop="44dp"
14. android:src="@drawable/ic_launcher" />
15.
16. <TextView
17. android:id="@+id/nameTv"
18. android:layout_width="wrap_content"
19. android:layout_height="wrap_content"
20. android:layout_alignTop="@+id/imageView1"
21. android:layout_toRightOf="@+id/imageView1"
22. android:text="Name"
23. android:padding="10dp"
24. android:textAppearance="?android:attr/textAppearanceMedium" />
25.
26. </RelativeLayout>

SECTION : Our Result

Android ListView BaseAdapter Filter Search

Cheers Guys.