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.
Contents
Learn Java Programming & get a Certificate
Types of LayoutManagers in RecyclerView
Although you can create your own custom LayoutManagers, the built-in recyclerView LayoutManagers are divided into three types.
- LinearLayoutManager
- GridLayoutManager
- StaggeredGridLayoutManager
LinearLayoutManager –
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-
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-
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: File–Item_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
Pingback: Image Gallery App with Example Android - Developers Dome