Filtering a RecyclerView in Xamarin.Android

In Xamarin.Android, a RecyclerView is used as an efficient, scrollable container for items in a collection. These containers only allocate enough views for items that will fit on the screen rather than instantiating views for each item in the data set. Once a particular view leaves the screen, it is “recycled” and used for the next piece of data. Similar to object pooling in game development.

This behavior works well for small data sets, but with the limited screen space on mobile devices, scrolling through more and more items quickly becomes tedious. Attaching a search filter to a RecyclerView greatly improves its use by further limiting the views to be displayed.

The Data Model

Before implementing a RecyclerView, a data model and .xml layout should be established to build off of.

Start by adding a new class named Person.cs to the Models folder of an Xamarin.Android project in Visual Studio.

This class has two member properties for a first and last name and a constructor to set those values.

The Activity Layout

In Android, an Activity is the window an application uses to draw its UI. These are essentially pages a user moves between while interacting with the app, and the first “page” in an application is MainActivity.cs/activity_main.xml.

The Resources.layout folder is where the .xml layout files are and should be stored for each activity in the app with content_main.xml containing the content shown within activity_main.xml. Replace the default .xml in content_main with the below which uses a SearchView and RecyclerView within a RelativeLayout:

In the same folder, add another layout file by right-clicking and selecting Add -> New Item and then choosing Android Layout in the dialog. Name the file card_view.xml and click Add. This layout view is what will be used to display the first and last name for each person object and is what will be recycled by the RecyclerView. Add the following to the file:

The content_main and card_view should look like the below, respectively:

The Layout Manager

The main components of a RecyclerView are the Layout Manager, View Holder, and Adapter, but the view already has layout managers readily available for linear, grid, and staggered layouts. These managers are responsible for positioning items in the view and determining their presentation type, orientation, and in which order they should be displayed. Additionally, they determine the policy for when to recycle views that are no longer on the screen. Custom layout managers may be created, but a LinearLayoutManager will be used for this app.

The View Holder

The View Holder is used to cache references to each view that the Adapter may then use to bind data to each view (e.g. the card_view). Create another class in the project and name it CardViewHolder.cs.

This class inherits from RecyclerView.ViewHolder and uses a constructor with a View parameter to set the FirstName and LastName TextView objects. These objects reference TextViews from the card_view.xml where the first and last names for each Person object will be displayed.

The Adapter

Most of the heavy lifting for the RecyclerView is done by the Adapter which binds the data for and inflates each particular view item while also handling potential item-click events. For filtering, the Adapter further implements the IFilterable interface which requires a Filter property. Create a new PeopleAdapter.cs class with the below:

Filtering for the Adapter

With the Adapter set up, another class named FilterHelper.cs can then be created which handles the filtering and publishing of data back to it.

The class inherits from Filter, overrides PerformFiltering() and PublishResults(), and uses a static FilterInstance() method to return a new FilterHelper object back to the PeopleAdapter’s Filter property.

The Main Activity

Back in the MainActivity.cs, update OnCreate() and add the SetRecyclerView(), GetPeople(), and OnQueryTextChange() methods and event with the RecylcerView, LayoutManager, Adapter, and SearchView variables below:

SetRecyclerView() creates a new LinearLayoutManager and PeopleAdapter with a list of Person objects from GetPeople(). It then assigns the RecyclerView and sets both the manager and adapter. OnQueryTextChange() is added to the SearchView’s QueryTextChange and is called each time a value is entered into the SearchView to invoke the Adapter’s filtering.

With the above added to the activity, recycling and filtering should be fully set in the application.

Cheers!