Lists and Grids in Android with RecyclerView Kotlin Tutorial

RecyclerView is a ViewGroup added to the android studio as a successor of the GridView and ListView. It has been created to make possible construction of any lists with XML layouts as an item that can be customized vastly while improving on the efficiency of ListViews and GridViews.

Getting Started

To implement a basic RecyclerView Two sub-parts are needed to be constructed which offer the users the degree of control they require in making varying designs of their choice.

1.The ViewHolder: The ViewHolder is a java class that stores the reference to the card layout views that have to be dynamically modified during the execution of the program by a list of data obtained either by online databases or added in some other way.

2.The Data Class: The Data class is a custom java class that acts as a structure for holding the information for every item of the RecyclerView.

Implementation of the RecyclerView:

In the activity_main.xml file in layout directory, add the RecyclerView widget.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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="match_parent"
    tools:context=".MainActivity">


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycleView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Create a custom layout list_item.xml file with following code.

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_android" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="24dp"
        android:text="TextView"
        android:textColor="#000000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Create a ListData.java class with the following code. This class is used as (POJO) class which sets the properties of the items.

ListData.kt

data class ListData( var name :String, var imageid: Int)

Create a MyListAdapter.java class and add the following code. This class extends RecyclerView.Adapter class and override its unimplemented methods. The onCreateViewHolder() methods inflates the list_item.xml. In the onBindViewHolder() method each data items are set to each row.

MyListAdapter.kt

class MyListAdapter (private val dataSet: Array<ListData>) : RecyclerView.Adapter<MyListAdapter.ViewHolder>() {

    /**
     * Provide a reference to the type of views that you are using
     * (custom ViewHolder).
     */
    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val textView: TextView
        val imageView : ImageView

        init {

            textView = view.findViewById(R.id.textView)
            imageView = view.findViewById(R.id.imageView)

        }


    }

    // Create new views (invoked by the layout manager)
    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
        // Create a new view, which defines the UI of the list item
        val view = LayoutInflater.from(viewGroup.context)
            .inflate(R.layout.list_item, viewGroup, false)

        return ViewHolder(view)
    }

    // Replace the contents of a view (invoked by the layout manager)
    override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {

        // Get element from your dataset at this position and replace the
        // contents of the view with that element
        viewHolder.textView.text = dataSet[position].name
        viewHolder.imageView.setImageResource(dataSet[position].imageid)
        // Define click listener for the ViewHolder's View.
        viewHolder.itemView.setOnClickListener {
            Toast.makeText(it.context,"click on item: "+dataSet[position].name,Toast.LENGTH_LONG).show();
        }
    }

    // Return the size of your dataset (invoked by the layout manager)
    override fun getItemCount() = dataSet.size
}

Finally, in the MainActivity.java class, add the following code. This class creates the array of items for MyListData class and set the adapter class to RecyclerView.

MainActivity.kt

package com.examlpe.recycleviewsample

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

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

        //create static data set
        val myListData: Array<ListData> = arrayOf<ListData>(
                ListData("Android", R.drawable.ic_android),
                ListData("Account", R.drawable.ic_baseline_account),
                ListData("Archive", R.drawable.ic_baseline_archive),
                ListData("Brightness High",R.drawable.ic_baseline_brightness_high),
                ListData("Direction Bus", R.drawable.ic_baseline_directions_bus),
                ListData("Watch", R.drawable.ic_baseline_watch),
                ListData("Wash", R.drawable.ic_baseline_wash_24),
                ListData("Tag Face", R.drawable.ic_baseline_tag_faces),
                ListData("Surfing", R.drawable.ic_baseline_surfing),
                ListData("Sports Tennis", R.drawable.ic_baseline_sports_tennis),
                ListData("Wrong Location", R.drawable.ic_baseline_wrong_location),
                ListData("Sports Kabaddi", R.drawable.ic_baseline_sports_kabaddi),
                ListData("Tag Face", R.drawable.ic_baseline_tag_faces),
                ListData("Surfing", R.drawable.ic_baseline_surfing),
                ListData("Sports Tennis", R.drawable.ic_baseline_sports_tennis),
                ListData("Wrong Location", R.drawable.ic_baseline_wrong_location),
                ListData("Sports Kabaddi", R.drawable.ic_baseline_sports_kabaddi))



        val recyclerView: RecyclerView = findViewById(R.id.recycleView)
        recyclerView.setHasFixedSize(true)
        //Listview
        recyclerView.layoutManager = LinearLayoutManager(this)
//        For gridview uncomment bellow line
//        recyclerView.layoutManager = GridLayoutManager(this,2)
        val myListAdapter = MyListAdapter(myListData)
        recyclerView.adapter = myListAdapter;


    }
}

For GirdView replace layout manager to 

 recyclerView.layoutManager = GridLayoutManager(this,2)

Result: