Hurry! Try our new Interactive Courses for FREE. 🥳   🚀
Written By:
onlyklohan
10 minute read
AndroidAndroid StudioAndroid AppStaggered Grid

How to Add Staggered Grid View in Android?

Posted in Programming   LAST UPDATED: SEPTEMBER 2, 2021

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:

Staggered Grid View Example

When Scrolling down the recycler view.

Staggered Grid View Example

Scrolling down, and reached the end.

Staggered Grid View Example

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:


IF YOU LIKE IT, THEN SHARE IT

RELATED POSTS