Android GridLayoutManager Example

Android GridLayoutManager is the RecyclerView.LayoutManager implementation to lay out items in a grid. In this tutorial, we’ll create an application that displays CardViews inside a RecyclerView in the form of a GridLayout. Also, we’ll implement an interface that makes RecyclerView item click similar to a ListView itemClickListener.

Android GridLayoutManager

We’ve implemented a RecyclerView using a LinearLayoutManager here. Now let’s use a GridLayoutManager to layout the RecyclerView as a grid.

Following is the constructor for a GridLayoutManager.

reverseLayout if set true then layout items from end to start.

To set the span size for each item, we invoke the method setSpanSizeLookup on the GridLayoutManager

Let’s implement RecyclerView using a GridLayoutManager in a new Android Studio project.

Android GridLayoutManager Example Project Structure

android-recyclerview-gridlayout-manager-project

The project consists of a single Activity : MainActivity.java, an adapter class : RecyclerViewAdapter.java, a DataModel.java class and a custom GridLayoutManager class AutoFitGridLayoutManager.java.

The xml layout of the MainActivity.java class is defined in the file activity_main.xml as

Note: Don’t forget to add the following dependencies for Material Design widgets and CardView in the build.gradle file.

The DataModel.java class is given below:
package com.journaldev.recyclerviewgridlayoutmanager;

The DataModel class will hold the text, drawable icon and background colour of each item cell.

The RecyclerViewAdapter.java class is given below:

In the above code we’ve defined an ItemListener interface that’ll be implemented in the MainActivity.java class.

The xml layout for each RecyclerView item is given below.
recycler_view_item.xml

The AutoFitGridLayoutManager.java class is given below:

The span count is dynamically calculated based on the orientation, width and height available.

The MainActivity.java class is given below:

  1. The above class implements the interface RecyclerViewAdapter.ItemListener and overrides the method onItemClick that’s defined in the adapter class. By doing this, we’ve implemented the RecyclerView Click Listener within our Activity instead of the Adapter class(similar to the standard onItemClickListener defined for a ListView)
  2. A DataModel class holds the details for each RecyclerView item
  3. The LayoutManager of the RecyclerView can be defined by either instantiating the AutoFitGridLayoutManager class with the column width set as 500 or by invoking the GridLayoutManager class object and setting the number of columns as 2

Let’s see the output of the application with the standard GridLayoutManager code.

android GridLayoutManager grid layout output

As you can see, each row has two items that span the column width in both orientations.

Now comment out the code for simple GridLayoutManager and run the code for AutoFitGridLayoutManager

The output of the application in action is given below.
android GridLayoutManager auto fit grid layout

As you can see in the above output, when the orientation changes to landscape, each row has three items, thereby dynamically sizing the items to auto-fit the column width.

This brings an end to this tutorial. You can download the final android GridLayoutManager project from the link given below.

By admin

Leave a Reply

%d bloggers like this: