GridLayoutManager
GridLayoutManager is a part of the RecyclerView.LayoutManager. For displaying list of data in Grid like Photo Gallery we can use GridLayoutManager. In Previous Blog we have discussed What is RecyclerView? Today we are going to learn about How to display list of data in RecyclerView Using GridLayoutManager. Before we start with example the first question you all want to ask is
What is different between GridLayoutManager and LinearLayoutManager?
# LinearLayoutManager:
- Using LinearLayoutManager we can generate simple list of data same as ListView.
- It fully occupy the row. But each row have same height and width.
# GridLayoutManager:
- Using GridLayoutManager we can split row more than one times.
- We may have more than 2 column but each have same height and width.
Hope you will get basic idea about differences.
Now let’s start with a simple example of GridLayoutManager
Implementation
Step 1:
Add following dependency in build.gradle for RecyclerView.
dependencies {
implementation 'com.android.support:recyclerview-v7:28.0.0-rc01'
}
Step 2:
Make one layout file and name it as list_item_grid_movie.xml . Add following code into layout file.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/imageMovie"
android:layout_width="match_parent"
android:layout_height="150dp"
android:contentDescription="@string/app_name"
android:scaleType="fitXY"
android:src="@drawable/ic_avengers"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/textMovieTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="@id/imageMovie"
app:layout_constraintTop_toBottomOf="@id/imageMovie"
tools:text="Avengers" />
<TextView
android:id="@+id/textMovieViews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:textColor="@android:color/black"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="@id/textMovieTitle"
app:layout_constraintTop_toBottomOf="@id/textMovieTitle"
tools:text="Views: 100" />
<TextView
android:id="@+id/textReleaseDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:textColor="@android:color/black"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="@id/textMovieViews"
app:layout_constraintTop_toBottomOf="@id/textMovieViews"
tools:text="Release Date: 16 Feb 2018" />
</android.support.constraint.ConstraintLayout>
Step 3:
Now create one class name it as MovieListViewHolder extend it using RecyclerView.ViewHolder. As name suggest this Holder class will hold View information.
package com.android4dev.recyclerview.adapter
import android.support.v7.widget.RecyclerView
import android.view.View
import com.android4dev.recyclerview.model.MovieModel
import com.bumptech.glide.Glide
import kotlinx.android.synthetic.main.list_item_movie.view.*
import java.util.*
class MovieListViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
fun bindView(movieModel: MovieModel) {
itemView.textMovieTitle.text = movieModel.movieTitle
itemView.textMovieViews.text = "Views: " + movieModel.movieViews
itemView.textReleaseDate.text = "Release Date: " + movieModel.releaseDate
Glide.with(itemView.context).load(movieModel.moviePicture!!).into(itemView.imageMovie)
}
}
Step 4:
Now create one more class name it as MovieListGridRecyclerAdapter and extend it using RecyclerView.Adapter.
package com.android4dev.recyclerview.adapter
import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.ViewGroup
import com.android4dev.recyclerview.R
import com.android4dev.recyclerview.model.MovieModel
class MovieListGridRecyclerAdapter:RecyclerView.Adapter<RecyclerView.ViewHolder>() {
private var listOfMovies = listOf<MovieModel>()
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
return MovieListViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.list_item_grid_movie, parent, false))
}
override fun getItemCount(): Int = listOfMovies.size
override fun onBindViewHolder(viewHolder: RecyclerView.ViewHolder, position: Int) {
val movieViewHolder = viewHolder as MovieListViewHolder
movieViewHolder.bindView(listOfMovies[position])
}
fun setMovieList(listOfMovies: List<MovieModel>) {
this.listOfMovies = listOfMovies
notifyDataSetChanged()
}
}
1. getItemCount() will return number of list items.
2. onCreateViewHolder() only creates a new view holder when there are no existing view holders which the RecyclerView can reuse. So, for instance, if your RecyclerView can display 5 items at a time, it will create 5-6 ViewHolders, and then automatically reuse them, each time calling onBindViewHolder.
3. onBindViewHolder() this method will bind view with adapter class.
Step 5:
Create class for as GridItemDecoration extend it with RecyclerView.ItemDecoration().
package com.android4dev.recyclerview.recyclerview_helper
import android.graphics.Rect
import android.support.v7.widget.RecyclerView
import android.view.View
/***
* Made by Lokesh Desai (Android4Dev)
*/
class GridItemDecoration(gridSpacingPx: Int, gridSize: Int) : RecyclerView.ItemDecoration() {
private var mSizeGridSpacingPx: Int = gridSpacingPx
private var mGridSize: Int = gridSize
private var mNeedLeftSpacing = false
override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
val frameWidth = ((parent.width - mSizeGridSpacingPx.toFloat() * (mGridSize - 1)) / mGridSize).toInt()
val padding = parent.width / mGridSize - frameWidth
val itemPosition = (view.getLayoutParams() as RecyclerView.LayoutParams).viewAdapterPosition
if (itemPosition < mGridSize) {
outRect.top = 0
} else {
outRect.top = mSizeGridSpacingPx
}
if (itemPosition % mGridSize == 0) {
outRect.left = 0
outRect.right = padding
mNeedLeftSpacing = true
} else if ((itemPosition + 1) % mGridSize == 0) {
mNeedLeftSpacing = false
outRect.right = 0
outRect.left = padding
} else if (mNeedLeftSpacing) {
mNeedLeftSpacing = false
outRect.left = mSizeGridSpacingPx - padding
if ((itemPosition + 2) % mGridSize == 0) {
outRect.right = mSizeGridSpacingPx - padding
} else {
outRect.right = mSizeGridSpacingPx / 2
}
} else if ((itemPosition + 2) % mGridSize == 0) {
mNeedLeftSpacing = false
outRect.left = mSizeGridSpacingPx / 2
outRect.right = mSizeGridSpacingPx - padding
} else {
mNeedLeftSpacing = false
outRect.left = mSizeGridSpacingPx / 2
outRect.right = mSizeGridSpacingPx / 2
}
outRect.bottom = 0
}
}
GridItemDecoration class will help us to manage same space between all RecyclerView items.
Tips : Don’t use padding for managing spacing between grid items always use ItemDecoration. Avoid to give padding for allocating space between grid items because some times it generates performance issue.
Step 6:
Now create one activity class and Name it as RecyclerViewGridLayoutActivity.
package com.android4dev.recyclerview
import android.os.Bundle
import android.support.v7.widget.GridLayoutManager
import com.android4dev.recyclerview.adapter.MovieListGridRecyclerAdapter
import com.android4dev.recyclerview.base.BaseActivity
import com.android4dev.recyclerview.model.MovieModel
import com.android4dev.recyclerview.recyclerview_helper.GridItemDecoration
import kotlinx.android.synthetic.main.activity_main.*
class RecyclerViewGridLayoutActivity : BaseActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initView()
}
private fun initView() {
recyclerViewMovies.layoutManager = GridLayoutManager(this,2)
//This will for default android divider
recyclerViewMovies.addItemDecoration(GridItemDecoration(10, 2))
val movieListAdapter = MovieListGridRecyclerAdapter()
recyclerViewMovies.adapter = movieListAdapter
movieListAdapter.setMovieList(generateDummyData())
}
private fun generateDummyData(): List<MovieModel> {
val listOfMovie = mutableListOf<MovieModel>()
var movieModel = MovieModel(1, "Avengers", 500, "16 Feb 2018", R.drawable.ic_avengers)
listOfMovie.add(movieModel)
movieModel = MovieModel(2, "Avengers: Age of Ultron", 400, "17 March 2018", R.drawable.ic_avengers_2)
listOfMovie.add(movieModel)
movieModel = MovieModel(3, "Iron Man 3", 550, "17 April 2018", R.drawable.ic_ironman_3)
listOfMovie.add(movieModel)
movieModel = MovieModel(4, "Avengers: Infinity War", 1500, "15 Jan 2018", R.drawable.ic_avenger_five)
listOfMovie.add(movieModel)
movieModel = MovieModel(5, "Thor: Ragnarok", 200, "17 March 2018", R.drawable.ic_thor)
listOfMovie.add(movieModel)
movieModel = MovieModel(6, "Black Panther", 250, "17 May 2018", R.drawable.ic_panther)
listOfMovie.add(movieModel)
movieModel = MovieModel(7, "Logan", 320, "17 Dec 2018", R.drawable.ic_logan)
listOfMovie.add(movieModel)
return listOfMovie
}
}
In this Activity class we will attach Adapter class with RecyclerView.
Now we will assign GridLayoutManager(2 Column) to RecyclerView.LayoutManager using below line.
recyclerViewMovies.layoutManager = GridLayoutManager(this,2)
Here 2 is number of columns. We can assign more than 2 column also.
Step 7:
Create layout file for RecyclerViewGridLayoutActivity class.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
android:background="@android:color/white"
tools:context=".RecyclerViewLinearLayoutActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerViewMovies"
android:layout_width="0dp"
android:layout_height="0dp"
android:overScrollMode="never"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout
Now run the project and wait for the result.
Conclusion
With a little effort we have achieved RecyclerView Using GridLayoutManager. Hence, we can also achieve this using GridView. But it depends of requirements which suits best for you.
Source Code
Check out Github Project Which Contains All RecyclerView Examples
YouTube Link:
You Can Also Refer

Lokesh Desai
Related posts
4 Comments
Leave a Reply Cancel reply
Subscribe
* You will receive the latest news and updates on your favorite celebrities!
Quick Cook!
How to use Data Class in Kotlin?
In this blog, you will learn about How to use Data Class in Kotlin? and What is Data Class? Tired…
Android Kotlin Tutorial: How to create a Class and Object ?
Today we are going to learn How to Create a Class and Object in Kotlin. Kotlin is an Object Oriented…
[…] How to integrate RecyclerView With GridLayoutManager? […]
[…] How to integrate RecyclerView With GridLayoutManager? […]
[…] How to integrate RecyclerView With GridLayoutManager? […]
I enjoy your writing style really enjoying this website .