Implement The Custom RecycleView In Xamarin.Android

Introduction

In this article, I will explain about recycle view. For most Xamarin.Android applications you will want to display data of some sort. Android similarly allows the developer to populate UI controls with data, but there are differences in how you achieve this using Android. The purpose of this article is to show you how you can populate an Android UI control with data using Xamarin.Android and Visual Studio.

Step 1

Install the below Nuget Package from Nuget Manager.

Install-Package Xamarin.AndroidX.RecyclerView -Version 1.2.1

Step 2

Create the RecyclerView code in respective xml(activity_main.xml) files as mentioned below,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/list_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible"/>
</RelativeLayout>

Step 3

Create the Item Content for RecyclerView code in respective XML(content_main.xml) files as mentioned below,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/darker_gray"
    android:layout_margin="5dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp">
        <TextView
            android:id="@+id/customerName"
            android:text="Manikandan"
            android:fontFamily="serif"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <TextView
             android:id="@+id/customerAddresss"
             android:text="Thiruchy"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"/>
       </LinearLayout>
</LinearLayout>

Step 4

Create a model class(custromer.cs) properties as mentioned below,

public class Customer {
    public string CustomerName {
        get;
        set;
    }
    public string CustomerAddress {
        get;
        set;
    }
}

Step 5

Create a RecyclerView Adapter (CustomerAdapter) as mentioned below,

public class CustomerAdapter: RecyclerView.Adapter {
    public Context mContext;
    public ObservableCollection < Customer > CustomerList;
    public override int ItemCount => CustomerList.Count;
    public CustomerAdapter(ObservableCollection < Customer > customerList, Context context) {
        CustomerList = customerList;
        mContext = context;
    }
    public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        CustomerViewHolder vh = holder as CustomerViewHolder;
        var customer = CustomerList[position];
        vh.CustomerName.Text = customer.CustomerName;
        vh.CustomerAddress.Text = customer.CustomerAddress;
    }
    public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.customer_main, parent, false);
        CustomerViewHolder vh = new CustomerViewHolder(itemView);
        return vh;
    }
}
public class CustomerViewHolder: RecyclerView.ViewHolder {
    public TextView CustomerName {
        get;
        set;
    }
    public TextView CustomerAddress {
        get;
        set;
    }
    public CustomerViewHolder(View itemview): base(itemview) {
        CustomerName = itemview.FindViewById < TextView > (Resource.Id.customerName);
        CustomerAddress = itemview.FindViewById < TextView > (Resource.Id.customerAddresss);
    }
}

Step 6

Finally, create the list item and map it to the RecycleView via setAdapter.

[Activity(Label = "@string/app_name", Theme = "@style/AppTheme.NoActionBar", MainLauncher = true)]
public class MainActivity: AppCompatActivity {
    protected override void OnCreate(Bundle savedInstanceState) {
        base.OnCreate(savedInstanceState);
        Xamarin.Essentials.Platform.Init(this, savedInstanceState);
        SetContentView(Resource.Layout.activity_main);
        ObservableCollection < Customer > lst_CustomerDetails = new ObservableCollection < Customer > ();
        lst_CustomerDetails.Add(new Customer {
            CustomerName = "Manikandan", CustomerAddress = "Thiruchy"
        });
        lst_CustomerDetails.Add(new Customer {
            CustomerName = "Kathirvelu", CustomerAddress = "Coimbatore"
        });
        lst_CustomerDetails.Add(new Customer {
            CustomerName = "Mohan", CustomerAddress = "Coimbatore"
        });
        RecyclerView recyclerView = FindViewById < RecyclerView > (Resource.Id.list_main);
        ObservableCollection < Customer > CustomerList = new ObservableCollection < Customer > (lst_CustomerDetails);
        RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(this);
        recyclerView.SetLayoutManager(mLayoutManager);
        CustomerAdapter mAdapter = new CustomerAdapter(CustomerList, this);
        recyclerView.SetAdapter(mAdapter);
    }
}

Output

Implement The Custom RecycleView In Xamarin.Android

Conclusion

Hopefully, this article has given you sufficient information for you to start creating your own Adapter classes in your Xamarin.Android application. Feel free to leave a comment if you would like me to further elaborate on anything within this article.