RecyclerView

RecyclerView GridView Android Example in Kotlin

In this tutorial, we will learn how to use RecyclerView using GridView in Android with Kotlin language. A RecyclerView is an advanced version of a ListView that performs better.

According to the Android documentation, RecyclerView is a user interface component that allows us to create a scrolling list. It is effectively a new ViewGroup that uses the Viewholder pattern to render any adapter-based view in a horizontal/vertical/grid or staggered grid manner.

Android RecyclerView allows you to create a horizontal, vertical, or Expandable List. It’s most useful when dealing with data sets whose elements can change in runtime as a result of user actions or network events.

Note: When you need to show a large number of things and the number is changing, you should use RecyclerView. ListView should only be used when the number of items is constant and the screen size is limited.

Learn Java Programming & get a Certificate

Click to download

Types of LayoutManagers in RecyclerView

Although you can create your own custom LayoutManagers, the built-in recyclerView LayoutManagers are divided into three types.

  1. LinearLayoutManager
  2. GridLayoutManager
  3. StaggeredGridLayoutManager

LinearLayoutManager –

gridview android

LinearLayoutManager: We can align our recycler view in a horizontal or vertical scrolling manner in linear layout manager by specifying its orientation as vertical or horizontal.

GridLayoutManager-

gridview android

GridLayout Manager: Grid Layout Manager allows us to align our recycler in the shape of a grid. The number of columns to be displayed in the Grid of Recycler View must be specified in the span count of the layout manager.

StaggeredGridLayoutManager-

gridview android

StaggeredGridLayoutManager: StaggeredGrid LayoutManager arranges children in a staggered grid pattern. It supports horizontal and vertical layouts, as well as the ability to rearrange children. Staggered grids are likely to have gaps at the layout’s edges.

RecyclerView XML code:

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />

To put Recycler View into action Two sub-components are required to control RecyclerView are given below

View Holder Data Class
A View Holder Class is a Java class that stores a reference to the UI Elements in the Card Layout and allows them to be modified dynamically during program execution by a list of data.
A data class is an object class that contains information for each recycler view item that will be displayed in Recycler View.

Step by Step Implementation:

Step 1: Create a New Android Studio Project

Step 2: –> Add the given below code to your file build.gradle.(app)

dependency for recyclerView

//recycler view 
    implementation "androidx.recyclerview:recyclerview:1.2.1"

Step 3: –> Add the given below code to your file 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/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        tools:listitem="@layout/item_list"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: FileItem_list.xml –> Create a new Layout Resource File and Add the given below code to your file.

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:background="@color/teal_200"
    android:padding="16dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher_foreground"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/firstname"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:ellipsize="end"
        android:gravity="center_horizontal"
        android:maxLines="2"
        android:text="Developers Dome"
        android:textAlignment="center"
        android:textColor="#212121"
        android:textSize="18sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: –> Add the given below code to your file MainActivity.kt.

package com.sagar.recyclerview

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

class MainActivity : AppCompatActivity() {
    private lateinit var mAdapter: RecyclerViewAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //Layout manager
        val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
        recyclerView.layoutManager = GridLayoutManager(this,2)

        val item = ArrayList<User>()
        //adding user
        item.add(User("Developers"))
        item.add(User("Dome"))
        item.add(User("Developers1"))
        item.add(User("Dome1"))
        item.add(User("Developers2"))
        item.add(User("Dome2"))
        item.add(User("Developers3"))
        item.add(User("Dome3"))
        //Adapter setting
        mAdapter = RecyclerViewAdapter(item)
        recyclerView.adapter = mAdapter
    }
}

Step 6: –> File: User.kt Create a New Kotlin Data Class and Add the given below code to your file.

package com.sagar.recyclerview

data class User(val Firstname: String)

Step 7: –> File: RecyclerViewAdapter.kt Create a New Kotlin Class and Add the given below code to your file.

package com.sagar.recyclerview

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


class RecyclerViewAdapter(val userList: ArrayList<User>) : RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerViewAdapter.ViewHolder {

        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_list, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: RecyclerViewAdapter.ViewHolder, position: Int) {
        holder.bind(userList[position])
    }

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

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        fun bind(user: User) {
            val textViewName = itemView.findViewById<TextView>(R.id.firstname)
            textViewName.text = user.Firstname
        }
    }
}
  • We hope that this guide will assist you in quickly creating a RecyclerView as GridView in android. If you have any problems, please post them in the comments section, and we will gladly assist you.

Android RecyclerView in Kotlin with Example

Android cardView | Android Recyclerview using cardView

The official documentation of Android Recyclerview

Search View in Android Example | Android development

This Post Has One Comment

Leave a Reply