Introduction to RecyclerView

We displayed a vertically scrolling list of items in our previous tutorial using ListView. In this tutorial we will have a look at RecyclerView, one of the very important design elements that help us build apps with material design easily. RecyclerView is included in Android Support Library, So before we proceed make sure you have already downloaded the support Libraries in the SDK Manager.

Click SDK Manager icon from Android Studio to open the SDK Manager, and check if Android Support Repository and Android Support Library are installed.

Once you have installed Support Library you are ready to proceed.

 While using ListView we made use of ViewHolder pattern to increase the ListView performance. We used a ViewHolder class to hold all our views in the list item to avoid looking them up each time the item is displayed. RecyclerView uses the Viewholder pattern by default. In fact we are forced to use the RecyclerView.ViewHolder class while using RecyclerView, that makes us build the lists with better performance.

RecyclerView unlike the ListView is a ViewGroup and it uses LayoutManager to arrange the items.
RecyclerView has three types of LayoutManagers by default that we can use to design our layouts.

1) LinearLayout manager : LinearLayoutManager arranges the items in a linear fashion by arranging the item either in horizontal or vertical orientation.

2) GridLayoutManager : GridLayoutManager is used to arrange the items in a two-dimensional grid arranging the items in rows and columns. GridLayoutManager is used for items with uniform height. If we have items with different heights then all the items will have the same height as the item with maximum height.

3) StaggeredGridLayoutManager: StaggeredGridLayoutManager also arranges items as a grid but is used when we want to have items with different heights.


We will be building the list of the android versions in this tutorial so we will use LinearLayoutManager.

So let's start working with RecyclerView by creating new Android Project.

Since RecyclerView is a part of Support Library we need to declare the dependency in our build.gradle file. Open build.gradle (the one in app module) and then add following dependency.

   compile 'com.android.support:recyclerview-v7:22.2.0'  

Now lets add a RcyclerView to our layout. Open layout/activity_main.xml file and add the RecycleView.

 <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:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">  
   <android.support.v7.widget.RecyclerView  
     android:id="@+id/recyclerView"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent" />  
 </RelativeLayout>  

Let's define our Model for the list item, Let's create a Java class named AndroidVersion.

 package com.technoguff.recyclerviewexample;  
   

 public class AndroidVersion {  
     
   private String codeName;  
   private String version;  
   private int icon;  
   
   
   public String getCodeName() {  
     return codeName;  
   }  
   
   public void setCodeName(String codeName) {  
     this.codeName = codeName;  
   }  
   
   public String getVersion() {  
     return version;  
   }  
   
   public void setVersion(String version) {  
     this.version = version;  
   }  
   
   public int getIcon() {  
     return icon;  
   }  
   
   public void setIcon(int icon) {  
     this.icon = icon;  
   }  
 }  
   

Then , create a layout for the item view. Create new layout file named layout_item.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:orientation="vertical" android:layout_width="match_parent"  
   android:layout_height="match_parent">  
   <ImageView  
     android:id="@+id/ivIcon"  
     android:layout_width="64dp"  
     android:layout_height="64dp"   
     android:layout_margin="5dp"/>  
   
   <TextView  
     android:id="@+id/codeName"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_toRightOf="@+id/ivIcon"  
     android:textStyle="bold"  
     android:textSize="20sp"  
     />  
   
   <TextView  
     android:id="@+id/version"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_toRightOf="@id/ivIcon"  
     android:layout_below="@+id/codeName"  
     />  
   
 </RelativeLayout>  

Now, Create some sample data for our listview by creating an ArrayList of AndroidVersions in MainActivity and create drawable-mdpi folder in res folder of our project. And then place the icons for different versions. GET THE ICONS HERE.

 public class MainActivity extends AppCompatActivity {  
   private ArrayList<AndroidVersion> mVersionList;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     //Sample Data :: For this tutorial, let's just create sample data in the main activity. In real projects  
     // we will either get the data for our list item from webservices or local storage.  
     mVersionList = new ArrayList<AndroidVersion>();  
     AndroidVersion version = new AndroidVersion();  
     version = new AndroidVersion();  
     version.setCodeName("Cupcake");  
     version.setVersion("Android 1.5");  
     version.setIcon(R.drawable.cupcake);  
     mVersionList.add(version);  
     version = new AndroidVersion();  
     version.setCodeName("Donut");  
     version.setVersion("Android 1.6");  
     version.setIcon(R.drawable.donut);  
     mVersionList.add(version);  
     version = new AndroidVersion();  
     version.setCodeName("Eclair");  
     version.setVersion("Android 2.0");  
     version.setIcon(R.drawable.eclair);  
     mVersionList.add(version);  
     version = new AndroidVersion();  
     version.setCodeName("Froyo");  
     version.setVersion("Android 2.2");  
     version.setIcon(R.drawable.froyo);  
     mVersionList.add(version);  
     version = new AndroidVersion();  
     version.setCodeName("Gingerbread");  
     version.setVersion("Android 2.3");  
     version.setIcon(R.drawable.gingerbread);  
     mVersionList.add(version);  
 ....  
 ....  
 ....  
 ..  

Now we have created the sample data for the list we will now populate it to our RecyclerView. For that let's create an Adapter. RecyclerView provides RecyclerView.Adapter class for creating the adapter. Let's add the adapter.


Create a Java class and extend it from RecyclerView.Adapter, we will have  define the ViewHolder for the Adapter so create a View holder. Let's name it MyViewHolder.

Create the required constructor and add the override methods required by the Adapter class.

Now our Adapter looks like this,

 public class AndroidVersionAdapter extends RecyclerView.Adapter<AndroidVersionAdapter.MyViewHolder>{  
   @Override  
   public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {  
     return null;  
   }  
   @Override  
   public void onBindViewHolder(MyViewHolder myViewHolder, int i) {  
   }  
   @Override  
   public int getItemCount() {  
     return 0;  
   }  
   class MyViewHolder extends RecyclerView.ViewHolder{  
     public MyViewHolder(View itemView) {  
       super(itemView);  
     }  
   }  
 }  

Next, we will need the data for the Adapter let's add a constructor to AndroidVersionAdapter.

 ArrayList<AndroidVersion> mVersionList;  
   public AndroidVersionAdapter(ArrayList<AndroidVersion> versionList) {  
     mVersionList = versionList;  
   }  

Now update MyViewHolder class so that it finds the views in our itemLayout.

 //ViewHolder  
   class MyViewHolder extends RecyclerView.ViewHolder{  
     TextView codeName;  
     TextView version;  
     ImageView iconImage;  
     public MyViewHolder(View itemView) {  
       super(itemView);  
       codeName = (TextView)itemView.findViewById(R.id.codeName);  
       version = (TextView)itemView.findViewById(R.id.version);  
       iconImage = (ImageView) itemView.findViewById(R.id.ivIcon);  
     }  
   }  

Now let's have a look at the three methods that we override.

1) onCreateViewHolder

      onCreateViewHolder is called by the Layout manager when ViewHolder is created to inflate the layout we defined in XML, and ViewHolder finds each view in the given Layout.

2) onBindViewHolder

     onBindViewHolder  is also called by the LayoutManager to populate the data to the views.

3) getItemCount

     This method is used by LayoutManager to know the size of our Data.

Let's implement these three methods.

   @Override  
   public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {  
     LayoutInflater inflater = LayoutInflater.from(viewGroup.getContext());  
     View view = inflater.inflate(R.layout.layout_item, viewGroup, false);  
     MyViewHolder holder = new MyViewHolder(view);  
     return holder;  
   }  
   @Override  
   public void onBindViewHolder(MyViewHolder myViewHolder, int i) {  
     AndroidVersion version = mVersionList.get(i);  
     myViewHolder.codeName.setText(version.getCodeName());  
     myViewHolder.version.setText(version.getVersion());  
     myViewHolder.iconImage.setImageResource(version.getIcon());  
   }  
   @Override  
   public int getItemCount() {  
     return mVersionList.size();  
   }  

Next step is to set this adapter to the RecyclerView.

  private RecyclerView mRecyclerView;  
   private AndroidVersionAdapter mAdapter;  

and in onCreate,

 LinearLayoutManager mLayoutManager = new LinearLayoutManager(this);  
     mRecyclerView.setLayoutManager(mLayoutManager);  
     mRecyclerView.setAdapter(mAdapter);  

We used LinearLayoutManager to arrange our items, Let't run the app and see how it looks.

Now let's change it to GridLayoutManager with span value of 2 which makes the view arrange in two columns.

 GridLayoutManager mLayoutManager = new GridLayoutManager(this, 2);  

Get the full source code of the project on GitHub