How to create a recyclerview using xamarin android mvvmcross?

Question

I have followed the example from https://github.com/xamarin/monodroid-samples/tree/master/android5.0/RecyclerViewSample/RecyclerViewSample for displaying the data in recyclerview in xamarin android. It is working fine for me.

But as per our project requirement, i need to display a recyclerview using xamarin android mvvmcross. I have searched for examples but could not find a working one.

Code:

    main.xml

        <MvvmCross.Droid.Support.V7.RecyclerView.MvxRecyclerView
                android:id="@+id/recylerView"
                android:layout_width="match_parent"
                android:layout_height="120dp" 
                 android:layout_marginLeft="@dimen/margin_normal"
                 android:layout_marginRight="@dimen/margin_normal"
                android:layout_marginBottom="@dimen/margin_normal"
                 android:layout_marginTop="@dimen/margin_normal"
                android:background="#FFFF00"
                android:orientation="horizontal"

                android:divider="@null"
                android:dividerHeight="@dimen/divider_height_medium"
                local:MvxItemTemplate="@layout/item_list"
                local:MvxBind="ItemsSource CoffeeList" />

Fragment.cs


    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
            {
             View v = inflater.Inflate(Resource.Layout.main, null);
             return v;
            }

item_list.xml
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        local:MvxBind="Text FirstName" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        local:MvxBind="Text LastName" />
</LinearLayout>

ViewModel.cs

    public class CoffeeViewModel : MvxViewModel
        {
        public CoffeeViewModel ()
        {
        }
     private string _firstName;
            public string FirstName
            {
                get => _firstName;
                set => SetProperty(ref _firstName, value);
            }

            private string _lastName;
            public string LastName
            {
                get => _lastName;
                set => SetProperty(ref _lastName, value);
            }
        }

Now when i run the application, the recyclerview is displaying empty. Can you please let me know if I am missing anything while binding the data.

Answer 1

First of all install the package MvvmCross.Droid.Support.V7.RecyclerView.

Here you have an example of a simple MvxRecyclerView:

<mvvmcross.droid.support.v7.recyclerview.MvxRecyclerView
    ...
    local:MvxItemTemplate="@layout/item_template"
    local:MvxBind="ItemsSource Items; ItemClick ItemClickCommand; ItemLongClick ItemLongClickCommand" />

So Items is your ObservableCollection<T> of your ViewModel, ItemClickCommand is the command of your ViewModel that will be executed when you click on a row and ItemLongClick is the command of your ViewModel that will be executed when you do a long click on a row.

Let's say you have a public ObservableCollection<PersonItemViewModel> Items {get;set;}

And your PersonItemViewModel has the next properties:

private string _firstName;
public string FirstName
{
    get => _firstName;
    set => SetProperty(ref _firstName, value);
}

private string _lastName;
public string LastName
{
    get => _lastName;
    set => SetProperty(ref _lastName, value);
}

So your item_template.axml that will be renderized as each row of the MvxRecyclerView. It's DataContext (to which you do the bindings) is each of the items of the ObservableCollection<PersonItemViewModel>, i.e. a PersonItemViewModel. Here an example of the layout:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        local:MvxBind="Text FirstName" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        local:MvxBind="Text LastName" />
</LinearLayout>

More info in Android MvxRecyclerView HIH