Understanding Recycler View

This is how recycler view looks like

With the advent of Android Lollipop(i.e.Android 5.0) , the RecyclerView made its way officially.In Android, RecyclerView is an advanced and flexible version of ListView and GridView. It is a container used for displaying large amount of data sets that can be scrolled very efficiently by maintaining a limited number of views.

RecyclerView was introduced in Material Design in API level 21 (Android 5.0 i.e Lollipop). Material Design brings lot of new features in Android that changed a lot the visual design patterns regarding the designing of modern Android applications.In RecyclerView android provides a lots of new features which are not present in existing ListView or GridView.

Why is Recycler View better than ListView?

1. Orientation : ListView can only layout the items in Vertical Arrangement and that arrangement cannot be customised according to our requirements. Suppose we need to create a horizontal List then that thing is not feasible with default ListView. But with introduction of RecyclerView we can easily create a horizontal or Vertical List. By using Layout Manager component of RecyclerView we can easily define the orientation of Items.
2. Use Of ViewHolder Pattern : ListView Adapters do not require the use of ViewHolder but RecyclerView require the use of ViewHolder that is used to store the reference of View’s.

In ListView it is recommended to use the ViewHolder but it is not compulsion but in RecyclerView it is mandatory to use ViewHolder which is the main difference between RecyclerView and ListView.

ViewHolder is a static inner class in our Adapter which holds references to the relevant view’s. By using these references our code can avoid time consuming findViewById() method to update the widgets with new data.

3. Adapters : In ListView we use many Adapter’s like ArrayAdapter for displaying simple array data, BaseAdapter and SimpleAdapters for custom Lists. In RecyclerView we only use RecyclerView.Adapter to set the data in List. The Below code snippet shows how our CustomAdapter looks when we extends RecyclerView.Adapter class and use ViewHolder in it.

4.Item Animator: ListView are lacking in support of good animation. RecyclerView brings a new dimensions in it. By using RecyclerView. ItemAnimator class we can easily animate the view.

5. Item Decoration: In ListView dynamically decorating items like adding divider or border was not easy but in RecyclerView by using RecyclerView. ItemDecorator class we have a huge control on it.

The most important feature:

As the name suggests it recycles the views which are out of the visibility of the user.For example, if a user scrolled down to a position where the items 4 and 5 are visible; items 1, 2 and 3 would be cleared from the memory to reduce memory consumption.

How to add RecyclerView to a project?

First we have to add the dependency to the build.gradle.

dependencies {
    implementation 'com.android.support:recyclerview-v7:27.0.0'
}

Remember to update the library version to the latest one.You can check it here.

Get Started !!

Step 1:Create a new project and give it a name of your choice

Step 2:add the dependency stated above in Gradle Scripts > build.gradle.

Step 3:Open res -> layout -> activity_main.xml (or) main.xml and add following code:

<?xml version=”1.0" encoding=”utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android=”http://schemas.android.com/apk/res/android" android:layout_width=”match_parent” android:layout_height=”match_parent” android:id=”@+id/programmingList”>
 </android.support.v7.widget.RecyclerView>

Step 3:Create a new XML res -> layout ->list_item_layout.xml add the following code:

In this step we create a new xml file for item row in which we creates a TextView and ImageView to show the data.

<?xml version=”1.0" encoding=”utf-8"?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android" android:layout_width=”match_parent” android:layout_height=”wrap_content” android:orientation=”horizontal” android:padding=”10dp”>
 <ImageView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:src=”@mipmap/ic_launcher” 
android:id=”@+id/ImgIcon”/> 
<TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” 
android:text=”@string/app_name” 
android:layout_weight=”1" 
android:id=”@+id/txt” 
android:textSize=”24sp” 
android:paddingLeft=”16dp” 
android:layout_gravity=”center”/>
 </LinearLayout>

This XML will look like similar below:

list_item_layout.xml

Step 4 :

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView; 
public class MainActivity extends AppCompatActivity 
{ 
@Override 
protected void onCreate(Bundle savedInstanceState) 
{ 
super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);
 RecyclerView programmingList = findViewById(R.id.programmingList); programmingList.setLayoutManager(new LinearLayoutManager(this)); 
String[] lang = {“Java”, “Javascript”, “c#”, “python”, “ruby”, “django”, “haskell”, “html”, “go”, “mango”, “apple”}; 
programmingList.setAdapter(new ProgrammingAdapter(lang)); 
}
}

Step 5 : Create Custom Adapter Class

what is an Adapter class ?

The adapter is the main code responsible for RecyclerView. It holds all the important methods dealing with the implementation of RecyclerView. A RecyclerView adapter just like any other adapter has the responsibility to bind datasets to Views that will be displayed in the window.The basic methods for a successful implementation are:

• onCreateViewHolder(ViewGroup parent, int viewType)
• onBindViewHolder(RecyclerView.ViewHolder holder, int position)
• getItemCount()

onCreateViewHolder(ViewGroup parent, int viewType)

It deals with the inflation of the layout as an item for the RecyclerView.This method is called right when the adapter is created and is used to initialize your ViewHolder(s).

wait what are View Holders ?

The views in the list are represented by view holder objects. These objects are instances of a class you define by extending RecyclerView.ViewHolder. Each view holder is in charge of displaying a single item with a view. For example, if your list shows music collection, each view holder might represent a single album.

@NonNull
@Override
public ProgrammingViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int i) 
{
 LayoutInflater inflater = LayoutInflater.from(parent.getContext()); View view = inflater.inflate(R.layout.list_item_layout, parent, false); 
return new ProgrammingViewHolder(view); 
}

onBindViewHolder(RecyclerView.ViewHolder holder, int position)

It deals with the setting of different data and methods related to clicks on particular items of the RecyclerView.

@Override public void onBindViewHolder(@NonNull ProgrammingViewHolder viewHolder, int i) 
{
 String title = data[i]; 
viewHolder.txt.setText(title);
 }

getItemCount()

It Returns the length of the RecyclerView i.e.the number of items inflated or present in it.

@Override
public int getItemCount()
 {
 return data.length;
 }

Now, Let’s create a ViewHolder class (a subclass inside the Adapter class and I’ve named it as ProgrammingViewHolder) and extend RecyclerView.ViewHolder

public class ProgrammingViewHolder extends ViewHolder
{
ImageView m;
TextView txt;
public ProgrammingViewHolder(@NonNull View itemView) { 
super(itemView);
m = itemView.findViewById(R.id.ImgIcon);
txt = itemView.findViewById(R.id.txt); 
}
}

Now the entire Custom Adapter (app -> java -> package -> ProgrammingAdapter.java) looks like:

import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.RecyclerView.ViewHolder;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView; 
public class ProgrammingAdapter extends RecyclerView.Adapter<ProgrammingAdapter.ProgrammingViewHolder>{ private String[] data;
 public ProgrammingAdapter(String[] data) 
{
 this.data = data; 
}
 @NonNull 
@Override 
public ProgrammingViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int i) 
{
 LayoutInflater inflater = LayoutInflater.from(parent.getContext()); View view = inflater.inflate(R.layout.list_item_layout, parent, false);
 return new ProgrammingViewHolder(view);
 }
 @Override
 public void onBindViewHolder(@NonNull ProgrammingViewHolder viewHolder, int i)
 {
 String title = data[i];
 viewHolder.txt.setText(title);
 }
 @Override 
public int getItemCount() 
{
 return data.length;
 }
public class ProgrammingViewHolder extends ViewHolder
{
 ImageView m;
 TextView txt;
 public ProgrammingViewHolder(@NonNull View itemView) { super(itemView); 
m = itemView.findViewById(R.id.ImgIcon);
 txt = itemView.findViewById(R.id.txt); }
}
}

Now Let’s run our Project.!!

This the final look you get

The entire Source Code can be found here.😃