Android - Difference between Gridlayout and Stagge

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.

Answer 1

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

StaggeredGridLayout is a LayoutManager, it is just like a grid view 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 staggerd grid. here is our recyclerview in layout-

<relativelayout android:layout_height="match_parent" android:layout_width="match_parent" android:paddingtop="@dimen/activity_vertical_margin" tools:context="com.deepanshu.staggered_gridlayout.MainActivity" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">

    <android.support.v7.widget.recyclerview android:id="@+id/favPlaces" android:layout_height="match_parent" android:layout_width="match_parent">
</android.support.v7.widget.recyclerview></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 grid first we need a layout which will represent that data.We are using CardView for this and the layout is-

<android.support.v7.widget.cardview android:layout_height="wrap_content" android:layout_width="match_parent" app:cardcornerradius="4dp" app:cardusecompatpadding="true">
    <linearlayout android:background="@color/colorPrimary" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical">



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

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


    </textview></imageview></linearlayout>
</android.support.v7.widget.cardview>

</linearlayout>

Then We setup our all the basic steps, it's time to complete our main activity. here is the complete code of main activity-

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

Answer 2

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

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.

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.

Answer 5

Grid Layout (API Level 14): A layout that places its children in a rectangular grid. The number of rows and columns within the grid can be declared using the android:rowCount and android:columnCount properties. Typically, however, if the number of columns is declared the GridLayout will infer the number of rows based on the number of occupied cells making the use of the rowCount property unnecessary. Similarly, the orientation of the GridLayout may optionally be defined via the android:orientation property.

I think there is no separate StaggeredGridLayout. Here are the things we do have

StaggeredGridLayoutManager : It is one of the a layout manager used in Recyclerview.A LayoutManager that lays out children in a staggered grid formation. It supports horizontal & vertical layout as well as an ability to layout children in reverse.

Staggered GridView : The StaggeredGridView allows the user to create a GridView with uneven rows similar to how Pinterest looks. Includes own OnItemClickListener and OnItemLongClickListener, selector, and fixed position restore.Please look at this example.