Search a custom listView in android


Download Search a custom listView in android sample

In Search a custom listView in android tutorial, we are going to demonstate how we can make a custom listView with Image and Text searchable. In this sample when user clicked a list item, then showing item's detail in Toast.

In this sample mainly we have to do 2 things:

  1. Create a custom ListView
  2. Need to implement custom search logic

Customer is my model class, which I am going to use for demonstration.

Customer.java

Now, let's create CustomerAdapter class that extends ArrayAdapter as follows:

We must call a public constructor of ArrayAdapter from our constructor, as I did.

How to customize rows in custom ListView?


To customize Android Spinner we need to do 2 things:

  1. We must specify arow layout, how we want to display rows in ListView
  2. We must override getView method in our adapter class
I created a customer_row.xml under res ->layout, code of customer_row.xml is given below:

Here is screenshot, how above layout looks like:

Android ListView row

Our next step is to override getView method in CustomerAdapter. This method is called for every List item one by one and this method defines how a row of listView will look a like.

Here is source of these 2 methods:

I wanted to display odd and even row in different color so I implemented my logic in initView method.

How to implement custom search logic?


We need to implement getFilter method of ArrayAdapter to implement our custom logic. My code of getFilter method is as follows:

How to handle item click event of a ListView?


To handle item click event of ListView, we need to implement AdapterView.OnItemClickListener and override onItemClick method as follows:

Search a custom listView in android example


In this example, we are going to demonstrate how to search a custom ListView with Image and Text.

Result

Searchable ListView Searchable ListView

Step 1: Create a new project in Android Studio and name it Searchable Custom ListView.

Step 2: Open res -> layout -> activity_main.xml and add following code

activity_main.xml

Step 3: Open res -> values -> strings.xml and replace it with below given code.

strings.xml

Step 4: Open your res ->values ->colors.xml and replace it's code with below given code of my colors.xml as follows:

colors.xml

Step 5: Create a new layout resource under res -> layout named customer_row.xml. Replace the code of customer_row.xml with below given code.

customer_row.xml

Step 6: Create a class Customer.java and replace it's code with below given code of my Customer.java as follows:

Customer.java

Step 7:Create a class CustomerAdapter.java and replace it's code with below given code of my CustomerAdapter.java as follows:

CustomerAdapter.java

Step 8: Open your MainActivity.java and replace it's code with below given code of my MainActivity.java as follows:

MainActivity.java

Step 9: Clean and run the project to see the result.


Share & Like

Tutorial topics

About ApnaTutorials.com

ApnaTutorials.com is for Java, J2ee, Html5 and android developers. All tutorials are well explained and are easy to understand. We have tested every tutorials on our developement environment before posting it in public domain.