RecyclerView Basics and what is it all about!

A basic app to demonstrate different Layout Managers

Recycler View has been a very important part of Android since it was launched due to the performance improvements, but it surely increases the boilerplate code. In my opinion, if you have a very limited amount of data go for ListView or other options, if you have indeterminate data RecyclerView is the way to go!

That said, let’s see what is it all about and how to write a basic RecyclerView. All the code mentioned will be available on GitHub and I would recommend to download and modify the app to see how things work.

What is Recycler View?

Recycler View as said by name Recycles the views.
Fundamental of Recycler View is that it keeps as many views in memory as needed to display on screen + least amount needed to display nice animation.

What do I mean by that? Suppose an app shows 6 views on your screen and you scroll down and you see another view instantly, and for that to happen some extra views were created to display that smooth scroll. Hence total views created? 6 + some extra views which are still better than loading 100s of views in memory at once.

1. Let’s get into Recycler View

Recycler View data flow

As we can see, RecyclerView contains a Layout Manager which determines how the data would be displayed. The layout can be Linear, Grid or Staggered. The RecyclerView then calls for an Adapter which manages the logic of your Views and it calls for Data as well hence all the functionality given to Views is provided in Adapters.

Now, I’ll explain each aspect of code individually so that you can always create from scratch using it.

2. Dependency

com.android.support:recyclerview-v7:27.0.2

3. Layout

<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
...
/>

List item to be displayed in RecyclerView should be created as different layout(e.g. list_item.xml) file

4. Code

Here, in the main activity, I used findViewById to get recycler view. We have RecyclerView, now we need an Adapter. (RecyclerView Adapter forces to create a ViewHolder so that memory can be saved because for all list items there is single viewHolder)

We create a new file naming it SomeAdapter Then we extend RecyclerView.Adapter to use its functionality.

I’ll explain the ViewHolder later, for now see it as single item’s View
class SomeAdapter extends RecyclerView.Adapter<SomeAdapter.SomeAdapterViewHolder>{
...
}

Then we Override certain methods, I’ll explain them individually:

onCreateViewHolder(ViewHolder parent, int viewType) : This method manages what happens when View is created. RecyclerView creates some views, just enough for smooth scrolling (I explained that above).

parent is the Parent View where all the list items will be contained in.

viewType is used when we have more than one view types to display. Here we use Inflater to inflate a view of the single item in a list(list_item.xml as told above) for single list item and return it.

// This gets the context of Parent View
Context context = parent.getContext();

// This is the id of layout file (Defined for single list item)
int listItemId = R.layout.image_list_item;

// Attach to parent view immediately
boolean attachToRootImmediately = false;

// This inflates the list_item view and attaches to parent, then returned as new View
View view = LayoutInflater.from(context).inflate(listItemId, parent, false);

// This makes a new ViewHolder and passes this newly created view as parameter
return new SomeViewHolder(view);

onBindViewolder(ViewHolder holder, int position) : When we scroll the same view created in the beginning are kept throughout the run of our app, hence just the data is changed, which happens here. Binding means the view is on screen and needs data (Remember as I told above, an Adapter needs data). We need to instruct it how to get and display data.

holder: It is a single item we want to show (list_item.xml)

position: It is the position of the item in the list, and hence we can show data as per position in the list

int getItemCount() : This method returns the size of the data to be displayed. This makes manipulation of list easy and lite for RecyclerView.

int IMAGE_COUNT = 100;
...
@Override
protected int getItemCount(){
return IMAGE_COUNT;
}

This is what it would look like:

Now, the Adapter has been set up and now we need to define a ViewHolder. First, what is a ViewHolder? As I told many times by now, it has its own layout file which is for an individual list item in our list. For this app, I have ImageView in a LinearLayout for ViewHolder.

How to define it? We can make a separate Java class as SomeAdapterViewHolder and inherit RecyclerView.ViewHolder to get ViewHolder’s properties and methods.

class SomeAdapterViewHolder extends RecyclerView.ViewHolder{
...
}

Then we make default constructor which can be done as, ALT + INSERT and click on Constructor which will write the code for us. What does this do? When a ViewHolder is made in onCreateViewHolder in Adapter class then a view is passed. This tells the ViewHolder what View to display

public SomeViewHolder(View itemView) {
super(itemView);
 }

Now when accessing RecyclerView just add different Layout Manager and setup adapter as:

// Linear Layout manager
LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
// Grid Layout Manager
GridLayoutManager(this, spanCountInt);
// Staggered Layout Manager
StaggeredGridLayoutManager(spanCountInt, StaggeredGridLayoutManager.VERTICAL);
recyclerView.setAdapter(/*your adapter here*/);
recyclerView.setLayoutManager(/*layout manager here*/);

Output of app

Linear Horizontal, Linear Vertical, and Grid Layout (Left to Right)

In-app you can change the layout, a number of images to be loaded and more by changing some integer values. Do check them out!