RecyclerView as Staggered Grid in Android With Example

Creating a staggered grid using RecyclerView involves using the StaggeredGridLayoutManager. This layout manager allows you to create grids with items that can span multiple rows or columns, making it useful for building layouts like Pinterest's pin board.

Here's a step-by-step guide to create a staggered grid using RecyclerView:

XML Layout: Firstly, define the RecyclerView in your layout XML file.

<!-- res/layout/activity_main.xml -->
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Adapter: Assuming you're building a simple image grid, here's a basic adapter:

class ImageAdapter(private val images: List<Int>) :
    RecyclerView.Adapter<ImageAdapter.ImageViewHolder>() {

    class ImageViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView: ImageView = itemView.findViewById(R.id.imageView)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ImageViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_image, parent, false)
        return ImageViewHolder(view)
    }

    override fun onBindViewHolder(holder: ImageViewHolder, position: Int) {
        holder.imageView.setImageResource(images[position])
    }

    override fun getItemCount(): Int = images.size
}

Item Layout: This will be the layout for each image in the grid.

<!-- res/layout/item_image.xml -->
<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop"
    android:padding="4dp"/>

Set up RecyclerView with StaggeredGridLayoutManager:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.StaggeredGridLayoutManager

class MainActivity : AppCompatActivity() {

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

        // Sample image list
        val images = listOf(
            R.drawable.image1, R.drawable.image2, //... add your image resources
        )

        val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
        recyclerView.layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
        recyclerView.adapter = ImageAdapter(images)
    }
}

With this setup, RecyclerView will display items in a staggered grid format. The StaggeredGridLayoutManager constructor takes two parameters: the number of columns (or rows, if using horizontal orientation) and the orientation (VERTICAL or HORIZONTAL).

To see the staggered effect, use images of different sizes or adjust the height of some items programmatically. The staggered grid layout manager will automatically adjust the position of items to fit them in a staggered manner.

Implementing Staggered Grid in RecyclerView Android:

To implement a Staggered Grid in Android using RecyclerView, you need to use the StaggeredGridLayoutManager. Here's a basic example:

val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
val layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
recyclerView.layoutManager = layoutManager

val adapter = YourStaggeredGridAdapter()
recyclerView.adapter = adapter