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

<?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="match_parent">
  <android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:scrollbars="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>
</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

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:card_view="http://schemas.android.com/apk/res-auto"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content">
  <android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardElevation="4dp"
    card_view:cardCornerRadius="5dp"
    card_view:cardUseCompatPadding="true">
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="8dp">
      <ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/imageView"
    android:scaleType="fitCenter"/>
    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="#333333"
    android:text="Caption"
    android:id="@+id/textView"
    android:layout_gravity="center_horizontal"
    android:layout_marginLeft="4dp"/>
    </LinearLayout>
  </android.support.v7.widget.CardView>
</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

using Android.Support.V7.Widget;
using Android.Views;
using System;
namespace XamarinRecycleView.Adapter
{
    public class PhotoAlbumAdapter : RecyclerView.Adapter
    {
        public event EventHandler<int> ItemClick;
        public PhotoAlbum mPhotoAlbum;
        public PhotoAlbumAdapter(PhotoAlbum photoAlbum)
        {
            mPhotoAlbum = photoAlbum;
        }
        public override int ItemCount
        {
            get { return mPhotoAlbum.numPhoto; }
        }
        public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)
        {
            PhotoViewHolder vh = holder as PhotoViewHolder;
            vh.Image.SetImageResource(mPhotoAlbum[position].mPhotoID);
            vh.Caption.Text = mPhotoAlbum[position].mCaption;
        }
        public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType)
        {
            View itemView = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.PhotoCard, parent, false);
            PhotoViewHolder vh = new PhotoViewHolder(itemView, OnClick);
            return vh;
        }
        private void OnClick(int obj)
        {
            if (ItemClick != null)
                ItemClick(this, obj);
        }
    }
}

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

using Android.Support.V7.Widget;
using Android.Views;
using Android.Widget;
using System;
namespace XamarinRecycleView
{
    public class Photo
    {
        public int mPhotoID { get; set; }
        public string mCaption { get; set; }
    }
    public class PhotoAlbum
    {
        static Photo[] listPhoto =
        {
            new Photo() {mPhotoID = Resource.Drawable.Android1, mCaption = "Ahsan 1"},
            new Photo() {mPhotoID = Resource.Drawable.Android2, mCaption = "Ahsan 2"},
            new Photo() {mPhotoID = Resource.Drawable.Android3, mCaption = "Ahsan 3"},
            new Photo() {mPhotoID = Resource.Drawable.Android4, mCaption = "Ahsan 4"},
            new Photo() {mPhotoID = Resource.Drawable.Android5, mCaption = "Ahsan 5"},
            new Photo() {mPhotoID = Resource.Drawable.Android1, mCaption = "Ahsan 6"},
            new Photo() {mPhotoID = Resource.Drawable.Android2, mCaption = "Ahsan 7"},
            new Photo() {mPhotoID = Resource.Drawable.Android3, mCaption = "Ahsan 8"},
            new Photo() {mPhotoID = Resource.Drawable.Android4, mCaption = "Ahsan 9"},
            new Photo() {mPhotoID = Resource.Drawable.Android5, mCaption = "Ahsan 10"},
        };
        private Photo[] photos;
        Random random;
        public PhotoAlbum()
        {
            this.photos = listPhoto;
            random = new Random();
        }
        public int numPhoto
        {
            get
            {
                return photos.Length;
            }
        }
        public Photo this[int i]
        {
            get { return photos[i]; }
        }
    }
    public class PhotoViewHolder : RecyclerView.ViewHolder
    {
        public ImageView Image { get; set; }
        public TextView Caption { get; set; }
        public PhotoViewHolder(View itemview, Action<int> listener) : base(itemview)
        {
            Image = itemview.FindViewById<ImageView>(Resource.Id.imageView);
            Caption = itemview.FindViewById<TextView>(Resource.Id.textView);
            itemview.Click += (sender, e) => listener(base.Position);
        }
    }
}

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

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Support.V7.Widget;
using XamarinRecycleView.Adapter;
namespace XamarinRecycleView
{
    [Activity(Label = "RecycleView", MainLauncher = true, Theme ="@style/Theme.AppCompat.Light.DarkActionBar")]
    public class MainActivity : Activity
    {
        RecyclerView mRecycleView;
        RecyclerView.LayoutManager mLayoutManager;
        PhotoAlbum mPhotoAlbum;
        PhotoAlbumAdapter mAdapter;
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            mPhotoAlbum = new PhotoAlbum();
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            mRecycleView = FindViewById<RecyclerView>(Resource.Id.recyclerView);
            mLayoutManager = new LinearLayoutManager(this);
            mRecycleView.SetLayoutManager(mLayoutManager);
            mAdapter = new PhotoAlbumAdapter(mPhotoAlbum);
            mAdapter.ItemClick += MAdapter_ItemClick;
            mRecycleView.SetAdapter(mAdapter);
        }
        private void MAdapter_ItemClick(object sender, int e)
        {
            int photoNum = e + 1;
            Toast.MakeText(this, "This is photo number " + photoNum, ToastLength.Short).Show();
        }
    }
}

Output

 

 

Please share your comments and feedback.