RecyclerView Using StaggeredGridLayoutManager in Kotlin

Till now, we have learnt how to use android recyclerView using linearLayoutManager and GridLayoutManager. In this article, we will learn how to use android recyclerView using staggeredGridLayoutManager in Kotlin. We will display some list of flowers in staggered grid.

Output

Tutorialwing Kotlin Android RecyclerView Using StaggeredGridLayoutManager in Kotlin With Example

Getting Started

StaggeredGridLayoutManager accepts parameter as count and orientation. count depicts number of items to be shown in each row, orientation depicts whether list is horizontally or vertically scrollable.

Now, how do we use android recyclerView using staggeredGridLayoutManager in android application ?

Creating New Project

At first, we will create an application.
So, follow steps below to create any android project in Kotlin –

Step	Description
1.	Open Android Studio (Ignore if already done).
2.	Go to File => New => New Project. This will open a new window. Then, under Phone and Tablet section, select Empty Activity. Then, click Next.
3.	In next screen, select project name as RecyclerViewStaggeredGridLayout. Then, fill other required details.
4.	Then, clicking on Finish button creates new project.

Newbie in Android ?

Some very important concepts (Recommended to learn before you move ahead)

Install Android Studio

Create New Project in Android Studio

Android Project Structure

Run / Debug / Test Android App

Before we move ahead, we need to setup for viewBinding to access Android recyclerView Using Kotlin file without using findViewById() method.

Setup ViewBinding

Add viewBinding true in app/build.gradle file.

 
 android { 
 	// OTHER CODE... 
 	buildFeatures { 
 		viewBinding true 
 	} 
 }

Now, set content in activity using view binding.
Open MainActivity.kt file and write below code in it.

 
 class MainActivity : AppCompatActivity() { 
 	
 	private lateinit var binding: ActivityMainBinding 
 	
 	override fun onCreate(savedInstanceState: Bundle?) { 
 		super.onCreate(savedInstanceState) 
 		binding = ActivityMainBinding.inflate(layoutInflater) 
 		val view = binding.root 
 		setContentView(view) 
 	} 
 }

Now, we can access view in Kotlin file without using findViewById() method.

Using RecyclerView with StaggeredGridLayoutManager in Kotlin

Follow steps below to use StaggeredGridLayoutManager in newly created project –

Open res/values/strings.xml file. Then, add below code into it.

<resources>
    <string name="app_name">RecyclerViewStaggeredGridLayout</string>
    <string name="flower_image_description">Flower Image Description</string>
</resources>

Create Data Model Class

In this article, we are going to show list of flowers using recyclerView. So, we need to create model class. Create a new file, Flower.kt, in com.tutorialwing.recyclerviewstaggeredgridlayout package. Then, add below code in it –
```
package com.tutorialwing.recyclerviewstaggeredgridlayout

class Flower(var name: String, var image: Int)
```

Create UI for Single Item

Now, we need to create ui for single item i.e. how are we going to display each flower item in recyclerView. So, create a new file, flower_item.xml, in res/layout folder. Then, add below code in it –

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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"
    android:layout_margin="5dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/selectableItemBackground"
        tools:context=".MainActivity">

        <ImageView
            android:id="@+id/image"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:contentDescription="@string/flower_image_description"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/image" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

Create Adapter for RecyclerView

Now, we need to create adapter for recyclerView. So, create a new file, FlowerAdapter.kt, in com.tutorialwing.recyclerviewgridlayout package. Then, add below code in it –

package com.tutorialwing.recyclerviewstaggeredgridlayout

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.tutorialwing.recyclerviewstaggeredgridlayout.databinding.FlowerItemBinding

class FlowerAdapter(
	private val flowerList: ArrayList<Flower>,
	private val listener: (Flower, Int) -> Unit
) : RecyclerView.Adapter<FlowerAdapter.ViewHolder>() {

	override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
		val v = FlowerItemBinding.inflate(LayoutInflater.from(parent.context), parent, false)
		return ViewHolder(v)
	}

	override fun onBindViewHolder(holder: ViewHolder, position: Int) {
		holder.bindItem(flowerList[position])
		holder.itemView.setOnClickListener { listener(flowerList[position], position) }
	}

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

	class ViewHolder(var flowerItemBinding: FlowerItemBinding) :
		RecyclerView.ViewHolder(flowerItemBinding.root) {
		fun bindItem(flower: Flower) {
			flowerItemBinding.image.setImageResource(flower.image)
			flowerItemBinding.name.text = flower.name
		}
	}
}

Open res/layout/activity_main.xml file. Then, add below code in it –

<?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"
        android:background="#fefefe"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Here, we have defined recyclerView in xml file.

Now, we will set adapter and layoutManager to recyclerView dynamically. So, open MainActivity.kt and add below code in it –

package com.tutorialwing.recyclerviewstaggeredgridlayout

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.StaggeredGridLayoutManager
import com.tutorialwing.recyclerviewstaggeredgridlayout.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

	private lateinit var binding: ActivityMainBinding

	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)

		binding = ActivityMainBinding.inflate(layoutInflater)
		setContentView(binding.root)

		setupRecyclerView()
	}

	private fun setupRecyclerView() {
		binding.recyclerView.apply {
			layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
			adapter = FlowerAdapter(createFlowerList()) { flower, position ->
				Toast.makeText(
					this@MainActivity,
					"Clicked on Flower: ${flower.name}",
					Toast.LENGTH_SHORT
				).show()
			}
		}
	}

	private fun createFlowerList(): ArrayList<Flower> {
		return arrayListOf<Flower>(
			Flower(
				"Blue Bell",
				R.drawable.bluebell
			),
			Flower(
				"Calendula",
				R.drawable.calendula
			),
			Flower(
				"Iris",
				R.drawable.iris
			),
			Flower(
				"Jasmine",
				R.drawable.jasmine
			),
			Flower(
				"Lavender",
				R.drawable.lavender
			),
			Flower(
				"Lily",
				R.drawable.lily
			),
			Flower(
				"Lotus",
				R.drawable.lotus
			),
			Flower(
				"MaryGold",
				R.drawable.marygold
			),
			Flower(
				"Orchid",
				R.drawable.orchid
			),
			Flower(
				"Poppy",
				R.drawable.poppy
			),
			Flower(
				"Rose",
				R.drawable.rose
			),
			Flower(
				"Rosemary Dahlia",
				R.drawable.rosemary_dahlia
			),
			Flower(
				"Sunflower",
				R.drawable.sunflower
			),
			Flower(
				"Tulip",
				R.drawable.tulip
			)
		)
	}
}

Now, run the application. We will get output as below –
Tutorialwing Kotlin Android RecyclerView Using StaggeredGridLayoutManager in Kotlin With Example

That’s end of our tutorial on Android RecyclerView Using StaggeredGridLayoutManager in Kotlin .