Android - Difference between Gridlayout and Staggered Gridlayout

Question

I am working in android material design api & want to display some data in grid format. I tried both GridLayout and StaggeredGridlayout and both look same. For general information, i want to ask what is the difference between Gridlayout and StaggeredGridlayout?

Thank you.

European

gridview is symmetric and staggered gridview is asymmetric.. – Honestly

Answer 1

Grid View : It is is a ViewGroup that displays items in a two-dimensional, scrollable grid. In this each Grid is of same size (Height and width). Grid View shows symmetric items in view.

Staggered Grid View : It is basically an extension to Grid View but in this each Grid is of varying size(Height and width). Staggered Grid View shows asymmetric items in view.

Tutorial to implement Staggered Grid View :

1. Staggered Grid View
2. Pinterest Masonry layout Staggered Grid View

Grandson

Answer 2

My time at Oodles Technologies taught me about staggered. I'll share that.

StaggeredGridLayout is a LayoutManager, it is just like a GridView but in this grid each view have its own size (height and width). It supports both vertical and horizontal layouts.

Below are some basic steps to create a staggered grid:

1) Create a view.

As we know StaggeredGrid is not a direct view, it is a LayoutManager that lays out children in a staggered grid formation. We use RecyclerView as a view for the staggerd grid. Here is our RecyclerView in layout:

<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">

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

2) Set StaggeredGridLayout LayoutManager.

Once our view is ready, let's use LayoutManager to create grids on the view:

RecyclerView favPlaces = (RecyclerView) findViewById(R.id.favPlaces);
StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
favPlaces.setLayoutManager(layoutManager);
favPlaces.setHasFixedSize(true);

3) Adapter to inflate the StaggeredGrid views.

To inflate the data in form of a grid, we first need a layout which will represent that data. We are using CardView for this and the layout is:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardcornerradius="4dp"
        app:cardusecompatpadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/placePic"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustviewbounds="true"
                android:scaletype="fitXY" />

            <TextView
                android:id="@+id/placeName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textsize="16sp" />

        </LinearLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

After we setup our all the basic steps, it's time to complete our main activity. Here is the complete code of MainActivity:

public class MainActivity extends AppCompatActivity {
 
    int placeImage[]= {R.drawable.agattia_airport_lakshadweep,R.drawable.nainital,R.drawable.goa,
            R.drawable.lotus_temple,R.drawable.valley_of_flowers,R.drawable.ranikhet,R.drawable.dehradun,R.drawable.nainital1};
 
    String placeName[]= {"Lakshadweep, India","Nainital, India","Goa, India","Lotus-Temple, India","Valley-Of-Flowers, India","Ranikhet, India",
    "Dehradun, India","Nainital, India"};
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView favPlaces = (RecyclerView) findViewById(R.id.favPlaces);
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
        layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
        favPlaces.setLayoutManager(layoutManager);
        favPlaces.setHasFixedSize(true);
        ArrayList<PlaceDetails> placeList = getPlaces();
 
        StaggeredAdapter staggeredAdapter = new StaggeredAdapter(placeList);
        favPlaces.setAdapter(staggeredAdapter);
    }
 
    private ArrayList<PlaceDetails> getPlaces() {
        ArrayList<PlaceDetails> details = new ArrayList<>();
        for (int index=0; index<placeImage.length;index++){
            details.add(new PlaceDetails(placeImage[index],placeName[index]));
        }
        return details;
    }
}

Ferromagnetism

Answer 3

StaggeredGridlayout

1. This lays out children in a staggered grid formation.
2. It supports horizontal & vertical layout as well as an ability to layout children in reverse.
3. Staggered grids are likely to have gaps at the edges of the layout.
4. To avoid the gaps, StaggeredGridLayoutManager can offset spans independently or move items between spans. You can control this behavior via setGapStrategy(int).

GridLayout

1. This lays out its children in a rectangular grid.
2. The grid is composed of a set of infinitely thin lines that separate the viewing area into cells.
3. Children occupy one or more contiguous cells, as defined by their rowSpec and columnSpec layout parameters.

Curve

your image is not StaggeredGridLayout , it's custom GridLayout from github.com/felipecsl/AsymmetricGridView – Normanormal

@javaacm it doesn't really matter as he's clarifying his point correctly... – Chrissa

Answer 4

A staggered grid Layout includes multiple columns with multiple rows of varying sizes.

It allows for a flexible column/row view with a header and footer and looks fairly easy to implement, though Gradle users will have an easier time than those working with Eclipse and Ant. This is what the view looks like in the Etsy Github app for which it was developed.

Whereas a GridLayout is a layout that places its children in a rectangular grid.

It was introduced in API level 14, and was recently backported in the Support Library. Its main purpose is to solve alignment and performance problems in other layouts. Check out this tutorial if you want to learn more about GridLayout.

Faye