Post
Ask Question

Xamarin.Android - Working With Recycler View

Introduction
 
Android RecyclerView is a more advanced version of ListView with improved performance and other benefits. Using RecyclerView and CardView together, both lists and grids can be created very easily. In this tutorial, we are going to learn how to render a simple RecyclerView with a custom layout. We’ll also learn writing an adapter class, adding list divider and row click listener. For the recycler view we are going to design a list of photos and the title.
 
The prerequisites
  • Android Support Library v7 AppCompat
  • Android Support Library v7 RecyclerView
  • Android Support Library v7 CardView
  • Any five Images 
The steps given below are required to be followed in order to create a Recycler View app in Xamarin.Android, using Visual Studio.
 
Step 1 - Create Android Project
 
Create your Android solution in Visual Studio or Xamarin Studio. Select Android and from the list, choose Android Blank App. Give it a name, like XamarinRecyclerView.
 
Step 2 - Add Android Support v7 AppCompat Library
 
First of all, in References, add a reference of Android.Support.v7. AppCompat using NuGet Package Manager, as shown below.
 
 
 
Step 3 - Add Android Support Library v7 RecyclerView
 
Similarly, install Xamarin Android Support Library v7 RecyclerView.
 
 
Step 4 - Add Android Support Library v7 CardView
 
Similarly, install Xamarin Android Support Library v7 CardView.
 
 
Step 5 - Add Finger Print Image
 
Open Solution Explorer -> Project Name -> Resources-> Drawable. Paste your images into drawable folder.
 
Step 6 - Main Layout
 
Open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml. Open this main layout file and add the following code.
 
(File Name: Main.axml , Folder Name: Layout)
 
XML Code
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent">  
  6.   <android.support.v7.widget.RecyclerView  
  7.     android:id="@+id/recyclerView"  
  8.     android:scrollbars="vertical"  
  9.     android:layout_width="fill_parent"  
  10.     android:layout_height="fill_parent"/>  
  11. </LinearLayout>  
Step 7 - Add New Layout
 
Next, add a new layout by going to Solution Explorer-> Project Name-> Resources-> Layout. Right-click to add a new item, select Layout, and give it a name, such as PhotoCard.axml. Open this layout file and add the following code.
 
(Folder Name: Layout , File Name: PhotoCard.axml)
 
XML Code
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.              xmlns:card_view="http://schemas.android.com/apk/res-auto"  
  4.              android:layout_width="fill_parent"  
  5.              android:layout_height="wrap_content">  
  6.   <android.support.v7.widget.CardView  
  7.     android:layout_width="match_parent"  
  8.     android:layout_height="wrap_content"  
  9.     card_view:cardElevation="4dp"  
  10.     card_view:cardCornerRadius="5dp"  
  11.     card_view:cardUseCompatPadding="true">  
  12.     <LinearLayout  
  13.     android:layout_width="match_parent"  
  14.     android:layout_height="wrap_content"  
  15.     android:orientation="vertical"  
  16.     android:padding="8dp">  
  17.       <ImageView  
  18.     android:layout_width="match_parent"  
  19.     android:layout_height="wrap_content"  
  20.     android:id="@+id/imageView"  
  21.     android:scaleType="fitCenter"/>  
  22.     <TextView  
  23.     android:layout_width="match_parent"  
  24.     android:layout_height="wrap_content"  
  25.     android:textAppearance="?android:attr/textAppearanceMedium"  
  26.     android:textColor="#333333"  
  27.     android:text="Caption"  
  28.     android:id="@+id/textView"  
  29.     android:layout_gravity="center_horizontal"  
  30.     android:layout_marginLeft="4dp"/>  
  31.     </LinearLayout>  
  32.   </android.support.v7.widget.CardView>  
  33. </FrameLayout>  
Step 8 - Writing the Adapter Class
 
After completing layout, let’s start writing the adapter class to render the data. The RecyclerView adapter is same as ListView but the override methods are different. For this, go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name like PhotoAlbumAdapter.cs and write the following code with appropriate namespaces.
 
(File Name: PhotoAlbumAdapter.cs)
 
C# Code
  1. using Android.Support.V7.Widget;  
  2. using Android.Views;  
  3. using System;  
  4. namespace XamarinRecycleView.Adapter  
  5. {  
  6.     public class PhotoAlbumAdapter : RecyclerView.Adapter  
  7.     {  
  8.         public event EventHandler<int> ItemClick;  
  9.         public PhotoAlbum mPhotoAlbum;  
  10.         public PhotoAlbumAdapter(PhotoAlbum photoAlbum)  
  11.         {  
  12.             mPhotoAlbum = photoAlbum;  
  13.         }  
  14.         public override int ItemCount  
  15.         {  
  16.             get { return mPhotoAlbum.numPhoto; }  
  17.         }  
  18.         public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)  
  19.         {  
  20.             PhotoViewHolder vh = holder as PhotoViewHolder;  
  21.             vh.Image.SetImageResource(mPhotoAlbum[position].mPhotoID);  
  22.             vh.Caption.Text = mPhotoAlbum[position].mCaption;  
  23.         }  
  24.         public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType)  
  25.         {  
  26.             View itemView = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.PhotoCard, parent, false);  
  27.             PhotoViewHolder vh = new PhotoViewHolder(itemView, OnClick);  
  28.             return vh;  
  29.         }  
  30.         private void OnClick(int obj)  
  31.         {  
  32.             if (ItemClick != null)  
  33.                 ItemClick(this, obj);  
  34.         }  
  35.     }  
  36. }  
Step 9 - Writing PhotoAlbum Class
 
Similarly, add a new class - PhotoAlbum.cs and add the following code with appropriate namespaces.
 
(File Name: PhotoAlbum.cs)
 
C# Code
  1. using Android.Support.V7.Widget;  
  2. using Android.Views;  
  3. using Android.Widget;  
  4. using System;  
  5. namespace XamarinRecycleView  
  6. {  
  7.     public class Photo  
  8.     {  
  9.         public int mPhotoID { get; set; }  
  10.         public string mCaption { get; set; }  
  11.     }  
  12.     public class PhotoAlbum  
  13.     {  
  14.         static Photo[] listPhoto =  
  15.         {  
  16.             new Photo() {mPhotoID = Resource.Drawable.Android1, mCaption = "Ahsan 1"},  
  17.             new Photo() {mPhotoID = Resource.Drawable.Android2, mCaption = "Ahsan 2"},  
  18.             new Photo() {mPhotoID = Resource.Drawable.Android3, mCaption = "Ahsan 3"},  
  19.             new Photo() {mPhotoID = Resource.Drawable.Android4, mCaption = "Ahsan 4"},  
  20.             new Photo() {mPhotoID = Resource.Drawable.Android5, mCaption = "Ahsan 5"},  
  21.             new Photo() {mPhotoID = Resource.Drawable.Android1, mCaption = "Ahsan 6"},  
  22.             new Photo() {mPhotoID = Resource.Drawable.Android2, mCaption = "Ahsan 7"},  
  23.             new Photo() {mPhotoID = Resource.Drawable.Android3, mCaption = "Ahsan 8"},  
  24.             new Photo() {mPhotoID = Resource.Drawable.Android4, mCaption = "Ahsan 9"},  
  25.             new Photo() {mPhotoID = Resource.Drawable.Android5, mCaption = "Ahsan 10"},  
  26.         };  
  27.         private Photo[] photos;  
  28.         Random random;  
  29.         public PhotoAlbum()  
  30.         {  
  31.             this.photos = listPhoto;  
  32.             random = new Random();  
  33.         }  
  34.         public int numPhoto  
  35.         {  
  36.             get  
  37.             {  
  38.                 return photos.Length;  
  39.             }  
  40.         }  
  41.         public Photo this[int i]  
  42.         {  
  43.             get { return photos[i]; }  
  44.         }  
  45.     }  
  46.     public class PhotoViewHolder : RecyclerView.ViewHolder  
  47.     {  
  48.         public ImageView Image { get; set; }  
  49.         public TextView Caption { get; set; }  
  50.         public PhotoViewHolder(View itemview, Action<int> listener) : base(itemview)  
  51.         {  
  52.             Image = itemview.FindViewById<ImageView>(Resource.Id.imageView);  
  53.             Caption = itemview.FindViewById<TextView>(Resource.Id.textView);  
  54.             itemview.Click += (sender, e) => listener(base.Position);  
  55.         }  
  56.     }  
  57. }  
Step 10 - Main Activity Class
 
Now, go to Solution Explorer-> Project Name-> MainActivity and add the following code with appropriate namespaces.
 
(FileName: MainActivity)
 
C# Code
  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4. using Android.Support.V7.Widget;  
  5. using XamarinRecycleView.Adapter;  
  6. namespace XamarinRecycleView  
  7. {  
  8.     [Activity(Label = "RecycleView", MainLauncher = true, Theme ="@style/Theme.AppCompat.Light.DarkActionBar")]  
  9.     public class MainActivity : Activity  
  10.     {  
  11.         RecyclerView mRecycleView;  
  12.         RecyclerView.LayoutManager mLayoutManager;  
  13.         PhotoAlbum mPhotoAlbum;  
  14.         PhotoAlbumAdapter mAdapter;  
  15.         protected override void OnCreate(Bundle savedInstanceState)  
  16.         {  
  17.             base.OnCreate(savedInstanceState);  
  18.             mPhotoAlbum = new PhotoAlbum();  
  19.             // Set our view from the "main" layout resource  
  20.             SetContentView(Resource.Layout.Main);  
  21.             mRecycleView = FindViewById<RecyclerView>(Resource.Id.recyclerView);  
  22.             mLayoutManager = new LinearLayoutManager(this);  
  23.             mRecycleView.SetLayoutManager(mLayoutManager);  
  24.             mAdapter = new PhotoAlbumAdapter(mPhotoAlbum);  
  25.             mAdapter.ItemClick += MAdapter_ItemClick;  
  26.             mRecycleView.SetAdapter(mAdapter);  
  27.         }  
  28.         private void MAdapter_ItemClick(object sender, int e)  
  29.         {  
  30.             int photoNum = e + 1;  
  31.             Toast.MakeText(this, "This is photo number " + photoNum, ToastLength.Short).Show();  
  32.         }  
  33.     }  
  34. }  
Output
 
 
Please share your comments and feedback.


Similar Articles