Android RecyclerView With CardView and OnItemClickListener Example| Kotlin | GridLayout | RecyclerView OnClickListener

Hello Everyone, Welcome to my #codingwithdev​ channel In this video im going to create a RecyclerView with CardView using a GridLayout and onItemClickListener in our Android app step by step using a kotlin.

To create an Android RecyclerView with CardView and OnItemClickListener in Kotlin, you will need to do the following:

STEP 1 : Create new Android Studio Project.

STEP 2: Here’s the activity_main.xml layout

<?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/rvMovieLists"
        android:layout_margin="5dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

STEP 3: Create a layout layout_movie_list_item.xml file for the CardView item, which will be displayed in the RecyclerView

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardBackgroundColor="@color/white"
    app:cardCornerRadius="15dp"
    android:padding="5dp"
    android:layout_margin="5dp"
    android:id="@+id/cardView">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:src="@drawable/avatar"
            android:scaleType="centerCrop"
            android:id="@+id/ivMovieImg"
            android:layout_width="match_parent"
            android:layout_height="125dp"/>

        <TextView
            android:textColor="@color/black"
            android:padding="5dp"
            android:layout_margin="5dp"
            android:textSize="16sp"
            android:text="Movie Name"
            android:textStyle="bold"
            android:id="@+id/tvMovieTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>

</androidx.cardview.widget.CardView>

STEP 4: Create a Kotlin Movie data class for the items that will be displayed in the RecyclerView.

data class Movie(var title: String, var image: Int)

STEP 5: Create a Kotlin RecyclerViewMovieAdapter Adapter class for the RecyclerView, which will inflate the CardView layout and bind the data to the views.

• In the Adapter’s onBindViewHolder method, set the click listener to the CardView.
• In the onClick method of the click listener, get the position of the clicked item and handle the click event.

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import android.widget.Toast
import androidx.cardview.widget.CardView
import androidx.recyclerview.widget.RecyclerView

class RecyclerViewMovieAdapter constructor(
    private val getActivity: MainActivity,
    private val movieList: List<Movie>) :
    RecyclerView.Adapter<RecyclerViewMovieAdapter.MyViewHolder>() {


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

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.tvMovieTitle.text = movieList[position].title
        holder.ivMovieImg.setImageResource(movieList[position].image)

        holder.cardView.setOnClickListener {
            Toast.makeText(getActivity, movieList[position].title, Toast.LENGTH_LONG).show()
        }
    }

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

    class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val tvMovieTitle: TextView = itemView.findViewById(R.id.tvMovieTitle)
        val ivMovieImg: ImageView = itemView.findViewById(R.id.ivMovieImg)
        val cardView: CardView = itemView.findViewById(R.id.cardView)
    }

}

STEP 6: In the MainActivity.kt initialize the RecyclerView, set the adapter and the LayoutManager(GridLayout).

Here’s the MainActivity.kt Activity

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

class MainActivity : AppCompatActivity() {

    private var recyclerView: RecyclerView? = null
    private var recyclerViewMovieAdapter: RecyclerViewMovieAdapter? = null
    private var movieList = mutableListOf<Movie>()

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

        movieList = ArrayList()

        recyclerView = findViewById<View>(R.id.rvMovieLists) as RecyclerView
        recyclerViewMovieAdapter = RecyclerViewMovieAdapter(this@MainActivity, movieList)
        val layoutManager: RecyclerView.LayoutManager = GridLayoutManager(this, 2)
        recyclerView!!.layoutManager = layoutManager
        recyclerView!!.adapter = recyclerViewMovieAdapter

        prepareMovieListData()

    }

    private fun prepareMovieListData() {
        var movie = Movie("Avatar", R.drawable.avatar)
        movieList.add(movie)
        movie = Movie("Batman", R.drawable.batman)
        movieList.add(movie)

        movie = Movie("End Game", R.drawable.end_game)
        movieList.add(movie)
        movie = Movie("Hulk", R.drawable.hulk)
        movieList.add(movie)
        movie = Movie("Inception", R.drawable.inception)
        movieList.add(movie)
        movie = Movie("Jumanji", R.drawable.jumanji)
        movieList.add(movie)
        movie = Movie("Lucy", R.drawable.lucy)
        movieList.add(movie)
        movie = Movie("Jurassic World", R.drawable.jurassic_world)
        movieList.add(movie)
        movie = Movie("Spider Man", R.drawable.spider_man)
        movieList.add(movie)
        movie = Movie("Venom", R.drawable.venom)
        movieList.add(movie)

        recyclerViewMovieAdapter!!.notifyDataSetChanged()

        //All Code is done let's run the app
    }
}

STEP 7: And finally run the App and See the output

Show More Tutorials And Feel free to SUBSCRIBE to my YOUTUBE channel Thank You :-)

Coding with Dev