Xamarin Android RecyclerView with GridLayoutManager.

RecyclerView is a new widget that has been introduced in the material design with Android 5.0 Lollipop. This widget is available for the previous versions of Android using the support libraries. RecyclerView is almost equal to the ListView but it differs in the layout that is used to display the data and also forcefully using the ViewHolder for recycling the view and increases the app performance.

There are three types of LayoutManager supported by the RecyclerView, they are

1. LinearLayoutManager shows items in a vertical or horizontal scrolling list.
2. GridLayoutManager shows items in a grid.
3. StaggeredGridLayoutManager shows items in a staggered grid.

In this post we will see how to create a simple RecyclerView using GridLayoutManager as the LayoutManager.

Lets create a RecyclerView in the main.axml page as shown below and provide the id as recyclerView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:scrollbars="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>

Now create a new layout which will get displayed in the RecyclerView as a list of items.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:card_view="http://schemas.android.com/apk/res-auto"
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content">
 <LinearLayout
 android:background="#22F51F8B"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:padding="8dp">
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textAppearance="?android:attr/textAppearanceMedium"
 android:textColor="#ffffff"
 android:text="Caption"
 android:background="#22F51F8B"
 android:id="@+id/textView"
 android:textSize="40dp"
 android:layout_gravity="center_horizontal"
 android:layout_marginLeft="4dp" />
 </LinearLayout>
</FrameLayout>

Now create a ViewHolder for the RecyclerView which uses the specified view holder and recycles the view from the memory instead of creating new ones each time. This helps in improving the performance of the app.

 public class RecyclerHolder : RecyclerView.ViewHolder
 {
 public TextView Caption { get; private set; }
 public RecyclerHolder(View itemView) : base(itemView)
 {
 Caption = (TextView)itemView.FindViewById(Resource.Id.textView);
 }
 }

Now create a Adapter for the RecyclerView, as this adapter populates the data to the RecyclerView.

 public class RecyclerAdapter : RecyclerView.Adapter
 {
string[] items;

public RecyclerAdapter(string[] data)
 {
 items = data;
 }
 public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType)
 {
 View itemView = LayoutInflater.From(parent.Context).
 Inflate(Resource.Layout.layout, parent, false);

 RecyclerHolder vh = new RecyclerHolder(itemView);
 return vh;
 }

public override void OnBindViewHolder(RecyclerView.ViewHolder viewHolder, int position)
 {
 var item = items[position];

var holder = viewHolder as RecyclerHolder;
 holder.Caption.Text = items[position];
 }

public override int ItemCount
 {
 get
 {
 return items.Length;
 }
 }
 }

In MainActivity under OnCreate method set the adapter for the RecyclerView. As this adapter populates the data in the User Interface and also set the type of  LayoutManager used for this RecyclerView, we use GridLayoutManager as the LayoutManager. This LayoutManager displays data as per the columns specified in the GridLayoutManager. Even the orientation of the control can be changed in to horizontal.

protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);

// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);

// Get our button from the layout resource,
// and attach an event to it
RecyclerView recyclerView = FindViewById<RecyclerView>(Resource.Id.recyclerView);

var gridLayoutManager = new GridLayoutManager(this, 3);

recyclerView.SetLayoutManager(gridLayoutManager);

recyclerView.HasFixedSize = true;

recyclerView.SetAdapter(new RecyclerAdapter(new string[] { "Daily", " .Net ", " Tips", "Daily", " .Net ", " Tips", "Daily", " .Net ", " Tips", "Daily", " .Net ", " Tips", "Daily", " .Net ", " Tips" }));

}

Now the RecyclerView is created with the GridLayoutManager.
Hope this post might have helped in understanding the GridLayoutManager for RecyclerView.