Android Grid Layout

In this article, we are gonna make an android app which implements Grid Layout.
GridLayout can be used to make a UI that has viewing area in separate cells. Basically, each view is showed in a cell represented by a column number and a row number. It aligns it's element according to the property rowCount and columnCount and the orientation given.

We are gonna make an app which has a GridLayout with 2 rows, 3 columns. For each cell we will use a CardView. At top and bottom a text will be shown .This will be the output.

1. Create an empty activity named GridLayoutActivity in a new project or an existing project. Make sure it's a launcher activity if you are using an existing project. Check AndroidManifest.xml

        <activity android:name=".GridLayoutActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

2. Open build.grade (Module: app) and add following dependency to use CardView.

implementation 'com.android.support:cardview-v7:26.1.0'

3. Open acitvity_grid_layout.xml( layout file for GridLayoutActivity) and write following code to make the user interface-

<?xml version="1.0" encoding="utf-8"?>
<!--
Linear Layout with vertical orientation
Set weightSum to 10, so that the inner layouts can be divided
according to their requirement
Like in this code, first layout has been given weight 2
second layout with weight 6 and
third layout with weight 2 which makes a total of 10
-->
<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:weightSum="10"
    tools:context="com.example.gunjan.androidcodemode.GridLayoutActivity">

    <!--
    Relative layout will take up space to 2
    Set height to 0 and weight to 2
    Create a text view and center it respective to it's parent
    -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight ="2">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Grid Layout Sample"
            android:textSize="30sp"
            android:layout_centerInParent="true"
            android:textColor="@android:color/holo_orange_dark"/>
    </RelativeLayout>

    <!--
    Grid layout will take up space to 6
    Set height to 0 and weight to 6
    Set rowCount to 2 and columnCount to 3
    Create 6 CardView inside this layout
    -->
    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight ="6"
        android:columnCount="3"
        android:rowCount="2"
        android:columnOrderPreserved="false">

        <!--Draw 6 cards to show on 2X3 grid-->
        <!--Card will be auto-sized to be placed on grid-->

        <!--Row 1, Column 1-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_margin="10dp"
            app:cardCornerRadius="10dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_gravity="center">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="One"
                    android:textColor="@android:color/black"
                    android:textSize="30sp"/>
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <!--Row 1, Column 2-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_margin="10dp"
            app:cardCornerRadius="10dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_gravity="center">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Two"
                    android:textColor="@android:color/black"
                    android:textSize="30sp"/>
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <!--Row 1, Column 3-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_margin="10dp"
            app:cardCornerRadius="10dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_gravity="center">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Three"
                    android:textColor="@android:color/black"
                    android:textSize="30sp"/>
            </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_rowWeight="1"
            android:layout_margin="10dp"
            app:cardCornerRadius="10dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_gravity="center">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Four"
                    android:textColor="@android:color/black"
                    android:textSize="30sp"/>
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <!--Row 2, Column 2-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_margin="10dp"
            app:cardCornerRadius="10dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_gravity="center">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Five"
                    android:textColor="@android:color/black"
                    android:textSize="30sp"/>
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <!--Row 2, Column 3-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_margin="10dp"
            app:cardCornerRadius="10dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_gravity="center">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Six"
                    android:textColor="@android:color/black"
                    android:textSize="30sp"/>
            </LinearLayout>
        </android.support.v7.widget.CardView>

    </GridLayout>

    <!--Relative layout will take up space to 2
    Set height to 0 and weight to 2
    Create a text view and center it respective to it's parent
    -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight ="2">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Grid Layout Ends"
            android:textSize="30sp"
            android:layout_centerInParent="true"
            android:textColor="@android:color/holo_orange_dark"/>
    </RelativeLayout>
</LinearLayout>

4. Run the project.