List filtering in android

Kotlin Android Search/Filter Lists

In this tutorial you will learn various ways in which you can search various types of lists. By lists we mean:

1. RecyclerView
2. ListView
3. GridView
4. Spinner etc.

NOTE: BECAUSE THIS TUTORIAL COVERS MANY CONCEPTS WE HAVE SPLIT IT INTO THREE PAGES:

1. Page 1: Filter Listview using spinner or searchview.
2. Page 2: Filter RecyclerView
3. Page 3: Filter Spinner.

Concept 1: Filter ListView using Spinner or SearchView

The oldest view for listing or rendering lists of items in android is the listview. If you want the simplest way to list items then it is the way to go. However after listing items you may wish to filter or search items. if that’s the case then this tutorial is for you.

Concepts You will Learn

This tutorial basically teaches you various ways of filtering data. You will learn the following:

1. Filtering items in a listview or gridView using a dropdown/spinner.
2. Filtering/Searching items in a listvew or gridview using a search view.
3. How to filter a custom listview.
4. How to filter JSON data downloaded via Retrofit.

We follow an example based approach whereby you learn by following source code. The code is well commented.

(a). How to filter a ListView using a dropdown/spinner.

Tools Used

Here are the tools used in this project:

1. IDE: Android Studio
2. Programming language: Java

Step 1 – Dependencies

This project doesn’t require any third party libraries.

Step 2 – Code

Let’s write some code:

First Start by adding the necessary imports:

Extend the activity or the appcompatactivity to create for us an activity:

As instance properties of this activity, declare some components we will need: like ListView and spinner, as well as an array to host our filter parameters:

Now generate our comsic bodies using the following method. These cosmic bodies are what the user will be filtering:

Here is the fill code for this activity:

. MainActivity.java

Add the following code in your main activity:

That’s the whole code required.

Step 3: Layouts

Copy the layout from the source code.

Step 4: Run

If your run the project you’ll get the following:

Step 5: Download

Download the code below:

No.	Link
1.	Browse/Download Code
2.	Follow @Oclemy

(b). How to filter a listview using dropdown/spinner in Kotlin

These days kotlin is the goto language for android development. Solet’s see the first example re-written for Kotlin.

This example:

1. Filters a listview using a dropdown/spinner.

Step 1: Dependencies

No third party dependencies used.

Step 2: Code

We have only one file:

MainActivity.kt

Step 3: Layouts

Copy layout from the source code reference.

Step 4: Run

If you run the project you get the following:

Step 5: Download

Download the code below:

No.	Link
1.	Browse/Download Code
2.	Follow @Oclemy

Example 3: Android Filter GridView Using Spinner/Dropdown

Android Filter GridView using Spinner Example

In this tutorial we want to see how to filter a gridview using a spinner widget. You select a category from the spinner or dropdown and that is used as a constraint thus allowing us filter a simple gridview.

Here’s the gif demo of the project:

Layouts

We have only a single layout:

(a). activity_main.xml

Our mainactivity’s layout. Here we have a header textview, a spinner which is our dropdown widget and a gridview which is our adapterview.

This is our only layout and it gets inflated into our main activity.

Java Code

We have one class:

(a). MainActivity.java

The main activity is the entry point to our Kotlin app. We have cleanly commented the code for inline explanations.

Download

You can download the full source code below or watch the video from the link provided.

No.	Location	Link
1.	GitHub	Direct Download
2.	GitHub	Browse
3.	YouTube	Video Tutorial
4.	YouTube	ProgrammingWizards TV Channel

Part 2 – Filtering Using a Searchview

In this part we will see how to filter search a gridview or listview using a searchview.

Example 1: Android ListView – Search/Filter

In this example, we’ll see how to search filter an android listview.

We’ll use a SearchView component.

Step 1: Gradle Files

We do not need any special dependencies for this project.

Step 2: Create Layouts

We’ll have these three layouts in our project:

1. activity_main.xml

Our main activity’s layout:

2. content_main.xml

• This layout will hold our ListView and SearchView.

3. model.xml

This layout will define the model for our custom rows.Our ListView will have images and text.

Step 3 Write Java Code

Here are our Java classes:

1. Create Model Class:

Movie.java

• Our data object.
• Will represent a single movies.

2. Create Item Click Listener

ItemClickListner

An interface.It will define the signature for our OnItemClick() method.

3. Create ViewHolder

MyViewHolder.java

Our View holder class.

Create an Adapter class

MyAdapter.java

Our adapter class.It will Derive from BaseAdapter.It Implements Filterable interface.

Create a Custom Filter

CustomFilter.java

This class is responsible for our custom filtering.It Derives from android.widget.Filter .

Create activity

MainActivity.java

This is Our launcher activity. It References both our ListView and SearchView.It Then sets the adapter to ListView. It also Listens to OnQueryTextChange events on the searchview.

Example 2: Android Custom Filter/Search ListView With Images Text [BaseAdapter]

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.

PLATFORM : Android Java
TOOLS : Eclipse,Bluestacks Emulator

Step 1: Our Player Class

Purpose :

1. Is our POJO class.Plain Old Java Object
2. Holds data consisting of a single Player.

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

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

Step 4 : Our ActivityMain.xml layout

Purpose :

1. Acts as our template Layout.
2. Hold our ListView and SearchView

Step 5: Create 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.

Example 3: Android ListView – Download JSON Images Text then Search/Filter

This is an android tutorial for searching json data bound to a custom listview with images and text.

We retrieve both images and text json data and bind to a custom listview. We then search/filter these data on the client side.

This is because we are dealing with raw json without any server side processing like with php or something. However our JSON comes from online and we make a HTTP GET request to download it.

While downloading our JSON data we show an indetereminate progress bar. The downloded json data as we said contains images and text.

In fact it contains text with image urls. Then via Picasso Image Loader, the images are fetched and bound to a custom listview with cardviews.

The user can then search this data via a searchview.

We are Building a Vibrant YouTube Community

Here’s this tutorial in Video Format.

Resources

I want to use a custom material design theme so I will start by setting up some resources:

Step 1: Create Colors

Colors that will color our application:

colors.xml

We are using a custom material design theme so first we will create some material colors.This is optional. Add these to your colors.xml :

Step 2: Create Styles

(a). styles.xml

I am creating a custom material theme called MyCustomMaterialTheme .

I specify it’s parent. Copy this code to your styles.xml . However if you don’t desire the custom theme skip this part and move to layouts.

(b). styles.xml(v21)

Another skippable part. Create another XML values resource under the res/values folder. Name it styles-v21 , this will target android lollipop.

Add the following code:

Step 3: Add Necessary Permissions

You need to add the necessary permissions like the internet permission in your android manifest file. We also need to register our android components like the activities.

AndroidManifest.xml

This part is a must, add the permission for internet connectivity as we’ve done in your AndroidManifest.xml :

Step 4: Create Main Activity Layout

activity_main.xml

This layout is our Main Activity’s layout file. It defines the user interface of our main activity.

We write in XML which stands for eXtensible Markup Language. In android development, user interfaces are normally created in XML. However it’s also possible to create them programmatically in Java/Kotlin.

But XML is the easier yet more flexible option.

So as our root element we have a LinearLayout. LinearLayout usually arranges it’s child elements in a linear manner, either vertcially or horizontally.

So you have to specify the orientation. Am ranging my widgets vertically, one on top of another.

Then I create a textView to act as my header label. I will make it bold and give it the accent color.

Below the header label I will have a SearchView, which we will use to type our queries.Please assign it an id as we will need to reference it from java code.

Below the SearchView I will have a progressbar, which will show us the progress of the download of json data.

Finally we will have a ListView which will render our json data.

Step 5: Create ListView Item Layout:

model.xml

Here’s the json data we will use:

Activities

Create Main Activity

MainActivity.java

Now move to next page to see how to search filter a recyclerview or a spinner.

Concept 2: Android RecyclerView Search Filter Examples

report this ad

Oclemy

Thanks for stopping by. My name is Oclemy(Clement Ochieng) and we have selected you as a recipient of a GIFT you may like ! Together with Skillshare we are offering you PROJECTS and 1000s of PREMIUM COURSES at Skillshare for FREE for 1 MONTH. To be eligible all you need is by sign up right now using my profile .

Источник