Skip to content
Related Articles

Related Articles

Staggered GridView in Android with Example
  • Last Updated : 18 Feb, 2021

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

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

Staggered GridView

GridView

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

GridView



Example

A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Staggered GridView in Android

Step by Step Implementation

Step 1: Creating a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that choose Java as the language though we are going to implement this project in Java language.

Step 2: Before going to the coding section first do some pre-task

Go to Gradle Scripts > build.gradle (Module: app) section and import following dependencies and click the “sync Now” on the above pop up.

dependencies
{

// Adding Recycler view 



implementation ‘androidx.recyclerview:recyclerview:1.1.0’

}

Step 3: Designing the UI 

In the activity_main.xml file add a RecyclerView as shown below. 

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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:id="@+id/recycleViewStagged"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

Now we create a new layout resource file ( recyclerview_row.xml ) inside it we add a simple ImageView and set it  android:scaleType=”fitXY” complete code of recyclerview_row.xml is shown below

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp">
  
    <!-- simple image view -->
    <ImageView
        android:id="@+id/imgView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/k1" />
</RelativeLayout>

Step 4: Coding Part

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

Java




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
    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 viewHolder;
    }
  
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i) {
        // setting image resource
        viewHolder.imgview.setImageResource(Image.get(i));
    }
  
    @Override
    public int getItemCount() {
        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);
        }
    }
}

Now Open the MainActivity.java file there within the class, first of all, create the object of the RecyclerViewAdapter, RecyclerView class, and an ArrayList  to store ids of images

// creating recyclerviewadapter object

RecyclerViewAdapter recyclerViewAdapter;

// creating arrayList

ArrayList<Integer> ImageList;

// creating recycler view object

RecyclerView recyclerView;

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

 // adding values to arrayList

 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);

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

// setting recyclerView layoutManager

RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);

recyclerView.setLayoutManager(layoutManager);

Now we initialize and setAdapter()

recyclerViewAdapter = new RecyclerViewAdapter(this, ImageList);

// setting recycle view adapter

recyclerView.setAdapter(recyclerViewAdapter);

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

Java




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 {
  
    // creating recyclerviewadapter object
    RecyclerViewAdapter recyclerViewAdapter;
      
    // creating arrayList
    ArrayList<Integer> ImageList;
      
    // creating recycler view object
    RecyclerView recyclerView;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // adding values to arrayList
        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);
  
        // setting recyclerView layoutManager
        RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);
        recyclerViewAdapter = new RecyclerViewAdapter(this, ImageList);
          
        // setting recycle view adapter
        recyclerView.setAdapter(recyclerViewAdapter);
    }
}

Output:

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!
My Personal Notes arrow_drop_up
Recommended Articles
Page :