Code Unboxing

In today’s article I will discuss the key concepts surrounding RecyclerView, What are the working components involved and lastly the steps on how to implement RecyclerView in your mobile application.

What is a RecyclerView?

Consider a scenario wherein you are developing a Mobile App that displays the latest news happening around the world in the Main page or Landing Page of your screen. Considering that you have a dataset that contains a lot of data the perfect component to be used is a RecyclerView.

So what is a RecyclerView? Basically it is an advanced and flexible version of the previous iterations of the list handling component in Android known as the ListView. What are some advantages of RecyclerView over ListView?

ViewHold Pattern – In implementing RecyclerView you are required to implement the said pattern while in the ListView it’s more of optional. Think of the pattern as a more optimize way of rendering your items in the list.

• Layout Manager – There are more options for RecyclerView (LinearLayout Manager, StaggeredLayout Manager, GridLayout Manager) compared to the ListView’s Vertical orientation only.

• Item Animator – Implementing Animations for ListView is a bit challenging compared to the out of the box support of RecyclerView.

• Item Decoration – RecyclerView ItemDecorator gives you a rich and flexible way of Decorating items compared to ListView.

• Touch Event – RecyclerView OnItemTouchListener is much more customizable compared to ListView OnItemClickListener.

• Performance – In general RecyclerView loading of list is much more efficient and faster compared to the ListView because of the precalculations that have been already done.

Implementing RecyclerView

Let’s Create a New Android Project

Let’s create a new Android Project and select an Empty Activity, name it as you want, select Kotlin as the Language support and API 23 as the minimum SDK as seen in figure 1.

Adding RecyclerView Widget and Glide in Gradle

First things first is to add the latest RecyclerView dependency in our Gradle file as seen in Figure 2. Take note that Android studio will notify you about migrating to AndroidX packages if you are going to use previous versions of the RecyclerView. After adding the said dependency you should sync the changes. We also need to add a component called Glide that will handle the loading of the image with a text source.

Adding RecyclerView in the Layout

Now let’s add the actual RecyclerView in activity_main.xml file and add an ID that we will use later for referencing our RecyclerView as shown in Figure 3.

Let’s Create our Model

Let’s create our Model which is responsible for handling our Data. In our model we will be creating a fictional news list composed of Images and there corresponding New Title. But first let’s create a new Package named Model as seen in Figure 4.

Then will add a Data Class file Called NewsList which is composed of two properties called NewsImage of type string (link to url) and NewsTitle which is also of type string as shown in Figure 5.

Creating our Local Datasource

Now that we have created our Model, lets try to create our datasource that will be displayed in our Recyclerview. Create a new class called DataSource then will create a public function called CreateDataSet that will return a type of ArrayList<NewsList> that will be later consumed by our Recyclerview as seen in Figure 6.

Creating our layout for our items in the RecyclerView

We need to create a separate layout file for the items inside our RecyclerView by adding a new Resource file and name it layout_news_list as seen in Figure 7.

Will then just add two views one is an ImageView which will render our image and the other one is just a TextView for displaying of Text as seen inFigure 8. Don’t forget to add an ID for both the ImageView and TextView because will reference them later.

Creating our RecyclerView Adapter and RecyclerView ViewHolder

First thing to do here is to Implement RecyclerView Adapter by creating NewListAdapter class as shown in Figure 9.

Next will create private variable of type List<NewsList> that will be populated later in our main activity as shown in Figure 10.

Next step is to override three methods mainly getItemCount, onBindViewHolder and onCreateViewHolder. Let’s start with the easiest part the getItemCount. Basically the purpose of this method is to just return the total item count as show on Figure 11.

Before we proceed with function implementation for onBindViewHolder and onCreateViewHolder let’s create another class called NewsListViewHolder which implements the RecyclerViewHolder that binds the data to the view itself as shown in Figure 12.

Let’s breakdown the NewsListViewHolder class, we have a constructor of type View wherein we are going to pass our “layout_news_list” view earlier as shown in Figure 13.

Next is our two private variables named newsImage and newsTitle which is initialized by our views NewsImage and NewsTitle. as shown in Figure 14.

Then lastly a function called Bind that actually binds the data to our View. Bind functionality also contains the usage of Glide component that we have added earlier as shown in Figure 15.

Next step is to pass our LayoutInflater to our newly created NewsListViewHolder class in order for us to get the reference for the newsImage and newsTitle as shown in Figure 16.

Next is to set the onBindViewHolder which is responsible for rendering the actual items that is seen inside the RecyclerView. The implementation as shown in Figure 17 basically tells to render the items that are visible on the list only that’s why using the RecyclerView is much more optimize and efficient compared to ListView.

Last thing to do in our NewsListAdapter is to create a function that will populate the data to our items called submitList as shown in figure 18.

Configuring our RecyclerView

The final step is to configure our RecyclerView’s ListAdapter and LayoutManager. Considering that our app contains only a single activity called MainActivity will do all of our configurations and setting of data on the OnCreate method of our MainActivity as shown in Figure 19.

Main highlights for the creation is to properly set the LayoutManager which we are using LinearLayoutManager as well as the our newsListAdapter which is being populated using the submitList as shown in Figure 20.

Let’s try to run our Android Emulator and see the result as shown in Figure 21.

Conclusion

We have successfully implemented a simple RecyclerView in our Android application from setting up the adapters to implementing the RecyclerView ViewHolder. You can try to download the finish project in the link below so that you can review some of the steps you’ve missed out. Implementing RecyclerView compared to ListView requires more code but the stricter requirement of RecyclerView for ViewHold Pattern will bring much more benefits compared to ListView.

Github: https://github.com/KirkPatrickJunsay/AndroidRecyclerViewQuickGuide

Happy Coding 🙂