GridLayout in Android Explained

GridLayout is a viewgroup which places its childern views in a rectangular shape grid. A grid is composed of a set of infinitely thin lines that seperate the viewing aria into cells. These grid lines are called as grid indices and these are not visible at runtime.  A grid with N column has N+1 grid indices that start from 0 to N.

Selecting of a particular layout depends on the situation and needs of the app which you want to develop. But it is better to consider the application performance while designing a UI of the app. Nesting layouts hinders perfromance of the application. So it is wise to select a proper layout from all the given layouts for android by google which meets the current needs of the App and also performs better.

So a grid layout is better for layouts where we need grid like applications.

Important properties of the grid layout.

android:columnCount: This property tells the Layout Manager to create the fixed number of columns android:rowCount: This property tells the fixed number of rows to create.

Please note that views are placed one after the other in Gridlayout so it is not necessary to explicitly define the rows and columns until necessary.

android:layout_columnSpan: This property defines a number of cloumns a wiget can occupy of span
android:layout_colSpan: This property defines a number of cloumns a wiget can occupy of span

In order to distribute the space between the child views equally GridLayout also supports grid android:layout_columnWeight="1" and  android:grid:layout_rowWeight="1"

Examples which demonstrate the GridLayout

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="2"
    android:rowCount="2"
    android:orientation="horizontal"
    tools:context=".GridXMLActivity" >
    <Button
        android:id="@+id/button1"
        android:layout_gravity="left|top"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_gravity="left|top"
        android:text="Button" />
    
    <Button
        android:id="@+id/button3"
        android:layout_gravity="left|top"
        android:text="Button" />
    
    <Button
        android:id="@+id/button4"
        android:layout_gravity="left|top"
        android:text="Button" />   
</GridLayout>

And the output screen will be like

Below API Level 21, gridLayout does not support weight property for the it views. But with APP level 21 and above GridLayout Supported weight property for its child views to fill the avaiable space in the screen and Example is shown below

<?xml version="1.0" encoding="utf-8"?>
<ScrollView    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="2">
        <TextView
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:gravity="center"
            android:layout_gravity="fill_horizontal"
            android:background="@color/colorAccent"
            android:text="Tile1" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:gravity="center"
            android:layout_gravity="fill_horizontal"
            android:background="@color/colorPrimaryDark"
            android:text="Tile2" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:gravity="center"
            android:layout_gravity="fill_horizontal"
            android:background="@color/colorPrimary"
            android:text="Tile3" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:gravity="center"
            android:layout_gravity="fill_horizontal"
            android:background="@color/colorAccent"
            android:text="Tile4" />

    </GridLayout>
</ScrollView>

Another example of GridLayout for Designing a simple calculator UI

<?xml version="1.0" encoding="utf-8"?>
<GridLayout   xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:columnCount="4"
        android:orientation="horizontal" >
    <Button
        android:layout_columnSpan="3"
        android:text="/" />
    <Button android:text="1" />
    <Button android:text="2" />
    <Button android:text="3" />
    <Button android:text="*" />
    <Button android:text="4" />
    <Button android:text="5" />
    <Button android:text="6" />
    <Button android:text="-" />
    <Button android:text="7" />
    <Button android:text="8" />
    <Button android:text="9" />
    <Button
        android:layout_gravity="fill"
        android:layout_rowSpan="3"
        android:text="+" />
   <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="0" />
    <Button android:text="00" />
    <Button
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:text="=" />
</GridLayout>

And the output screen will be