Introduction to Android RecyclerView

RecyclerView can be used to display large data. RecyclerView provides multiple enhancement over ListView or a GridView.

In RecyclerView we can set custom layout management for its children's, it has animation support built-in, has item decorator support and it uses the View-holder pattern.

Adding RecyclerView support

It is provided as part of the v7 support library.

To add RecyclerView support add the following dependency in your gradle build file.

dependencies {
 compile "com.android.support:recyclerview-v7:23.1.1"
}

Adding RecyclerView in your application is very similar to that of ListView. Lets go through the steps,

Create the layout file

Let activity_main.xml be our main layout file. Layout file should have android.support.v7.widget.RecyclerView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/fruitList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />
  
</RelativeLayout>

Create one more layout file to represent a row in the RecyclerView. Let us name the file as fruit.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/fruitNameText"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/holo_blue_light"
        android:layout_margin="1dp"
        android:text="name"/>

    <TextView
        android:id="@+id/vitaminCText"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/holo_blue_light"
        android:layout_margin="1dp"
        android:text="description"/>

</LinearLayout>

In our example we will have fruit and its vitamin C content as a list.
Lets create a simple class to store the values.

package com.example.recycleviewexample;

public class FruitData {
    public String mName;
    public String mVitaminC;

    public FruitData(String n, String d) {
        mName = n;
        mVitaminC = d;
    }

 // These data represent the initial data the the RecyclerView will have
 // These are just sample data
    static final FruitData[] getList1() {
        return new FruitData[] {
                new FruitData("Apricots", "5000"),
                new FruitData("Apple", "5000"),
                new FruitData("Banana", "10.000"),
                new FruitData("Blackberries", "150.000"),
                new FruitData("Cherries", "10.000"),
                new FruitData("Grapefruit", "40.000"),
                new FruitData("Grapes", "3000")
        };
    }
}

To add RecyclerView support we should have at-least three component, Adapter, ViewHolder and the RecyclerView itself.

Adapter and ViewHolder

Adapter manages the data, it should be an implementation of RecyclerView.Adapter. Our adapter class is shown below,

ViewHolder stores the view which we want to recycle. It will store view for one entry in the RecyclerView.

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;

// An implementation of the RecyclerView.Adapter with BasicFruitAdapter.ViewHolder as ViewHolder
public class BasicFruitAdapter extends RecyclerView.Adapter {

 // View holder, it will have views for fruitNameText(fruit name) and vitaminCText(vitamin C content). 
    public class ViewHolder extends RecyclerView.ViewHolder {
        public TextView mNameText;  // for fruitNameText
        public TextView mVitaminCText;  // for vitaminCText

  // In the constructor we will assign the views
        public ViewHolder(View v) {
            super(v);
            mNameText = (TextView) v.findViewById(R.id.fruitNameText);
            mVitaminCText = (TextView) v.findViewById(R.id.vitaminCText);
        }
    }

 // Stores the array of fruit data, FruitData has name and vitamin c content
    private ArrayList<fruitdata> mFruits = new ArrayList<fruitdata>();

    public BasicFruitAdapter(FruitData[] desc) {
        for (FruitData d: desc) {
            mFruits.add(d);
        }
    }

 // In this method we should create a row for our RecyclerView
 // and return an instance of ViewHolder
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit, parent, false);
        return new ViewHolder(v);
    }

 // Assign the values for the ViewHolder
 // This method can be called when we have to assign a newly created row or when recycling is required.
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        final FruitData fruit = mFruits.get(position);
        holder.mNameText.setText(fruit.mName);
        holder.mVitaminCText.setText(fruit.mVitaminC);
    }

    @Override
    public int getItemCount() {
        return mFruits.size();
    }
}

The final touch

Now we have almost everything ready, lets put everything together in our Activity implementation. 

package com.example.recycleviewexample;

import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import android.os.Bundle;

public class RecyclerBasicActivity extends AppCompatActivity {
    protected RecyclerView mRecyclerView;
    protected RecyclerView.LayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.main1);

  // Retrieve the RecyclerView
        mRecyclerView  = (RecyclerView)findViewById(R.id.alphaList);
  
  // Set LinearLayoutManager as we want to just display the data in linear fashion
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);
  
  // Set the adapter to the RecyclerView
        mRecyclerView.setAdapter(new BasicFruitAdapter(FruitData.getList1()));
    }
} 

That's it, we should now be able to display the data using the RecyclerView.

Complete example can be found at https://github.com/trsquarelab/androidexamples/tree/master/RecycleViewExample