Xamarin Android: Create Android Recycler View Using Material Design

Introduction

The Recycler View is used to display a group of messages, songs, images (Ex: Inbox, music player, Gallery). For more details, Click.

Let’s start,

Step 1: Open Visual Studio->New Project->Templates->Visual C#->Android->Blank App.

Select Blank App. Then, give Project Name and Project Location.

Step 2

Next, go to Solution Explorer-> Project Name-> Components. Right click on Get More Components. This opens a new dialog box. In this dialog box, search for the Recycler. Now, add the Android Support Library V7 RecyclerView packages.

Step 3

Next, we need to create New Layout for Contact List View. Go to Solution Explorer-> Project Name->Resources->layout. Right click on Add-> New Item; opens a new dialog box. Select Android Layout and name it as ContactLayout.axml.

Step 4

We need to store the contact name and number, so, here, we create a new class. Go to Solution Explorer-> Project Name and right click on Add->New Item. Open a new dialog box; select class File and give it a name as ContactList.cs.

Step 5: Next, open Solution Explorer-> Project Name->Resources->Layout->Main.axml. Click to open the Design View and paste the following code.

<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:focusable="true"
android:clickable="true"
android:clipToPadding="false"
android:divider="@null"
android:dividerHeight="0dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>

Step 6

Now, open Solution Explorer-> Project Name->Resources->Layout-> ContactLayout.axml. Click open the Design View and give the following code. Here, we create two textViews, one for Contact Name and another one for Contact Number.

<TextView
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/txtcontactname" />
<TextView
android:text=""
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/txtnumber" />

Step 7: After creating the Design View, open Solution Explorer-> Project Name->MainActivity.cs. Add the following Namespaces.

using Android.Support.V7.Widget;
using System.Collections.Generic;

Step 8

Next step is to create variables, then, declare the variables in OnCreate(), and assign ConatctList<> values. But before this, we need to create Recycler adapter. So, add one more class of ContactListAdapter.cs. Go to Solution Explorer-> Project Name. Right click on Add->New Item. A new dialog box opens. Select Class and give it the name ContactListAdapter.cs.

Step 9:Next, open the ContactListAdapter.cs and give the following code:

C# Code

public class ContactListAdapter < T >
{
readonly List < T > mItems;
RecyclerView.Adapter mAdapter;
public ContactListAdapter() {
mItems = new List < T > ();
}
public RecyclerView.Adapter Adapter {
get {
return mAdapter;
}
set {
mAdapter = value;
}
}
public void Add(T item) {
mItems.Add(item);
if (Adapter != null) {
Adapter.NotifyItemInserted(0);
}
}
public void Remove(int position) {
mItems.RemoveAt(position);
if (Adapter != null) {
Adapter.NotifyItemRemoved(0);
}
}
public T this[int index] {
get {
return mItems[index];
}
set {
mItems[index] = value;
}
}
public int Count {
get {
return mItems.Count;
}
}
}

Step 10: Then open ContactList.cs give the following code.

C# Code

public class ContactList
{
public string ContactName {
get;
set;
}
public string Number {
get;
set;
}
}

Step 11:Now, open MainActvity.cs and give the following code:

C# Code

private RecyclerView recyclerview;
RecyclerView.LayoutManager recyclerview_layoutmanger;
private RecyclerView.Adapter recyclerview_adapter;
private ContactListAdapter < ContactList > ContactListitems;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
recyclerview = FindViewById < RecyclerView > (Resource.Id.recyclerview);
List < ContactList > contact = new List < ContactList > ();
contact.Add(new ContactList {
ContactName = "Anbu", Number = "2564125624"
});
contact.Add(new ContactList {
ContactName = "Arun", Number = "52459878788"
});
contact.Add(new ContactList {
ContactName = "John", Number = "57879877878"
});
contact.Add(new ContactList {
ContactName = "Peter", Number = "56478989798"
});
contact.Add(new ContactList {
ContactName = "Ali", Number = "12345687945"
});
ContactListitems = new ContactListAdapter < ContactList > ();
foreach(var s in contact) {
ContactListitems.Add(s);
}
recyclerview_layoutmanger = new LinearLayoutManager(this, LinearLayoutManager.Vertical, false);
recyclerview.SetLayoutManager(recyclerview_layoutmanger);
recyclerview_adapter = new RecyclerAdapter(ContactListitems);
recyclerview.SetAdapter(recyclerview_adapter);
}

Step 12

The last step is to end the Oncreate(), to create new RecyclerAdapter class. Here, we declare all variables of ContactList.axml page and then, create ViewHolder for viewing the List view of the items in that Recycler View Adapter,

public class RecyclerAdapter: RecyclerView.Adapter
{
private ContactListAdapter < ContactList > Mitems;
Context context;
public RecyclerAdapter(ContactListAdapter < ContactList > Mitems) {
this.Mitems = Mitems;
NotifyDataSetChanged();
}
public class MyView: RecyclerView.ViewHolder {
public View mainview {
get;
set;
}
public TextView mtxtcontactname {
get;
set;
}
public TextView mtxtcontactnumber {
get;
set;
}
public MyView(View view): base(view) {
mainview = view;
}
}
public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType) {
View listitem = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.ContactLayout, parent, false);
TextView txtcontactname = listitem.FindViewById < TextView > (Resource.Id.txtcontactname);
TextView txtnumber = listitem.FindViewById < TextView > (Resource.Id.txtnumber);
MyView view = new MyView(listitem) {
mtxtcontactname = txtcontactname, mtxtcontactnumber = txtnumber
};
return view;
}
public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position) {
MyView myholder = holder as MyView;
myholder.mtxtcontactname.Text = Mitems[position].ContactName;
myholder.mtxtcontactnumber.Text = Mitems[position].Number;
}
public override int ItemCount {
get {
return Mitems.Count;
}
}
}

Step 13: Press F5 or Build and Run the Application.

Finally, we have successfully created the Xamarin Android Recycler View using Material Design.

6 Comments

Join the conversation! Your thoughts help the community grow.

Bhabaniprasad Jena9y ago
Am having huge space between these list of data....what to do.And how to populate it with database tabel....like below string dpPath = Path.Combine(System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal), "user.db3"); //Call Database var conn = new SQLiteConnection(dpPath); var cmd = new SQLiteCommand(conn); cmd.CommandText = "select coloumn1,coloumn2 from Entity";var r = cmd.ExecuteQuery<Entity>(); Here in r am getting complete table how can i populate it to recycle view.
- Anbu Mani9y ago
  Same way follow this method,Step 11: Its Main part of Data Showing in the recycle view.
Vignesh Mani10y ago
Nice
- Anbu Mani10y ago
  Thanks
Anbu Mani10y ago
Thanks
Anu V10y ago
Nice share