Subscribe Now

* You will receive the latest news and updates on your favorite celebrities!

Trending News

Blog Post

StaggeredGridLayoutManager With RecyclerView (Kotlin)
Beginner

StaggeredGridLayoutManager With RecyclerView (Kotlin)

StaggeredGridLayoutManager

 

StaggeredGridLayoutManager is a part of RecyclerView.LayoutManager. For displaying list of items like Pinintrest we can use StaggeredGridLayoutManager with RecyclerView.

 

What is difference between GridLayoutManager and StaggeredGridLayoutManager?

  • GridLayoutManager:

GridLayoutManager items is of same size (Height and width). It shows symmetric items in view.

  • StaggeredGridLayoutManager:

StaggeredGridLayoutManager grid is of varying size(Height and width). Staggered Grid View shows asymmetric items view.

GridView-vs-Staggered-Grid-In-Android

 

Implementation


Step 1:

Add following dependency into build.gradle.

implementation 'com.android.support:recyclerview-v7:28.0.0-rc01'

 

Step 2:

Make layout file called list_item_grid_movie.xml for displaying items in RecyclerView.

<?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 make one ViewHolder class and name it as a MovieListViewHolder . As a 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 MovieListStaggeredViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    private val mRandom = Random()
    fun bindView(movieModel: MovieModel) {
        itemView.textMovieTitle.text = movieModel.movieTitle
        itemView.textMovieViews.text = "Views: " + movieModel.movieViews
        itemView.textReleaseDate.text = "Release Date: " + movieModel.releaseDate
        itemView.imageMovie.layoutParams.height = getRandomIntInRange(250, 150)
        Glide.with(itemView.context).load(movieModel.moviePicture!!).into(itemView.imageMovie)
    }

    private fun getRandomIntInRange(max: Int, min: Int): Int {
        return mRandom.nextInt(max - min + min) + min
    }
}

 

Following function will use for displaying different height for grid items. We are randomly generating height value using this function but in real implementation it should measure upon grid items content.

private fun getRandomIntInRange(max: Int, min: Int): Int {
        return mRandom.nextInt(max - min + min) + min
    }

 

Step 4:

Now make one Adapter class called MovieListStaggeredAdapter for bind ViewHolder with Adapter items.

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 MovieListStaggeredAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    private var listOfMovies = listOf<MovieModel>()
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return MovieListStaggeredViewHolder(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 MovieListStaggeredViewHolder
        movieViewHolder.bindView(listOfMovies[position])
    }

    fun setMovieList(listOfMovies: List<MovieModel>) {
        this.listOfMovies = listOfMovies
        notifyDataSetChanged()
    }
}

 

Step 5:

Now make one GridItemDecoration class for managing equal divider space between RecyclerView items.

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
    }
}

 

Step 6:

Make Activity class called RecyclerViewStaggeredGridActivity to bind Adapter class with RecyclerView.

package com.android4dev.recyclerview

import android.os.Bundle
import android.os.PersistableBundle
import android.support.v7.widget.GridLayoutManager
import android.support.v7.widget.StaggeredGridLayoutManager
import com.android4dev.recyclerview.adapter.MovieListGridRecyclerAdapter
import com.android4dev.recyclerview.adapter.MovieListStaggeredAdapter
import com.android4dev.recyclerview.base.BaseActivity
import com.android4dev.recyclerview.model.MovieModel
import com.android4dev.recyclerview.recyclerview_helper.GridItemDecoration
import com.android4dev.recyclerview.recyclerview_helper.VerticalSpaceItemDecoration
import kotlinx.android.synthetic.main.activity_main.*

class RecyclerViewStaggeredGridActivity : BaseActivity() {

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


    private fun initView() {
        recyclerViewMovies.layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
        //This will for default android divider
        recyclerViewMovies.addItemDecoration(GridItemDecoration(10, 2))

        val movieListAdapter = MovieListStaggeredAdapter()
        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
    }
}

 

For using RecyclerView with StaggredGridLayoutManager we will use below lines
recyclerViewMovies.layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL). 
Here, 2 is a number of columns we want to display in grid. StaggeredGridLayoutManager.VERTICAL is used to display GridItems vertically. We can use StaggeredGridLayoutManager.HORIZONTAL for displaying list horizontally.

Step 7:

Create layout file for RecyclerViewStaggeredGridActivity 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.

 

Source Code

Check out Github Project Which Contains All RecyclerView Examples

You Can Also Refer

Related posts

15 Comments

  1. How to integrate Android Recyclerview (Kotlin) - Android4Dev

    […] How to integrate RecyclerView With StaggeredGridLayoutManager? […]

  2. How to integrate RecyclerView Using GridLayoutManager (Kotlin) - Android4Dev

    […] How to integrate RecyclerView With StaggeredGridLayoutManager? […]

  3. RecyclerView Multiple View Types (Header & Footer) - Android4Dev

    […] How to integrate RecyclerView With StaggeredGridLayoutManager? […]

  4. Avatar
    stan smith all white

    Great blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple tweeks would really make my blog jump out. Please let me know where you got your design. Cheers

  5. Avatar
    adidas stan smith 2 mahogany

    Hello! Do you use Twitter? I’d like to follow you if that would be okay. I’m definitely enjoying your blog and look forward to new posts.

  6. Avatar
    adidas superstar bold blanche

    I love what you guys are up too. This type of clever work and reporting! Keep up the amazing works guys I’ve you guys to our blogroll.

  7. Avatar
    adidas superstar black 42

    My spouse and I stumbled over here by a different web page and thought I should check things out. I like what I see so now i am following you. Look forward to finding out about your web page yet again.

  8. Avatar
    foloren torium

    Hey! This is my first visit to your blog! We are a group of volunteers and starting a new project in a community in the same niche. Your blog provided us valuable information to work on. You have done a wonderful job!

  9. Avatar
    Merissa

    Thank you for the good writeup. It in fact was a amusement account it.
    Look advanced to far added agreeable from
    you! However, how can we communicate?

  10. Avatar
    Fuck Women Now

    Thankfulness to my father who shared with me about this webpage, this blog is in fact remarkable.

  11. Avatar
    Best Online Dating

    This site was… how do I say it? Relevant!! Finally I have found something which helped me.
    Many thanks!

  12. Avatar
    Naked Shower

    Incredible points. Sound arguments. Keep up the great work.

  13. Avatar
    seksiseuraa

    Wow, incredible blog layout! How long have you been blogging for?

    you make blogging look easy. The overall look of your website is wonderful, as well as the content!

  14. Avatar
    togel sd

    This is very interesting, You’re a very skilled blogger.I’ve joined your rss feed and look forward to seeking more oof your excellent post.Also, I hve shared your site in my sodial networks!

  15. Avatar
    Hemorrhoids Pain Relief

    Hey there! This post couldn’t be written any better!

    Reading this post reminds me of my previous room mate!
    He always kept chatting about this. I will forward this write-up to
    him. Fairly certain he will have a good read. Thanks for sharing!

Leave a Reply

Required fields are marked *

Copywrite @Android4Dev