Implement RecyclerView in android with kotlin

Do you have a large list of data to show to the users of your application?

Want a flexible and developer and user friendly way to show the data?

Then RecyclerView is the right choice.

RecyclerView is an advanced version of ListView that is more powerful and flexible.

It is a ViewGroup which is the successor of ListView and GridView including improvement on both of them.

As the name suggests, RecyclerView recycle the views which are out of visibility of user. For example, if user scrolled down to the item number 6 or 7 then items at position 1,2 or 3 would be cleared from the memory to reduce memory consumption.

Pre-requisites

• Basic knowledge of xml and kotlin
• Comfortable with classes and objects
• Should know use of ViewBinding

Components required to setup RecyclerView

• Model — The data to be shown to the user
• XML layout — For how to show data to the user
• Adapter — To bind the data to the RecyclerView
• ViewHolder — Holds the reference of the view that has to be dynamically modified during the execution of the program

Now let’s dive into the code step by step

Create a new project:

• Go to File>New>New Project
• Select Empty Activity and click Next
• Give your project a suitable name and enter package name (or leave it as default)
• Select Kotlin as Language and choose Minimum SDK (you can get help from Help me choose link)
• Click Finish
• After some processing time, the Android Studio main window will appear.

Create Model

• Create a new Kotlin class

Right click the package in the Project window

Choose New>Kotlin Class/File

Select Data Class from class type options

Enter name as FoodItem and press enter

• Do not worry about the error in the parenthesis of the data class
• Add fields (name and price) for our model

Code for our model class is:

Create xml layout for items

• Right click res/layout and select New>Layout Resource File
• Give name to the file as food_item_layout and click OK
• Copy paste this code to the file:

• In activity_main.xml add this code:

Set layout for the recyclerView in main activity

Initialize ViewBinding

• Open app level build.gradle file
• In android section add this code

buildFeatures{     
     viewBinding true
 }

• Now click Sync Now and wait to complete the build process

Set up adapter for recyclerView

Now this is where our data will connect to the views

• First create a new kotlin class and named it as FoodItemAdapter with parameters Context and MutableList<FoodItem>
• Now create an inner class FoodItemViewHolder - The ViewHolder for recycler view
• Code for the inner class:

• Extend FoodItemAdapter with RecyclerView.Adapter<FoodItemAdapter.FoodItemViewHolder>()
• Move your cursor to the error in the adapter class and press Alt+Enter and select Implement members to implement base class members of the adapter
• A window will be opened, select all the members from the list and click OK

These are the member functions

onCreateViewHolder () — This method is for creating viewHolder

onBindViewHolder() — This method is for binding our data to views

getItemCount ()— For how many items we have to display

• Add this code to onCreateViewHolder

• Create a function bind(foodItem: FoodItem) in the FoodItemViewHolder and bind data to views there
• This is the code:

• Now add this code to the onBindViewHolder member function

• In getItemCount just add this line - return foodItemList.size

This is the complete code for our adapter

All set with the adapter class

Initialize adapter in the MainActivity class

1. Populate the list of food items that will be shown in RecyclerView

• Create a property foodItemsList as MutableList<FoodItem> and initialize the list
• Create a function populateList() and call it in onCreate() of activity class after setContentView()
• Add this code in the method:

2. Now initialize adapter and layout manager

• Create a property adapter as FoodItemAdapter and make it lateinit
• Create a function setUpAdapter() and call it after populateList()
• Add this code to this function:

• The default orientation of the recyclerView is vertical, to change orientation to horizontal use this :

• Optional, to add a divider line between the views:

Now done with the setting up adapter in the activity

Tip: If you want to add, delete or edit items from the data then,

• First update the foodItemsList and then notify adapter about the change you made in the list at a specific position

For delete item:

In list — foodItemList.removeAt(position)

Notify adapter — notifyItemRemoved(position)

For add item:

In list — foodItemList.add(position, foodItem)

Notify adapter — notifyItemInserted(position)

For edit item:

In list — First remove the item foodItemList.removeAt(position) then add new item foodItemList.add(position,newFoodItem)

Notify adapter — notifyItemChanged(position)

Note:- To notify adapter outside the adapter class, use instance of the adapter — adapter.notifyItemInserted(position)

Now its time to run the application

Don’t know how to run application? See this

The source code for the application is available at github

There’s much more to RecyclerView than what is covered in this post, but with this brief overview, you should be able to create your own custom RecyclerView.

Thank you for reading 🙌🏼

Happy coding😀

BTW, I solve real-world problems by building useful apps. Have a look at our portfolio.

Connect with me on Github and LinkedIn