Signup/Sign In

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:

    Published by: onlyklohan
    Tags:AndroidAndroid StudioAndroid AppStaggered Grid
    IF YOU LIKE IT, THEN SHARE IT
     

    RELATED POSTS