Shayaan Siddiqui

Sign in

Background Information about RecyclerView

This control replaces a ListView, which has been marked as Legacy by Google. What this means is that this widget may stop receiving updates as Android gains new features or that it may be completely dropped from Android with a future update. Therefore, it is recommended that Android Developers switch to a new modern, yet flexible, iteration of ListView. This new widget is called the RecyclerView.

So, the million-dollar question is “Why get rid of something that works fine?”. The problem is not immediately obvious if you’re data set is small, or your views are light weight. If you have a very large dataset or your views are more complex, the entire User Interface (UI) can become sluggish which will eventually cause the device to slow down; ultimately giving your users a terrible experience and giving your app a 1-star review.

Google’s implementation of the RecyclerView widget takes a more practical approach; it will only inflate enough View objects to fill the screen. As you move through the list, views are recycled as they exit the screen, reinflated with new data and pushed back into the other end of the widget. This tackles the ListView widget’s biggest problem with massive datasets. Unfortunately, this also creates a new problem, the developer needs to write their own RecyclerViewAdapter to handle the data (instead of relying on a more generic ArrayAdapter).

The framework also enforces you to use a pattern called the ViewHolder Pattern. In this pattern, a special class is created that maintains the state of the View that displays a single peice of data. The ViewHolder is a static inner class, which means that it uses less memory and also serves as a utility class to help with interactions that affect pieces of data in the list.

Anatomy of a RecyclerView

The basic anatomy of a RecyclerView needs the following to work:

*RecyclerView.Adapter (Handle the data collection and bind it to the view)

*LayoutManager (For positioning items)

*ItemAnimator (Helps with animating the items, as items are added or removed)

However, in a RecyclerView, there are features that separate your code into maintainable components even as they enforce memory-efficient design patterns.

Instructions for setting up a RecyclerView
In this project we are building a simple app to sell Shoes, so all the related names will have to do with Shoes. Your application may differ if you choose not to follow this tutorial.

Step 1:
In activity_main.xml (design tab)

Delete the default TextView.

Find RecyclerView in the view search box.

Drag the RecyclerView underneath the ConstraintLayout.

You will be asked to add recyclerview-v7 project dependency and select OK

Give the RecyclerView an id. In this post, we are going to call it “rv_sneakers_list”.

Step 2: build.gradle(module: app)

Step 3: activity_main.xml

Step 4: Create a new layout file called “sneakers_list_item”.

In sneakers_list_item.xml

Add a TextView and change the layout_height of the LinearLayout to “wrap_content” so it doesn’t only show one TextView per page.

Give the TextView an id of tv_sneakers_type.

sneaker_list_item.xml

Step 5:

We need to create an ArrayList and add sneakers to the list.Add a LinearLayoutManager. Layout Managers are used to position views inside the RecyclerView.We will then need to access the RecyclerView adapter and load our data into it. Call the adapter “SneakersAdapter”. Sneakers Adapter will take two parameters: the ArrayList of sneakers and context.
In this step, we will create an actual SneakersAdapter:

MainActivity.kt

Step 6:

Create a new Kotlin file in the same folder with MainActivity called “SneakersAdapter”

In SneakersAdapter.kt

Create a SneakersAdapter class that implements a RecyclerView Adapter. It will take two parameters: the ArrayList of sneakers and context.

Create a ViewHolder class below the SneakersAdapter class. In the ViewHolder class, create a variable to hold the TextView (tv_sneakers_type) that we will be loading each sneaker into.

To fix the error in the SneakersAdapter class, override all three functions in the class (getItemCount, onCreateViewHolder, onBindViewHolder)

In getItemCount, we will return the number of sneakers in the list.

In onCreateViewHolder, we will inflate the sneakers_list_item view that we will be using to hold each list item.

In onBindViewHolder, we will bind the list items to TextViews.

SneakersAdapter.kt

Now run the project.

Example: Shopping Cart

Step 1:
First, go to your ../app/build.gradle file and paste this inside the dependencies block, as we’ll be using these dependencies.

Then, amend your styles.xml like the following. This should enable us to use a toolbar inside our application.

Step 2:
Next step is to build our product model, adapter and layout

Create product.kt file

Now create a Photo.kt file

Step 3:
Now, we’ll build our product adapter responsible to handle the display of our products list.

Create a ProductAdapter.kt file

Step 4:

In this step, we’ll create our product item layout.

Our layout contains an ImageView and two TextViews.

Also, we need to create product_row_item file.

Step 5:

We need to create APIConfig.kt file now.
This class gives us an instance of Retrofit for our network calls:

Next, create an API Interface file in the src/main/java/yourPackage folder called ApiService.kt.

Step 6:
In this step, RecycleView is important, so follow our steps.

Step 7:

Next, go to your src/main/MainActivity.kt file

And finally internet permission:

Conclusion

We have demonstrated how to get data/products from an external API and render it with the help of a RecyclerView. And we represented to You some advantages of RecycleView.

Tech Enthusiast and Software Engineer