Staggered GridView in Android with Example

Last Updated : 29 Jan, 2025

StaggeredGridLayout is a LayoutManager in the Android studio similar to GridView, but in StaggeredGridLayout each grid has its own height and width.

Difference Between GridView and Staggered GridView

StaggeredGridlayout

The children are in a staggered grid format.
It supports horizontal and vertical layout
Example: Pinterest, a wallpaper app, a status app, etc

Staggered GridView

GridView

The children's in a rectangular grid format
It also supports horizontal and vertical layout
Example: Flipkart, Amazon, wallpaper app, etc

GridView

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Note: The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Adding Dependency to the build.gradle File

Go to Module build.gradle file and add this dependency and click on Sync Now button.

implementation ("androidx.recyclerview:recyclerview:1.4.0")

Step 3: Working with the XML Files

Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail. Add a RecyclerView as shown below.

activity_main.xml:

activity_main.xml

<?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:id="@+id/main"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:background="@color/white"     tools:context=".MainActivity">      <androidx.recyclerview.widget.RecyclerView         android:id="@+id/recycleViewStagged"         android:layout_width="match_parent"         android:layout_height="match_parent"         app:layout_constraintEnd_toEndOf="parent"         app:layout_constraintStart_toStartOf="parent"         app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>

Now we create a new layout resource file (card_item.xml)

Inside it, we add a simple ImageView and set it android:scaleType="fitXY" complete code of recyclerview_row.xml is shown below.

recyclerview_row.xml:

card_item.xml

<?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"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_margin="2dp">      <!--  set "adjustViewBounds" to "true" to prevent images from stretching  -->     <ImageView         android:id="@+id/imgView"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:adjustViewBounds="true"         android:scaleType="fitXY"         android:src="@drawable/gfg_logo"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintEnd_toEndOf="parent"         app:layout_constraintStart_toStartOf="parent"         app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Working with the Java/Kotlin Files

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail. First, we create a RecyclerViewAdapter class and extend it to RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> and implements its methods as shown below. Below is the code for the RecyclerViewAdapter file. Comments are added inside the code to understand the code in more detail.

RecyclerViewAdapter File:

Java

package org.geeksforgeeks.demo;  import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView;  import androidx.annotation.NonNull; import androidx.recyclerview.widget.RecyclerView;  import java.util.ArrayList;  public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {      private ArrayList<Integer> image;      public RecyclerViewAdapter(ArrayList<Integer> image) {         this.image = image;     }      @NonNull     @Override     public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {         View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_item, viewGroup, false);         return new ViewHolder(v);     }      @Override     public void onBindViewHolder(@NonNull ViewHolder viewHolder, int position) {         viewHolder.imgView.setImageResource(image.get(position));     }      @Override     public int getItemCount() {         return image.size();     }      public static class ViewHolder extends RecyclerView.ViewHolder {         ImageView imgView;          public ViewHolder(@NonNull View itemView) {             super(itemView);             imgView = itemView.findViewById(R.id.imgView);         }     } }

Kotlin

package org.geeksforgeeks.demo  import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import android.widget.ImageView import androidx.recyclerview.widget.RecyclerView  class RecyclerViewAdapter(private var image: ArrayList<Int>) :      RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder>() {     override fun onCreateViewHolder(viewGroup: ViewGroup, i: Int): ViewHolder {         val v: View = LayoutInflater.from(viewGroup.context).inflate(R.layout.card_item, viewGroup, false)         return ViewHolder(v)     }      override fun onBindViewHolder(viewHolder: ViewHolder, i: Int) {         viewHolder.imgview.setImageResource(image[i])     }      override fun getItemCount(): Int {         return image.size     }      class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {         var imgview: ImageView         init {             imgview = itemView.findViewById(R.id.imgView)         }     } }

Now Open the MainActivity File there within the Class

First of all, create the object of the RecyclerViewAdapter, RecyclerView class, and an ArrayList to store ids of images

private lateinit var recyclerViewAdapter: RecyclerViewAdapter
private lateinit var imageList: ArrayList<Int>
private lateinit var recyclerView: RecyclerView

Now inside the onCreate() method, link those objects with their respective IDs that are given in the activity_main.xml file.

imageList = ArrayList(mutableListOf(
R.drawable.k1, R.drawable.k2, R.drawable.k3,
R.drawable.k4, R.drawable.k5, R.drawable.k6,
R.drawable.k7, R.drawable.k8, R.drawable.k9
))
recyclerView = findViewById(R.id.recycleViewStagged)

Now inside onCreate() method, we create a RecyclerView.LayoutManager (Learn more about StaggeredGridLayoutManager) and set it to RecyclerView

val layoutManager: RecyclerView.LayoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
recyclerView.layoutManager = layoutManager

Now we initialize and setAdapter()

recyclerViewAdapter = new RecyclerViewAdapter(imageList)
recyclerView.adapter = recyclerViewAdapter

Below is the complete code for the MainActivity file. Comments are added inside the code to understand the code in more detail.

MainActivity File:

Java

package org.geeksforgeeks.demo;  import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import androidx.recyclerview.widget.RecyclerView; import androidx.recyclerview.widget.StaggeredGridLayoutManager;  import java.util.ArrayList; import java.util.Arrays;  public class MainActivity extends AppCompatActivity {      private RecyclerViewAdapter recyclerViewAdapter;     private ArrayList<Integer> imageList;     private RecyclerView recyclerView;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);          imageList = new ArrayList<>(Arrays.asList(                 R.drawable.k1, R.drawable.k2, R.drawable.k3,                 R.drawable.k4, R.drawable.k5, R.drawable.k6,                 R.drawable.k7, R.drawable.k8, R.drawable.k9         ));          recyclerView = findViewById(R.id.recycleViewStagged);          RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager(                 2, StaggeredGridLayoutManager.VERTICAL);         recyclerView.setLayoutManager(layoutManager);          recyclerViewAdapter = new RecyclerViewAdapter(imageList);         recyclerView.setAdapter(recyclerViewAdapter);     } }

Kotlin

package org.geeksforgeeks.demo  import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import androidx.recyclerview.widget.RecyclerView import androidx.recyclerview.widget.StaggeredGridLayoutManager import java.util.*  class MainActivity : AppCompatActivity() {      private lateinit var recyclerViewAdapter: RecyclerViewAdapter     private lateinit var imageList: ArrayList<Int>     private lateinit var recyclerView: RecyclerView      override fun onCreate(savedInstanceState: Bundle?) {         super.onCreate(savedInstanceState)         setContentView(R.layout.activity_main)          // adding values to arrayList         imageList = ArrayList(mutableListOf(             R.drawable.k1, R.drawable.k2, R.drawable.k3,             R.drawable.k4, R.drawable.k5, R.drawable.k6,             R.drawable.k7, R.drawable.k8, R.drawable.k9         ))         recyclerView = findViewById(R.id.recycleViewStagged)          // setting recyclerView layoutManager         val layoutManager: RecyclerView.LayoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)         recyclerView.layoutManager = layoutManager         recyclerViewAdapter = RecyclerViewAdapter(imageList)          // setting recycle view adapter         recyclerView.adapter = recyclerViewAdapter     } }

Output:

Staggered GridView in Android with Example

onlyklohan

Improve

Article Tags :

Practice Tags :

Java

Staggered GridView in Android with Example

Difference Between GridView and Staggered GridView

StaggeredGridlayout

GridView

Step by Step Implementation

Step 1: Create a New Project in Android Studio

Step 2: Adding Dependency to the build.gradle File

Step 3: Working with the XML Files

activity_main.xml:

Now we create a new layout resource file (card_item.xml)

recyclerview_row.xml:

Step 4: Working with the Java/Kotlin Files

RecyclerViewAdapter File:

Now Open the MainActivity File there within the Class

MainActivity File:

Output:

Similar Reads