Using the MVVM Light ObservableRecylerAdapter with the Xamarin.Android RecylerView

The MVVMLight framework version 5.3 was released by Laurent Bugnion back in April. This release provides the ObservableRecylerAdapter class for Xamarin.Android. This post presents how to use this class in conjunction with the Android RecyclerView.

The RecyclerView is used in conjunction with ViewHolder and Adpater classes which must be written for each usage, and are essentially copy-paste boilerplate classes. With the release of MVVM Light V5.3 Laurent has added the ObservableRecylerAdapter class. When used in conjunction with an extension method there is no longer any need to write the ViewHolder and Adpater classes in the majority of cases. If some special behaviour is required a custom ViewHolder class can be used.

The GitHub page for the An In-Depth Study of the MVVM Light Databinding System contains the source code for the examples in the presentation. Examples cover the use of binding, Commanding and Lists for Xamarin.Android and Xamarin.iOS. The ListsActivity class provides an example of using the ObservableRecylerAdapter class.

There are two overloads of the GetRecyclerAdapter extension methods provided by MVVMLight. These methods create the ObservableRecyclerAdapter and ViewHolder and wire up the bindings to the ObservableCollection in the view model. I have so far only used the second version which uses the CachingViewHolder class provided by MVVMLight, the other method is used if you wish to provide a custom ViewHolder class. The methods are defined as:-

Create an instance of the ObservableRecyclerAdapter from the View Model's ObservableCollection, supplying a delegate to bind the view holder and the ResourceId of the item View used to display each item of the collection:-

In BindViewHolder an MVVM Light data binding can be used but care must be taken to first delete any existing binding as this will be re-used. Add some more stuff about this, mention that there is also a SelectedItem property on the adpater which can also be data bound to, see around 40 minutes in the presentation. The source code for the presenttion An In-Depth Study of the MVVM Light Databinding System contains example of this.

It is important to delete any data binding set in the BindViewHolder method as the View Holder is reused - holder.DeleteBinding(name);

Refactor from ListView to RecyclerView

The following sections demonstrate how to refactor from using a ListView to using a RecyclerView with the MVVM Light ObservableRecyclerAdapter. I will be using the source code from the article Xamarin Android List Views and MVVM Light and walking through the steps required. These steps will be largely the same as for starting from scratch but save me from describing again the setting up of a new project and adding MVVM Light support and View Models etc. My earlier posts describe how to do this.

Add the Nuget packages

To start with we need to add the Nuget packages for the Xamarin Android Support V7 Recycler View and MVVM Light Android support.

In the Solution Explorer right click Packages folder of the ObservableTables.Droid project and choose the Add Packages...* menu option.

The Add Packages dialog will be displayed. In the the Add Packages dialog type Xamarin Android Support Library in the Search. The Nuget package Xamarin Android Support Library - V7 RecyclerView should be listed.

Check the option and click the Add Package button. The Licence dialog will be displayed:-

Click the Accept button and the package will be added to the project.

Once again right click the Packages folder of the ObservableTables.Droid project and choose the Add Packages...* menu option. In the the Add Packages dialog type MVVMLightAndroid Support in the Search. The Nuget package MVVM Light Android Support Library should be listed.

Check the option and click the Add Package button. The Licence dialog will be displayed:-

Click the Accept button and the package will be added to the project.

Modify the View to use the RecylerView

Open the Main.axml in the Resources\layout folder and switch to the Source tab. The existing layout is defined with a ListView:-

A further change was required to the TaskTemplate layout to change the layout_height property of the LinearLayout from match_parent to wrap_content.

When the app is run it should look pretty much the same as it previously did when using a ListView. The dividing lines automatically provided by the ListView are missing, so some styling work would be worthwhile:-

Using Data Bindings in the BindViewHolder method

The example I have provided can be extended to use bindings if the data source for the information displayed in the RecyclerView will change. If the data source doesn't change then it's better to simply set the values and not pay the price for data binding.

It is important to delete any data binding set in the BindViewHolder method as the View Holder is reused - holder.DeleteBinding(name);

The exmple below shows the original code commented out and the data bindings added:-