Android RecyclerView StaggeredGridLayoutManager Example

activity_thumbnail.xml

<android.support.v7.widget.RecyclerView
    android:id="@+id/rvThumbnail"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dp"
    android:layout_marginStart="10dp"
    app:layoutManager="LinearLayoutManager"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

item_thumbnail.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.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_margin="3dp"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    android:focusable="true"
    app:cardCornerRadius="4dp"
    app:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <android.support.v7.widget.AppCompatImageView
            android:id="@+id/ivImage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true" />

    </LinearLayout>

</android.support.v7.widget.CardView>

ThumbnailActivity.kt

val thumbnails = ArrayList<String>()
thumbnails.add("http://www.hotel-r.net/im/hotel/pl/hotel-simple-1.jpg")
thumbnails.add("https://media-cdn.tripadvisor.com/media/photo-s/0e/20/6a/59/simple-patagonia-hotel.jpg")
thumbnails.add("https://mir-s3-cdn-cf.behance.net/project_modules/disp/65daa813704049.5627720c3ae61.jpg")
thumbnails.add("http://www.hotel-r.net/im/hotel/lt/hotel-simple-12.jpg")
thumbnails.add("https://images.trvl-media.com/hotels/7000000/6450000/6441600/6441512/6441512_56_z.jpg")
thumbnails.add("http://interiii.com/wp-content/uploads/2013/03/Latest-Caro-Hotel-Design-by-Francesc-Rif%C3%A9-Studio-Decoration-Ideas1.jpg")
thumbnails.add("https://media-cdn.tripadvisor.com/media/photo-s/05/07/33/ba/smart-and-simple-hotel.jpg")
thumbnails.add("https://c1.hiqcdn.com/images/property/resortimg/431680_w85.jpg")
thumbnails.add("https://www.cabinn.com/sites/default/files/CabInn_Aalborg_029_0.jpg")
thumbnails.add("https://www.dusit.com/dusitd2/dubai//wp-content/uploads/sites/71/nggallery/home/Home-Side-Bar.jpg")
thumbnails.add("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXFTO67tF0mMVYHDyOLzRXgEmNEq-1A6XfDEyqi0H2bp9H88W8")
thumbnails.add("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSlTxmzotpbRhNoAGHBiKkRpSbMBkBKD11gw6DNKFlDLm1BcD87")
thumbnails.add("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLU_PHdvjzQnmOCbu30uKTVuctVpbJr-BYXn_VK73ONeQ0-caV")
thumbnails.add("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIyKJYdpXUyFPQJ562g_m7aIpQShLMXSTUqi6BRxqzAV3JmdvZ")
thumbnails.add("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsd9CRRp9dsicF_NN7TbhO8rrfVMRYUtfQZ4Q00Jyni64ZSQq-yQ")
thumbnails.add("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQADvSuitGGiUvwUqgYwr-RUM0FjiUirHJs5J78D6_SsIR7oYQl")
thumbnails.add("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeqCY4JyazOXErznS2m7TfswugtsZH9LWP_XPdkD-y6ua1Gc2d")
thumbnails.add("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRdqgdNcAgRayqTPY3waS8YWKoQeCW04EsbYu6aUkwD0Ue27qJmzQ")

val adapter = ThumbnailAdapter(this)
val staggeredGridLayoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
staggeredGridLayoutManager.gapStrategy = StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS
rvThumbnail.layoutManager = staggeredGridLayoutManager
rvThumbnail.setHasFixedSize(true)
rvThumbnail.setItemViewCacheSize(thumbnails.size)
rvThumbnail.isDrawingCacheEnabled = true
rvThumbnail.drawingCacheQuality = View.DRAWING_CACHE_QUALITY_HIGH
rvThumbnail.adapter = adapter
rvThumbnail.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrollStateChanged(recyclerView: RecyclerView?, newState: Int) {
        if (newState == RecyclerView.SCROLL_STATE_IDLE) {
            rvThumbnail?.invalidateItemDecorations()
        }
    }
})

adapter.setData(thumbnails)
adapter.setOnClickListener(object : ThumbnailAdapter.OnClickListener {
    override fun onClick(v: View, position: Int) {
        val intent = Intent(this@ThumbnailActivity, GalleryActivity::class.java)
        startActivity(intent)
    }
})

ThumbnailAdapter.kt

import android.content.Context
import android.support.v7.widget.AppCompatImageView
import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class ThumbnailAdapter(private val context: Context) : RecyclerView.Adapter<ThumbnailAdapter.ViewHolder>() {

    private var onClickListener: OnClickListener? = null
    private var mThumbnails = ArrayList<String>()

    fun setData(thumbnails: ArrayList<String>) {
        this.mThumbnails = thumbnails
        notifyDataSetChanged()
    }

    override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): ViewHolder {
        val v = LayoutInflater.from(context).inflate(R.layout.item_thumbnail, parent, false)

        return ViewHolder(v)
    }

    override fun getItemCount(): Int {

        return mThumbnails.size
    }

    override fun onBindViewHolder(holder: ViewHolder?, position: Int) {

        holder?.onBind(context, mThumbnails[position], position)
    }

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

        private var view = itemView
        private var ivImage: AppCompatImageView = itemView.findViewById(R.id.ivImage)

        fun onBind(context: Context, thumbnail: String, position: Int) {
            ivImage.requestLayout()
            GlideUtil.load(context, thumbnail, ivImage, null)
            view.setOnClickListener {
                onClickListener?.onClick(it, position)
            }
        }

    }

    fun setOnClickListener(onClickListener: OnClickListener) {
        this.onClickListener = onClickListener
    }

    interface OnClickListener {
        fun onClick(v: View, position: Int)
    }

}