How to Add Staggered Grid View in Android?

In this article, we are going to add Staggered Grid View in our android app. For doing this, we use StaggeredGridLayout. StaggeredGridLayout is a LayoutManager in android studio which is similar to GridView, but in StaggeredGridLayout each grid has its own height and width. but in the case of GridView, the height and width of all elements are the same.

Difference Between GridView and Staggered GridView

GridView

1. The children's in a rectangular grid format.
2. It also supports horizontal and vertical layouts.
3. Example: Flipkart, Amazon, wallpaper app, etc

StaggeredGridlayout

1. The children's are in a staggered grid format.
2. It supports horizontal and vertical layouts.
3. Example: Pinterest, a wallpaper app, status app, etc

Now we have basic knowledge about both views, so let's add the Staggered Grid in our android app.

Step 1: Create a new Project

1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to set up Android Studio and create your first Android project)

2. Choose "Empty Activity" from the project template window and click Next

3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ), and minimum SDK(we are using API 19: Android 4.4 (KitKat))

4. Next click on the Finish button after filling in the above details

5. Now, wait for the project to finish building.

Step 2: Adding the dependency

Go to Gradle Scripts -> build.gradle (Module: app) section and import below dependencies and click the "sync Now" show at the top:

dependencies
{
//Adding Recycler view 
 implementation 'androidx.recyclerview:recyclerview:1.1.0'
}

Step 3: UI Part

So before applying any changes to the activity_main.xml file, we need an image which we will show in the Staggered View, so you can download any images and put the image in the app -> res -> drawable and give it a suitable name.

Now, go to app -> res -> layout -> activity_main.xml and add RecyclerView as shown below

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:tools = "http://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity">

   <!-- Recycler view -->
   <androidx.recyclerview.widget.RecyclerView
       android:background = "@color/colorPrimary"
       android:id = "@+id/recycleViewStagged"
       android:layout_width = "match_parent"
       android:layout_height = "match_parent"/>
</RelativeLayout>

Next we create a new layout resource file ( recyclerview_row.xml ) inside it we add a simple ImageView and set it android:scaleType="fitXY" and android:id="@+id/imgView .complete code of recyclerview_row.xml is shown below

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout
    android:layout_margin = "8dp"
    xmlns:android = "http://schemas.android.com/apk/res/android"
    android:layout_width = "wrap_content"
    android:layout_height = "wrap_content">

    <!-- simple image view to show image -->
    <ImageView
        android:layout_margin="8dp"
        android:scaleType = "fitXY"
        android:src = "@drawable/img1"
        android:id = "@+id/imgView"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"/>

</RelativeLayout>

Step 4: Coding Part

• First, we create a new RecyclerViewAdapter.java class and extends it to RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> and implements some of its methods as shown below

  package com.studytonight.project;
  
  //importing the basic classes
  import android.content.Context;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  import android.widget.ImageView;
  import androidx.recyclerview.widget.RecyclerView;
  import java.util.ArrayList;
  
  public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
  
      //ArrayList of Integer
      ArrayList<Integer> Image;
      Context context;
  
      //constructor
      public RecyclerViewAdapter( Context context,  ArrayList<Integer> Image) {
          super( );
          this.context = context;
          this.Image = Image;
      }
  
      @Override
      public ViewHolder onCreateViewHolder( ViewGroup viewGroup,  int i) {
  
          View v = LayoutInflater.from( viewGroup.getContext( ))
                  .inflate( R.layout.recyclerview_row,  viewGroup,  false);
          ViewHolder viewHolder = new ViewHolder( v);
          //return the viewHolder
          return viewHolder;
      }
  
      @Override
      public void onBindViewHolder( ViewHolder viewHolder,  int i) {
          //setting image resource
          viewHolder.imgView.setImageResource( Image.get( i));
      }
  
      @Override
      public int getItemCount( ) {
          //return the size 
          return Image.size( );
      }
  
      public static class ViewHolder extends RecyclerView.ViewHolder {
  
          public ImageView imgView;
  
  
          public ViewHolder( View itemView) {
              super( itemView);
              //getting ImageView reference
              imgView = ( ImageView) itemView.findViewById( R.id.imgView);
  
          }
  
  
      }
  
  
  }
  
  
  

  Inside the constructor, we have 2 parameters Context, ArrayList<Integer>. We use the public int get item count() method to get the size of the imagearray size ( how many images we have used in the recycler view ). Inside the class, we created a ViewHolder class and inside its constructor, we initialize the ImageView.

• Now, open the MainActivity.java file and import some basic classes as shown below:

  
  //importing the basic classes 
  import androidx.appcompat.app.AppCompatActivity;
  import androidx.recyclerview.widget.RecyclerView;
  import androidx.recyclerview.widget.StaggeredGridLayoutManager;
  import android.os.Bundle;
  import java.util.ArrayList;
  import java.util.Arrays;

  Now, we create the object of the RecyclerViewAdapter, RecyclerView class and an ArrayList to store ids of images.

     //creating a  recycler viewadapter object
     public RecyclerViewAdapter recyclerViewAdapter;
      //creating an arrayList
     public  ArrayList<Integer> ImageList;
      //creating a recycler view object
     public   RecyclerView recyclerView;

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

    //adding values to the arrayList
          ImageList = new ArrayList<>( Arrays.asList( 
                  R.drawable.img1, R.drawable.img9,
                  R.drawable.img3, R.drawable.img4,
                  R.drawable.img5, R.drawable.img6,
                  R.drawable.img7,
                  R.drawable.img8,
                  R.drawable.img2)
          );
  
         recyclerView = findViewById( R.id.recycleViewStagged);

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

    //setting the recyclerView layoutManager
          RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager( 2,  StaggeredGridLayoutManager.VERTICAL);
          recyclerView.setLayoutManager( layoutManager);
  

  Now, we initialize and set the Adapter.

   recyclerViewAdapter = new RecyclerViewAdapter( this,  ImageList);
          //setting the recycle view adapter
          recyclerView.setAdapter( recyclerViewAdapter);

• The complete code of the MainActivity.java is shown below:

  //MainActivity.java file
  
  package com.stdytonight.project;
  //importing the basic classes 
  import androidx.appcompat.app.AppCompatActivity;
  import androidx.recyclerview.widget.RecyclerView;
  import androidx.recyclerview.widget.StaggeredGridLayoutManager;
  import android.os.Bundle;
  import java.util.ArrayList;
  import java.util.Arrays;
  
  public class MainActivity extends AppCompatActivity {
  
      //creating a  recycler viewadapter object
     public RecyclerViewAdapter recyclerViewAdapter;
      //creating an arrayList
     public  ArrayList<Integer> ImageList;
      //creating a recycler view object
     public   RecyclerView recyclerView;
  
  
      @Override
      protected void onCreate( Bundle savedInstanceState) {
          super.onCreate( savedInstanceState);
          setContentView( R.layout.activity_main);
  
          //adding values to the arrayList
          ImageList = new ArrayList<>( Arrays.asList( 
                  R.drawable.img1, R.drawable.img9,
                  R.drawable.img3, R.drawable.img4,
                  R.drawable.img5, R.drawable.img6,
                  R.drawable.img7,
                  R.drawable.img8,
                  R.drawable.img2)
          );
  
         recyclerView = findViewById( R.id.recycleViewStagged);
  
          //setting the recyclerView layoutManager
          RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager( 2,  StaggeredGridLayoutManager.VERTICAL);
          recyclerView.setLayoutManager( layoutManager);
  
          recyclerViewAdapter = new RecyclerViewAdapter( this,  ImageList);
          //setting the recycle view adapter
          recyclerView.setAdapter( recyclerViewAdapter);
      }
  }

Output:

In the below snapshots, you can see how Staggered View will look in the android application.

When App is opened for the first time:

When Scrolling down the recycler view.

Scrolling down, and reached the end.

Conclusion:

In just 4 simple steps, we have integrated and shown you the basic example for creating Staggered View in your android app. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.

You may also like:

• Intents in Android

• Margin vs. Padding Attributes

• Menu in Android

• Gradient Drawable in Android - Create Gradient Backgrounds