RecyclerViews in Android

RecyclerViews are the successor to ListViews in Android. RecyclerViews are more dynamic, flexible, but also harder to set-up. In this article, I’m going to walk-through the steps on how to implement a RecyclerView in your own Android apps!

A RecyclerView has a LayoutManager that tells it how to display itself. Some basic ways are in a grid, or to mimic the ListView - which we will do in this tutorial. There is also an adapter, which acts like a middle-man between the RecyclerView and the data set.

Step 0: Before you begin

Before you begin, try to have an idea of what you want each row of the RecyclerView to contain. I try to sketch what I want the rows to look like before I start to actually code. Also under your build.gradle(Module:app) file, add this following dependency:

compile ‘com.android.support:recyclerview-v7:25.3.1’

Step 1: Add the XML Layout

Under App->res->layout, add a new layout resource file.

For the root element, choose something that will help facilitate your design idea. I’m going with a relative layout for this example.

Step 2: Build your XML layout

Using either the design or text views, build your layout as you envisioned(or drew in step 0 ;) ) For this example, I’ve included my very basic layout schematics below.

Step 3: Create the adapter class

The next step is to create a class to act as the adapter between the data and the recyclerview. We are going to add a java class to do so. Add the java class under app->java->(the non green folder).

There are quite a few requirements throughout this step, so don’t stress over all the initial errors. We’ll work through them and when this step is finished, there should be no more errors. The class declaration is as follows. ‘yourJavaClassFileName’ should be replaced with what you named your class file.

public class 'yourJavaClassFileName'extends RecyclerView.Adapter<'yourJavaClassFileName'.MyViewHolder>

MyViewHolder is a class that will be implemented inside of the adapter class. Let’s start off with that one. Inside this class, we will be assigning the views to variables to be accessed later. Here is my version:

public static class MyViewHolder extends RecyclerView.ViewHolder{
TextView contentText;
ImageView imageView, shareButton, starButton, xButton;

public MyViewHolder(View itemView){
super(itemView);
contentText = (TextView) itemView.findViewById(R.id.contentText);
imageView = (ImageView) itemView.findViewById(R.id.imageView);
shareButton = (ImageView) itemView.findViewById(R.id.shareButton);
starButton = (ImageView) itemView.findViewById(R.id.starButton);
xButton = (ImageView) itemView.findViewById(R.id.xButton);
}
}

The constructor for this adapter class will take in a context argument and a data collection. Ideally, you should make a class that wraps all relevant data that each row requires. Then you can have an ArrayList of that class where each index corresponds to a row of the RecyclerView. I wrote a very basic class to exemplify what I was talking about. Note: make the class in a separate Java file.

public class DataHolder{
private String text;
private ImageView imageView;

public DataHolder(String text, ImageView imageView) {
this.text = text;
this.imageView = imageView;
}

public String getText() {
return text;
}

public void setText(String text) {
this.text = text;
}

public ImageView getImageView() {
return imageView;
}

public void setImageView(ImageView imageView) {
this.imageView = imageView;
}
}

And here is the constructor for the RecyclerViewAdapter:

private ArrayList<DataHolder> data;
private LayoutInflater inflater;
RecyclerViewAdapter(Context context, ArrayList<DataHolder> data){
inflater=LayoutInflater.from(context);
this.data = data;
}

Now let’s move on to the methods that the adapter class has to implement. There are three of them: onCreateViewHolder, onBindViewHolder, and getItemCount.

The onCreateViewHolder method essentially inflates each new row with its layout and assigns a ViewHolder to manage the elements contained in the row. All in all the code required for this method is as follows:

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = inflater.inflate(R.layout.recyclerview_row,parent,false);
return new MyViewHolder(view);
}

Next, let’s tackle the onBindViewHolder method. This is where each row will be built and where the assignments will be made to the variables we made in the ViewHolder class. We can grab the data from our ArrayList of data where the positions are equal.

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.contentText.setText(data.get(position).getText());
holder.imageView.setImageDrawable(data.get(position).getImageView().getDrawable());
}

Lastly, for our getItemCount method, we’ll just return the size of the ArrayList.

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

Step 4: Add some Image Drawables

Under app->res->drawable, right-click and “show in explorer”. In this folder, add any images you’d like to use.

Step 5: Incorporate the adapter into your main code

We’ll need the folowing private data members:

ArrayList<DataHolder> data;
RecyclerViewAdapter adapter;
RecyclerView recyclerView;

Here is the code for the main activity where everything will fit together. I’ve just put everything inside the onCreate method, but feel free to break it up among the other activity lifestyle methods.

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
data = new ArrayList<>();

//add some dummy data to our ArrayList
for(int i = 0; i < 15; i++){
DataHolder temp = new DataHolder("Position " + i, R.drawable.smile);
data.add(temp);
}

//set-up the adapter
adapter = new RecyclerViewAdapter(MainActivity.this,data);
//set the adapter
recyclerView.setAdapter(adapter);

LinearLayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
//optional divider decoration of a line under each row
DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
layoutManager.getOrientation());
recyclerView.addItemDecoration(dividerItemDecoration);
}

I hope this was informative and helpful. Good luck in your future projects! Here is the link to my GitHub repository where you can download this source code and tinker with it to achieve any result you’d like!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.