Android Staggered GridView Tutorial || Staggered Grid Example

Android Staggered GridView Tutorial will guide you through a detailed explanation of how and why images in the various social networking apps are shown in a new style.

If you are new to this terminology here a small introduction for you Android Staggered Gridview is a way of displaying image in a different style based on the image dimensions in a surprising style for each and every image.

Android Staggered Gridview

Images are shown in different proportions based on their dimensions and even some apps show a mixed view of images and videos like instagram. In coming tutorial we will be experiencing such a view where videos are loaded and played with autoplay feature when we scrolled onto the video view.

When it comes to the implementation technically there is no much difference in regular style of showing images to this staggered view.

Let’s start..

activity_main.xml

Start with adding a recyclerview to your ConstraintLayout, you may use any other layout to get Android Staggered Gridview implement

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="staggered.android.com.staggeredview.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/stagRecycleView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.constraint.ConstraintLayout>

then design a recyclerview row according to your requirements on this default view

recyclerview_row.xml

Use a RelativeLayout for this view, add a ImageView to populate Android Staggered Gridview

we are providing a scale for the image view to make it fit in dimensions.

 scaleType="fitXY"

<ImageView
 android:id="@+id/imgView"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="fitXY"/>

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

    <ImageView
        android:id="@+id/imgView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"/>

</RelativeLayout>

MainActivity.java

Add your images as desired to a Array List here i am repeating the items to make the list stretch a little bit more in real time you may use accordingly

Image = new ArrayList<>(Arrays.asList(
 R.drawable.img1,R.drawable.img2,
 R.drawable.img3,R.drawable.img4,
 R.drawable.img5,R.drawable.img6,
 R.drawable.img7,R.drawable.img8,
 R.drawable.img9,R.drawable.img10,
 R.drawable.img1,R.drawable.img2,
 R.drawable.img3,R.drawable.img4,
 R.drawable.img5,R.drawable.img6,
 R.drawable.img7,R.drawable.img8,
 R.drawable.img9)
 );

Use StaggeredGridLayoutManager to display the images in Staggered style as like we have GridLayoutManager to populate gridview’s LinearLayoutManager to populate list view.

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

pass image array to RecyclerView Adapter

adapter = new RecyclerViewAdapter(this, Image);

Full code for the main activity is provided

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import java.util.ArrayList;
import java.util.Arrays;

public class MainActivity extends AppCompatActivity {

    RecyclerViewAdapter adapter;
    ArrayList<Integer> Image;
    RecyclerView recyclerView;
    private RecyclerView.LayoutManager layoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Image = new ArrayList<>(Arrays.asList(
                R.drawable.img1,R.drawable.img2,
                R.drawable.img3,R.drawable.img4,
                R.drawable.img5,R.drawable.img6,
                R.drawable.img7,R.drawable.img8,
                R.drawable.img9,R.drawable.img10,
                R.drawable.img1,R.drawable.img2,
                R.drawable.img3,R.drawable.img4,
                R.drawable.img5,R.drawable.img6,
                R.drawable.img7,R.drawable.img8,
                R.drawable.img9)
        );

        recyclerView = findViewById(R.id.stagRecycleView);

        layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);

        adapter = new RecyclerViewAdapter(this, Image);
        recyclerView.setAdapter(adapter);
    }


}

RecyclerViewAdapter.java

Now create adapter using which we will populate the recyclerview here for populating Android Staggered Gridview i am using a default way to set image to the image view in real time you may use these library’s

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.ArrayList;

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {

    ArrayList<Integer> Image;
    Context context;

    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) {
        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);
            imgview = (ImageView) itemView.findViewById(R.id.imgView);

        }


    }


}

Output :

You can see the usage of Android Staggered Gridview from the screenshot below.

If you have any query on this tutorial on Android Staggered Gridview let us know in the comment section below.If you like this tutorial do like and share us for more interesting updates.