Xamarin

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.


  1. <android.support.v7.widget.RecyclerView  
  2.   
  3. android:id="@+id/recyclerview"  
  4.   
  5. android:focusable="true"  
  6.   
  7. android:clickable="true"  
  8.   
  9. android:clipToPadding="false"  
  10.   
  11. android:divider="@null"  
  12.   
  13. android:dividerHeight="0dp"  
  14.   
  15. android:layout_width="match_parent"  
  16.   
  17. android:layout_height="match_parent">  
  18.   
  19. </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.


  1. <TextView  
  2.   
  3. android:text=""  
  4.   
  5. android:textAppearance="?android:attr/textAppearanceMedium"  
  6.   
  7. android:layout_width="match_parent"  
  8.   
  9. android:layout_height="wrap_content"  
  10.   
  11. android:id="@+id/txtcontactname" />  
  12.   
  13. <TextView  
  14.   
  15. android:text=""  
  16.   
  17. android:textAppearance="?android:attr/textAppearanceSmall"  
  18.   
  19. android:layout_width="match_parent"  
  20.   
  21. android:layout_height="wrap_content"  
  22.   
  23. android:id="@+id/txtnumber" />  

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

  1. using Android.Support.V7.Widget;    
  2. 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

  1. public class ContactListAdapter < T >  
  2.   {  
  3.     readonly List < T > mItems;  
  4.     RecyclerView.Adapter mAdapter;  
  5.     public ContactListAdapter() {  
  6.         mItems = new List < T > ();  
  7.     }  
  8.     public RecyclerView.Adapter Adapter {  
  9.         get {  
  10.             return mAdapter;  
  11.         }  
  12.         set {  
  13.             mAdapter = value;  
  14.         }  
  15.     }  
  16.     public void Add(T item) {  
  17.         mItems.Add(item);  
  18.         if (Adapter != null) {  
  19.             Adapter.NotifyItemInserted(0);  
  20.         }  
  21.     }  
  22.     public void Remove(int position) {  
  23.         mItems.RemoveAt(position);  
  24.         if (Adapter != null) {  
  25.             Adapter.NotifyItemRemoved(0);  
  26.         }  
  27.     }  
  28.     public T this[int index] {  
  29.         get {  
  30.             return mItems[index];  
  31.         }  
  32.         set {  
  33.             mItems[index] = value;  
  34.         }  
  35.     }  
  36.     public int Count {  
  37.         get {  
  38.             return mItems.Count;  
  39.         }  
  40.     }  
  41. }  

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

 
C# Code

  1. public class ContactList  
  2. {  
  3.     public string ContactName {  
  4.         get;  
  5.         set;  
  6.     }  
  7.     public string Number {  
  8.         get;  
  9.         set;  
  10.     }  
  11. }  

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



C# Code

  1. private RecyclerView recyclerview;  
  2. RecyclerView.LayoutManager recyclerview_layoutmanger;  
  3. private RecyclerView.Adapter recyclerview_adapter;  
  4. private ContactListAdapter < ContactList > ContactListitems;  
  5. protected override void OnCreate(Bundle bundle)   
  6. {  
  7.     base.OnCreate(bundle);  
  8.     SetContentView(Resource.Layout.Main);  
  9.     recyclerview = FindViewById < RecyclerView > (Resource.Id.recyclerview);  
  10.     List < ContactList > contact = new List < ContactList > ();  
  11.     contact.Add(new ContactList {  
  12.         ContactName = "Anbu", Number = "2564125624"  
  13.     });  
  14.     contact.Add(new ContactList {  
  15.         ContactName = "Arun", Number = "52459878788"  
  16.     });  
  17.     contact.Add(new ContactList {  
  18.         ContactName = "John", Number = "57879877878"  
  19.     });  
  20.     contact.Add(new ContactList {  
  21.         ContactName = "Peter", Number = "56478989798"  
  22.     });  
  23.     contact.Add(new ContactList {  
  24.         ContactName = "Ali", Number = "12345687945"  
  25.     });  
  26.     ContactListitems = new ContactListAdapter < ContactList > ();  
  27.     foreach(var s in contact) {  
  28.         ContactListitems.Add(s);  
  29.     }  
  30.     recyclerview_layoutmanger = new LinearLayoutManager(this, LinearLayoutManager.Vertical, false);  
  31.     recyclerview.SetLayoutManager(recyclerview_layoutmanger);  
  32.     recyclerview_adapter = new RecyclerAdapter(ContactListitems);  
  33.     recyclerview.SetAdapter(recyclerview_adapter);  
  34. }  

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,

  1. public class RecyclerAdapter: RecyclerView.Adapter   
  2. {  
  3.     private ContactListAdapter < ContactList > Mitems;  
  4.     Context context;  
  5.     public RecyclerAdapter(ContactListAdapter < ContactList > Mitems) {  
  6.         this.Mitems = Mitems;  
  7.         NotifyDataSetChanged();  
  8.     }  
  9.     public class MyView: RecyclerView.ViewHolder {  
  10.         public View mainview {  
  11.             get;  
  12.             set;  
  13.         }  
  14.         public TextView mtxtcontactname {  
  15.             get;  
  16.             set;  
  17.         }  
  18.         public TextView mtxtcontactnumber {  
  19.             get;  
  20.             set;  
  21.         }  
  22.         public MyView(View view): base(view) {  
  23.             mainview = view;  
  24.         }  
  25.     }  
  26.     public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType) {  
  27.         View listitem = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.ContactLayout, parent, false);  
  28.         TextView txtcontactname = listitem.FindViewById < TextView > (Resource.Id.txtcontactname);  
  29.         TextView txtnumber = listitem.FindViewById < TextView > (Resource.Id.txtnumber);  
  30.         MyView view = new MyView(listitem) {  
  31.             mtxtcontactname = txtcontactname, mtxtcontactnumber = txtnumber  
  32.         };  
  33.         return view;  
  34.     }  
  35.     public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position) {  
  36.         MyView myholder = holder as MyView;  
  37.         myholder.mtxtcontactname.Text = Mitems[position].ContactName;  
  38.         myholder.mtxtcontactnumber.Text = Mitems[position].Number;  
  39.     }  
  40.     public override int ItemCount {  
  41.         get {  
  42.             return Mitems.Count;  
  43.         }  
  44.     }  
  45. }  

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

 

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

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs