[Tutorial] How to Add search function to custom Listview

  • Replies:0
  • OpenNot stickiedUnanswered

Apr 8, 2013 8:17:25 AM via Website

1. Introduce
Adding search functionality to listview will filters the list data with a matching string, hence provides user an easy way to find the information he needs. In this simple tutorial i am discussing how to enable search filter to android custom ListView.
In this tutorial,we will display list of picture and search picture by its name.
Full source you can download at http://www.9android.net/add-search-function-to-custom-listview/

2. Filter Method in Adapter

To filter the list data with a matching string from user,we use a Filter method in Adapter.
Hide content

1/**
2 * Filter
3 * @author 9Android.net
4 *
5 */
6public void filter(String charText) {
7 charText = charText.toLowerCase();
8 picList.clear();
9 if (charText.length() == 0) {
10 picList.addAll(listpicOrigin);
11 } else {
12 for (Picture pic : listpicOrigin) {
13 if (pic.getPicName().toLowerCase().contains(charText)) {
14 picList.add(pic);
15 }
16 }
17 }
18 notifyDataSetChanged();
19}

3. Create XML layout

activity_main.xml

1<LinearLayout xmlns:android="schemas.android.com/apk/res/android"
2 xmlns:tools="schemas.android.com/tools"
3 android:id="@+id/LinearLayout1"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent"
6 android:orientation="vertical" >
7
8 <ViewFlipper
9 android:id="@+id/viewFlipper1"
10 android:layout_width="match_parent"
11 android:layout_height="fill_parent" >
12
13 <include
14 android:id="@+id/listpic_layout"
15 layout="@layout/listpic_layout" />
16
17 <include
18 android:id="@+id/viewpic_layout"
19 layout="@layout/view_pic_layout" />
20 </ViewFlipper>
21
22</LinearLayout>

listpic_layout.xml
1<LinearLayout xmlns:android="schemas.android.com/apk/res/android"
2 xmlns:tools="schemas.android.com/tools"
3 android:id="@+id/LinearLayout1"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent"
6 android:orientation="vertical" >
7
8 <EditText
9 android:id="@+id/search_edt"
10 android:layout_width="match_parent"
11 android:layout_height="wrap_content"
12 android:drawableRight="@drawable/search"
13 android:ems="10"
14 android:hint="Search pic name" >
15
16 <requestFocus />
17 </EditText>
18
19 <ListView
20 android:id="@+id/listView1"
21 android:layout_width="match_parent"
22 android:layout_height="wrap_content"
23 android:dividerHeight="3dp" >
24 </ListView>
25
26</LinearLayout>

4. Code application

PicListAdapter.java

1public class PicListAdapter extends BaseAdapter {
2 private Context mContext;
3 private LayoutInflater mInflater;
4 private List<Picture> picList = null;
5 private ArrayList<Picture> listpicOrigin;
6
7 public PicListAdapter(Context context, List<Picture> picList) {
8 mContext = context;
9 this.picList = picList;
10 mInflater = LayoutInflater.from(mContext);
11 this.listpicOrigin = new ArrayList<Picture>();
12 this.listpicOrigin.addAll(picList);
13 }
14
15 public class ViewHolder {
16 TextView picName;
17 TextView picType;
18 ImageView picIcon;
19 }
20
21 public View getView(int position, View view, ViewGroup parent) {
22 final ViewHolder holder;
23 if (view == null) {
24 holder = new ViewHolder();
25 view = mInflater.inflate(R.layout.list_item, null);
26 holder.picName = (TextView) view.findViewById(R.id.pic_name_txt);
27 holder.picType = (TextView) view.findViewById(R.id.pic_type_txt);
28 holder.picIcon = (ImageView) view.findViewById(R.id.pic_icon_img);
29 view.setTag(holder);
30 } else {
31 holder = (ViewHolder) view.getTag();
32 }
33
34 holder.picName.setText(picList.get(position).getPicName());
35 holder.picType.setText(picList.get(position).getPicType());
36 holder.picIcon.setImageResource(picList.get(position).getPicSource());
37
38 return view;
39 }
40
41 public int getCount() {
42 return picList.size();
43 }
44
45 public Picture getItem(int position) {
46 return picList.get(position);
47 }
48
49 public long getItemId(int position) {
50 return position;
51 }
52
53 /**
54 * Filter
55 * @author 9Android.net
56 *
57 */
58 public void filter(String charText) {
59 charText = charText.toLowerCase();
60 picList.clear();
61 if (charText.length() == 0) {
62 picList.addAll(listpicOrigin);
63 } else {
64 for (Picture pic : listpicOrigin) {
65 if (pic.getPicName().toLowerCase().contains(charText)) {
66 picList.add(pic);
67 }
68 }
69 }
70 notifyDataSetChanged();
71 }
72
73}

— modified on Apr 15, 2013 7:01:56 AM