Create a List in Android using RecyclerView — Part 1

Welcome to the first article in ‘Create List in Android using RecyclerView’ Series.

Introduction, some boring stuff

RecyclerView is an Android ViewGroup by definition, meaning it is designed to contain other Android views like Button, TextView, EditText etc. It is basically used to implement lists and grid in Android. Although ListView and GridView are already there but RecyclerView is used the most. Reason being, it can render horizontal, vertical, grid and staggered lists with a slight change of lines of code.

I’ll write about these different Views soon. PS: This tutorial is meant for absolute beginner and beginner level Android Developers.

Okay enough talking, let’s get on with it.

Create New Project

Create a new Android Project
Create a new Android Project
Create a new Android Project in Android Studio

Add RecyclerView Dependency

Open app level build.gradle file

Add the following line in the dependency section of the file.

implementation ‘androidx.recyclerview:recyclerview:1.1.0’
Add the dependency for RecyclerView and click on Sync Now

Then click on ‘Sync Now’ on the top right and let the dependency get loaded. FYI, you need to have an active Internet for this. Once the gradle build is done, we can start writing some code. 🌝

Giving our App a UI

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_movies"
android:layout_height="match_parent"
android:layout_width="match_parent"
tools:listitem="@layout/row_movie"
/>
</LinearLayout>

Do you watch Movies?

We chose to show some static movies data in our list. We are following MVC kind of pattern here. What this means is that we have a Model, a View and a Controller of these two. In simple words, Model contains data, View is where the data is loaded and Controller the transactions between Model and View. OTH, right? Don’t stress it too much if you don’t get things now, you will, but for now let’s write it out.

Proceed to creating a model class named Movie.java. Objects of this class will contain the data fields which we want to store and display in the RecyclerView.

Create new Java class named Movie.java

Now write the following code in the Movie.java class.

public class Movie {
private String name;
private String year;
private String directorName;
public Movie(String name, String directorName, String year) {
this.name = name;
this.directorName = directorName;
this.year = year;
}
public String getName() {
return name;
}
public String getDirectorName() {
return directorName;
}
public String getYear() {
return year;
}
}

Where do you watch movies?

Now we will be creating a row layout file to contain a view inside the RecyclerView. Create a new layout file named row_movie.xml and write the following code in it.

<?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="vertical"
android:padding="5dp">
<TextView
android:id="@+id/txt_movie_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/string_movie_name"
android:padding="4dp"
android:textColor="@android:color/black"
android:textSize="22sp" />
<TextView
android:id="@+id/txt_director_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/string_director_name"
android:padding="4dp"
android:textSize="18sp" />
<TextView
android:id="@+id/txt_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/string_year"
android:padding="4dp"
android:textSize="18sp" />
</LinearLayout>

A ViewHolder to… Hold Views

ViewHolder is a class which holds the data that is to be shown in the UI for each view inside the RecyclerView.

Create a new class named MovieViewHolder.java and write the following code in it.

import android.view.View;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.cradle.recyclerviewexample.R;public class MovieViewHolder extends RecyclerView.ViewHolder { private TextView txtMovieName;
private TextView txtDirectorName;
private TextView txtYear;
public MovieViewHolder(@NonNull View itemView) {
super(itemView);
txtDirectorName = itemView.findViewById(R.id.txt_director_name);
txtMovieName = itemView.findViewById(R.id.txt_movie_name);
txtYear = itemView.findViewById(R.id.txt_year);
}
public void setMovieName(String movieName) {
this.txtMovieName.setText(movieName);
}
public void setDirectorName(String directorName) {
this.txtDirectorName.setText(directorName);
}
public void setYear(String year) {
this.txtYear.setText(year);
}
}

Views and Data Sources. How do they Communicate?

To achieve this, create a new Java class named MovieAdapter.java and write the following code in it.

public class MovieAdapter extends RecyclerView.Adapter<MovieViewHolder> {    private Context context;
private ArrayList<Movie> movieList;
...
...
}

The Adapter class has two members — namely movieList which will contain the data that needs to be loaded in the view and context which is the context of the Activity that uses the adapter object.

    @NonNull
@Override
public MovieViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(context).inflate(R.layout.row_movie, parent, false);
return new MovieViewHolder(view);
}

When the ViewHolder is created for the first time, that is when the data is ready to be loaded in the view, onCreateViewHolder callback method of adapter class is called. As you can see, it returns a ViewHolder instance — which in our case is MovieViewHolder. This method binds the row layout file to the with a view object object which is then used to initialise a ViewHolder instance.

    @Override
public int getItemCount() {
return movieList == null ? 0 : movieList.size();
}

This callback method is used by adapter class to determine the no of items in the list, hence the name.

    @Override
public void onBindViewHolder(@NonNull MovieViewHolder holder, int position) {
Movie movie = movieList.get(position);
holder.setDirectorName(movie.getDirectorName());
holder.setMovieName(movie.getName());
holder.setYear(movie.getYear());
}

Here we are. onBindViewHolder is another adaper callback method. This method is called iteratively for every object in the list and we need to define here what to do with our data. In our example, we just want to set some texts to some text fields.

Now, this is what our Adapter class looks like.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.cradle.recyclerviewexample.R;
import com.cradle.recyclerviewexample.model.Movie;
import com.cradle.recyclerviewexample.ui.MovieViewHolder;
import java.util.ArrayList;public class MovieAdapter extends RecyclerView.Adapter<MovieViewHolder> { private Context context;
private ArrayList<Movie> movieList;
public MovieAdapter(Context context, ArrayList<Movie> movieList) {
this.context = context;
this.movieList = movieList;
}
@NonNull
@Override
public MovieViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(context).inflate(R.layout.row_movie, parent, false);
return new MovieViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull MovieViewHolder holder, int position) {
Movie movie = movieList.get(position);
holder.setDirectorName(movie.getDirectorName());
holder.setMovieName(movie.getName());
holder.setYear(movie.getYear());
}
@Override
public int getItemCount() {
return movieList == null ? 0 : movieList.size();
}
}

Now, we are all set to move on to the MainActivity class to generate and populate data into the RecyclerView.

Ah Finally! Driving code

public class MainActivity extends AppCompatActivity {    private ArrayList<Movie> movieList;    private RecyclerView rvMovies;
...
...
}

MainActivity class has two members — movieList which we want to hold the list of movie objects and rvMovies which is just an object of RecyclerView type (used to handle operations on RecyclerView).

private void init() {
movieList = new ArrayList<>();
rvMovies = findViewById(R.id.rv_movies);
}

This method initialises the class members movieList and rvMovies with their a new ArrayList and RecyclerView respectively.

private void generateData() {
movieList.add(new Movie("Inception", "Christopher Nolan", "2010"));
movieList.add(new Movie("The Social Network", "David Fincher", "2010"));
movieList.add(new Movie("Mad Max: Fury Road", "George Miller", "2015"));
movieList.add(new Movie("12 Years a Slave", "Steve McQueen", "2013"));
movieList.add(new Movie("Whiplash", "Damien Chazelle", "2014"));
movieList.add(new Movie("Prisoners", "Denis Villeneuve", "2013"));
movieList.add(new Movie("Arrival", "Denis Villeneuve", "2016"));
movieList.add(new Movie("Django Unchained", "Quentin Tarantino", "2012"));
}

In this method we added some sample movies data to the movieList which we’ll use shortly in our adapter.

private void setData() {
rvMovies.setLayoutManager(new LinearLayoutManager(this));
rvMovies.setAdapter(new MovieAdapter(this, movieList));
}

In this method we set a LayoutManager for RecyclerView. Now, wait what? LayoutManager is used in the RecyclerView to position items accordingly. Specifically, LinearLayoutManager sets items linearly — horizontal or vertical, latter being the default, GridLayoutManager sets items in a grid like view and StaggeredGridLayoutManager sets items in a staggered grid like view.

In our example, we used LinearLayoutManager because we want to display list in linearly and this layout manager has vertical view as default.

Now, finally MainActivity should look like this.

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;import com.cradle.recyclerviewexample.R;
import com.cradle.recyclerviewexample.adapter.MovieAdapter;
import com.cradle.recyclerviewexample.model.Movie;
import java.util.ArrayList;public class MainActivity extends AppCompatActivity { private ArrayList<Movie> movieList; private RecyclerView rvMovies; private static final String TAG = "MainActivity"; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
generateData();
setData();
}
private void init() {
movieList = new ArrayList<>();
rvMovies = findViewById(R.id.rv_movies);
}
private void generateData() {
movieList.add(new Movie("Inception", "Christopher Nolan", "2010"));
movieList.add(new Movie("The Social Network", "David Fincher", "2010"));
movieList.add(new Movie("Mad Max: Fury Road", "George Miller", "2015"));
movieList.add(new Movie("12 Years a Slave", "Steve McQueen", "2013"));
movieList.add(new Movie("Whiplash", "Damien Chazelle", "2014"));
movieList.add(new Movie("Prisoners", "Denis Villeneuve", "2013"));
movieList.add(new Movie("Arrival", "Denis Villeneuve", "2016"));
movieList.add(new Movie("Django Unchained", "Quentin Tarantino", "2012"));
}
private void setData() {
rvMovies.setLayoutManager(new LinearLayoutManager(this));
rvMovies.setAdapter(new MovieAdapter(this, movieList));
}
}

Tired already? Relax, that’s all for it. You can now run the app and the result should be something like the video below.

If you have any query regarding this article or what are the upcoming articles, don’t feel lazy to comment that below. I’ll try my best to stick around.

Part 2 in this series will be coming soon in which we will learn how do they load data in JSON form from something called API and populate that data into RecyclerView along with some bonuses. Meanwhile stay connected.

A frontend developer proficient in Android, React.js and with a 2 years of industry experience in Android.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store