RecyclerView with grid layout Android Kotlin.

Recycler view is mostly used in android Kotlin The grid layout also gives us a beautiful look to our design. today we will learn grid layout with on item click the item color will change.

In build.Gradle(: app) we need to add a dependency for card view and recycler view.

//cardview
implementation "androidx.cardview:cardview:1.0.0"
//RecyclerView
implementation 'androidx.recyclerview:recyclerview:1.2.1'

So let's start with the designing part of the main activity (activity_main.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="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_design"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="15dp"
        android:layout_marginEnd="15dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:listitem="@layout/item_recycler" />
</androidx.constraintlayout.widget.ConstraintLayout>

For Recyclerview we need to create one more layout for recycler list designing so here I create the item_recycler.xml file

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="10dp"
    android:layout_marginTop="10dp"
    app:cardCornerRadius="5dp"
    app:cardElevation="5dp"
    app:cardUseCompatPadding="true">
<!--margin start is used for starting margin in grid layout we don't need margin end-->
    <LinearLayout
        android:id="@+id/ll_design"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="10dp">

        <ImageView
            android:id="@+id/iv_office"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_office" />

        <TextView
            android:id="@+id/tv_office"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            android:text="@string/office"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_device"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/x2_devices" />
    </LinearLayout>

</androidx.cardview.widget.CardView>

Now we will create a data class so here I create RecyclerData.kt file

package com.example.designapp

data class RecyclerData(
    var office: String,
    var device: String,
    var img: Int,
    var isSelected: Boolean

) {

    //took isSelected for marking one item as selected or not

    fun setIsSelected(value: Boolean) {
        isSelected = value
    }
}

Now we need to create a recycler adapter. so here I create the RecyclerAdapter.kt

package com.example.designapp

import android.content.Context
import android.graphics.Color
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.LinearLayout
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class RecyclerAdapter(val context: Context, val dataList: List<RecyclerData>) :
    RecyclerView.Adapter<RecyclerAdapter.MyViewHolder>() {

    inner class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        //item initalization
        var ll_design: LinearLayout = itemView.findViewById(R.id.ll_design)
        var iv_office: ImageView = itemView.findViewById(R.id.iv_office)
        var tv_office: TextView = itemView.findViewById(R.id.tv_office)
        var tv_device: TextView = itemView.findViewById(R.id.tv_device)
    }

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

    override fun onBindViewHolder(holder: RecyclerAdapter.MyViewHolder, position: Int) {
        holder.itemView.setOnClickListener {

            //is selected is used for selecting the position of item
            if (dataList[position].isSelected) {
                dataList[position].setIsSelected(false)
                holder.ll_design.setBackgroundColor(Color.GREEN)
            } else {
                dataList[position].setIsSelected(true)

                holder.ll_design.setBackgroundColor(Color.WHITE)
            }
        }
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getItemViewType(position: Int): Int {
        return position
    }

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

Now the last step we need to write code in the main activity.

package com.example.designapp

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

class MainActivity : AppCompatActivity() {
    private lateinit var recyclerView: RecyclerView
    private lateinit var recyclerAdapter: RecyclerAdapter

    private var dataList = mutableListOf<RecyclerData>()

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

        recyclerView = findViewById(R.id.rv_design)
        //grid layout manager
        recyclerView.layoutManager = GridLayoutManager(applicationContext, 2)


        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))
        dataList.add(RecyclerData("text", "2X divice", R.drawable.ic_office, false))

        recyclerAdapter = RecyclerAdapter(this, dataList)
        recyclerView.adapter = recyclerAdapter
    }

}

GitHub - HarshitaBambure/RecyclerviewGridLayout

That's it.