RecyclerView are normally used to present large datasets. RecyclerViews are very customizable and very powerful. You can create custom itemviews and render them in a recyclerview. In this example we want to see how to render a list of cardviews in a recyclerview. Our data source is a simple android.runtime.javalist data structure. This is a C# Xamarin.Android project.

Screenshot

  • Here’s the screenshot of the project.

Xamarin Android RecyclerView example.

Xamarin Android Recyclerview example

  • Project Structure

Xamarin Android Recyclerview example

Common Questions this example explores

  • Xamarin Android RecyclerView example.
  • Show data in a recylcerview in xamarin android.
  • Xamarin RecyclerView with list of cardviews.

Tools Used

This example was written with the following tools:

  • Windows 8
  • Visual Studio IDE
  • Genymotion Emulator
  • Language : C#
  • Topic: Xamarin.Android RecyclerView,Xamarin.Android CardViews
  • Platform : Xamarin Android

Source Code

Lets jump directly to the source code.

MyAdapter.cs

  • Our MyAdapter class.
  • Derives from RecyclerView.Adapter.
  • Will inflate our model layout and bind data to the resulting views.
  • Also includes an inner MyViewHolder class.
using System;
using Android.Runtime;
using Android.Support.V7.Widget;
using Android.Views;
using Android.Widget;

namespace SimpleRecycler
{

    class MyAdapter : RecyclerView.Adapter
    {
        private readonly JavaList<String> galaxies;

        public MyAdapter(JavaList<String> galaxies)
        {
            this.galaxies = galaxies;
        }

        //BIND DATA TO VIEWS
        public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)
        {
            MyViewHolder h = holder as MyViewHolder;
            h.NameTxt.Text = galaxies[position];

        }

        //INITIALIZE VH
        public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType)
        {
            //INFLATE LAYOUT TO VIEW
            View v = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.Model, parent, false);
            MyViewHolder holder = new MyViewHolder(v);

            return holder;
        }

        //TOTAL NUM OF GALAXIES
        public override int ItemCount
        {
            get { return galaxies.Size(); }
        }

        /*
         * Our Viewholder class.
         * Will hold our textview.
         */
        internal class MyViewHolder : RecyclerView.ViewHolder
        {
            public TextView NameTxt;

            public MyViewHolder(View itemView)
                : base(itemView)
            {
                NameTxt = itemView.FindViewById<TextView>(Resource.Id.nameTxt);
            }
        }
    }
}

MainActivity.cs

  • Our MainActivity class.
  • We override our onCreate() method here.
  • Initialize our RecyclerView here ans set its adapter.
  • Also we define our data source.
using System;
using Android.App;
using Android.OS;
using Android.Runtime;
using Android.Support.V7.Widget;

namespace SimpleRecycler
{

    [Activity(Label = "SimpleRecycler", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        private RecyclerView rv;
        private MyAdapter adapter;

        /*
         * Oncreate method
         */
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

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

            //RV
            rv = FindViewById<RecyclerView>(Resource.Id.mRecylcerID);
            rv.SetLayoutManager(new LinearLayoutManager(this));
            rv.SetItemAnimator(new DefaultItemAnimator());

            //ADAPTER
            adapter = new MyAdapter(getGalaxies());
            rv.SetAdapter(adapter);

        }
        /*
         * Our data source
         * Returns a Android.Runtime.JavaList object
         */
        public static JavaList<String> getGalaxies()
        {
            JavaList<String> galaxies = new JavaList<String>
            {
                "StarBust",
                "Pinwheel",
                "IC 1011",
                "Sombrero",
                "Virgo Stellar Stream",
                "Canis Majos",
                "Cartwheel",
                "Ring Nebula",
                "Centaurus A",
                "Own Nebula",
                "Large Magellonic Cloud",
                "Small Magellonic Cloud",
                "MilkyWay",
                "Andromeda",
                "Messier 81",
                "Leo",
                "Hoag's Object",
                "Mayall's Object",
                "Messier 87",
                "Whirlpool",
                "Triangulumn"
            };

            return galaxies;
        }
    }
}

Main.axml

  • Content Layout.
  • Defines the views and widgets to be displayed inside the MainActivity.
  • In this case a RecyclerView.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="#009968"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/mRecylcerID"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

Model.axml

  • Model Layout.
  • Contains a CardView with textviews.
  • Will be inflated to a viewitem for our RecyclerView.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_margin="5dp"
        card_view:cardElevation="5dp"
        card_view:cardUseCompatPadding="true"
        card_view:cardCornerRadius="5dp">
      <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="#ffffff">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textColor="#333333"
                android:text="Caption"
                android:id="@+id/nameTxt"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="4dp" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</RelativeLayout>

Video Tutorial

  • Video version of this tutorial.

https://www.youtube.com/watch?v=aH-VydNLyI8

How To Run

  1. Download the project above.
  2. You’ll get a zipped file,extract it.
  3. Open the Visual Studio.
  4. Now close, already open project.
  5. From the Menu bar click on File >Open> Project/Solution.
  6. That’s it.

More

YouTube

  • Visit our channel for more examples like these.

Facebook

Oclemy,Cheers.

Categorized in:

Xamarin Android