RecyclerView in Android

In this article;

• I will explain what a recyclerview is

• Also implement recyclerview in a simple project

What is a RecyclerView?

RecyclerView makes it easy to efficiently display large sets of data. You supply the data and define how each item looks, and the RecyclerView library dynamically creates the elements when they're needed.

Basically,when working with a recyclerview,one view will be used many times and this is becuase it is only created once there is a new item to display. e.g. when developing a book app,you will only create one view for title and the view will be used for all the titles available in the book app.

Let's try it in a project

Layouts

We have two layouts;

1. for holding our views

2. to hold the recycerview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_margin="10dp"
    >

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        tools:text="Title"
        android:textSize="30sp"
        />
    <TextView
        android:id="@+id/tv_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:textSize="20sp"
        />

</LinearLayout>

• for the views

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        tools:layout_editor_absoluteX="10dp"
        tools:layout_editor_absoluteY="10dp"
        tools:listitem="@layout/item_layout" />
</androidx.constraintlayout.widget.ConstraintLayout>

• for the recyclerview

  Adapter

Once you've determined your layout, you need to implement your Adapter and ViewHolder. These two classes work together to define how your data is displayed. The ViewHolder is a wrapper around a View that contains the layout for an individual item in the list. The Adapter creates ViewHolder objects as needed, and also sets the data for those views. The process of associating views to their data is called binding.

package ke.co.topup.recyclerviewpractice

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class RecyclerViewAdapter(private var titles:List<String>, private var details:List<String>) :
RecyclerView.Adapter<RecyclerViewAdapter.ItemViewHolder>(){

    class ItemViewHolder(itemView: View): RecyclerView.ViewHolder(itemView){
        val itemTitle: TextView = itemView.findViewById(R.id.tv_title)
        val itemdetails: TextView = itemView.findViewById(R.id.tv_details)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder {
        val view: View = LayoutInflater.from(parent.context).inflate(R.layout.item_layout,
                parent,false)
        return ItemViewHolder(view)
    }

    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        holder.itemTitle.text = titles[position]
        holder.itemdetails.text = details[position]
    }

    override fun getItemCount(): Int {
        return titles.size
    }
}

From the code above,we have three methods;

• onCreateViewHolder()-as the name suggests,this is called every time a new ViewHolder needs to be created.

• onBindViewHolder()-this is the method responsible for filling the ViewHolder with our data.

• getItemCount()-this is used to determine the number of items to be displayed in a layout.

Activity

package ke.co.topup.recyclerviewpractice

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {

    private var titleList = mutableListOf<String>()
    private var detailsList = mutableListOf<String>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        postToList()

        val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
        recyclerView.layoutManager = LinearLayoutManager(this)
        recyclerView.adapter = RecyclerViewAdapter(titleList, detailsList)
    }

    //add items to list
    private fun addList(title: String, details: String){
        titleList.add(title)
        detailsList.add(details)
    }
    //create sample items
    private fun postToList(){
        for (i in 1..25){
            addList("Title $i", "Details $i")
        }
    }
}

• to display our items

-> For more information on recyclerview,please check androids documentation RecylcerView

-> Github Repo for this project RecyclerView Practice

Thanks for reading