GridLayout with CardView

Hello.
In this tutorial I will show you how to make a grid layout in your application. You can change number of columns, rows, number of items and all other cool stuff. Pretty handy for things like displaying the images.

 

Please note that the minimum SDK version must be 21, so take care of it in your build gradle.

Add cardview dependency in your build gradle:

build.gradle(Module:app)
implementation 'com.android.support:cardview-v7:26.1.0'

 

Next, build layout in your activities xml file:

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:background="#D3D3D3"
    android:weightSum="10"
    tools:context="com.example.bodhi64.virtuozatutorials.MainActivity">

    <RelativeLayout
        android:layout_weight="2"
        android:layout_width="match_parent"
        android:layout_height="0dp">

        <TextView
            android:id="@+id/textGrid"
            android:text="GRID LAYOUT"
            android:textSize="34sp"
            android:textColor="#000"
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </RelativeLayout>

    <GridLayout
        android:id="@+id/mainGrid"
        android:rowCount="3"
        android:columnCount="2"
        android:alignmentMode="alignMargins"
        android:columnOrderPreserved="false"
        android:layout_weight="8"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:padding="14dp">

        <!-- ROW 1  -->
        <!-- COLUMN 1  -->



        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_marginBottom="16dp"
            android:layout_rowWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            app:cardElevation="8dp"
            app:cardCornerRadius="8dp">

            <LinearLayout
                android:layout_gravity="center_horizontal|center_vertical"
                android:layout_margin="16dp"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:src="@drawable/ic_back1"
                    android:layout_gravity="center_horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    android:textAlignment="center"
                    android:text="Text"
                    android:textColor="#000"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

            </LinearLayout>

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

        <!-- COLUMN 2  -->

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_marginBottom="16dp"
            android:layout_rowWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            app:cardElevation="8dp"
            app:cardCornerRadius="8dp">

            <LinearLayout
                android:layout_gravity="center_horizontal|center_vertical"
                android:layout_margin="16dp"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:src="@drawable/ic_back2"
                    android:layout_gravity="center_horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    android:textAlignment="center"
                    android:text="Text2"
                    android:textColor="#000"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

            </LinearLayout>

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



        <!-- ROW 2  -->
        <!-- COLUMN 1  -->

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_marginBottom="16dp"
            android:layout_rowWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            app:cardElevation="8dp"
            app:cardCornerRadius="8dp">

            <LinearLayout
                android:layout_gravity="center_horizontal|center_vertical"
                android:layout_margin="16dp"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:src="@drawable/ic_back3"
                    android:layout_gravity="center_horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    android:textAlignment="center"
                    android:text="Text3"
                    android:textColor="#000"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

            </LinearLayout>

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

        <!-- COLUMN 2  -->

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_marginBottom="16dp"
            android:layout_rowWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            app:cardElevation="8dp"
            app:cardCornerRadius="8dp">

            <LinearLayout
                android:layout_gravity="center_horizontal|center_vertical"
                android:layout_margin="16dp"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:src="@drawable/ic_back4"
                    android:layout_gravity="center_horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    android:textAlignment="center"
                    android:text="Text4"
                    android:textColor="#000"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

            </LinearLayout>

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


        <!-- ROW 3  -->
        <!-- COLUMN 1  -->

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_marginBottom="16dp"
            android:layout_rowWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            app:cardElevation="8dp"
            app:cardCornerRadius="8dp">

            <LinearLayout
                android:layout_gravity="center_horizontal|center_vertical"
                android:layout_margin="16dp"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:src="@drawable/ic_back5"
                    android:layout_gravity="center_horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    android:textAlignment="center"
                    android:text="Text"
                    android:textColor="#000"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

            </LinearLayout>

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

        <!-- COLUMN 2  -->

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_marginBottom="16dp"
            android:layout_rowWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            app:cardElevation="8dp"
            app:cardCornerRadius="8dp">

            <LinearLayout
                android:layout_gravity="center_horizontal|center_vertical"
                android:layout_margin="16dp"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:src="@drawable/ic_back6"
                    android:layout_gravity="center_horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    android:textAlignment="center"
                    android:text="Text2"
                    android:textColor="#000"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

            </LinearLayout>

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

    </GridLayout>



</LinearLayout>

You can change number of columns and rows in your layout file by changing android:rowCount and  android:columnCount properties of GridLayout.

I used my own images and you need add them yourself, ofc.

 

Now, we will set click listeners for each element in GridLayout.

In your main activity, copy and paste this code:

MainActivity.java
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.CardView;
import android.view.View;
import android.widget.GridLayout;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {

    GridLayout gridLayout;

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

        gridLayout=(GridLayout)findViewById(R.id.mainGrid);

        setSingleEvent(gridLayout);

    }

// we are setting onClickListener for each element
    private void setSingleEvent(GridLayout gridLayout) {
        for(int i = 0; i<gridLayout.getChildCount();i++){
            CardView cardView=(CardView)gridLayout.getChildAt(i);
            final int finalI= i;
            cardView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(MainActivity.this,"Clicked at index "+ finalI,
                            Toast.LENGTH_SHORT).show();
                }
            });
        }
    }


}

 

And that is it. This is how you implement GridLayout in your app. You can see something similar in applications like Instagram. CardView will be represented as an ImageView and you can manipulate everything as you want.

Cheers

Share with your friends