Grid Layout in Android

In this article, we will learn about the Grid - layout, its uses and set four image views in grid view.
Submitted by Manu Jemini, on December 28, 2017

Grid Layout is one of the special layouts in Android layouts. In this layout, the different entities are placed in a structure of Grid. It’s very Useful if your layout will make use of that structure. Like show-casing multiple pictures or giving multiple buttons or image button to form an interface where the user can choose between them.

This is very simple to implement only in case of metrical structure. You just have to place the entities in row-column mode. The Number of rows and column can be changed easily. This layout is also very flexible as the size of a particular index could be more or less than the other.

The Disadvantages are few because it is not recommended to use it for a general use, but if you interface is complex, so to say not in a matrix structure, you have to do some extra efforts.

There are few situations when using grid layout is beneficial as compared to other layouts. One of the most common is the gallery. It will be very quick to place 10 pictures with links or event onclick listener.

Below code is an example of using it, to get started from nothing, make an android project. An activity will automatically be created for you; make use of that and alongside with it a layout file.

The Layout will make Four Images in a 2 x 2 matrix form.

Java file

package numeric.test;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;



public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
  
}

Layout

<?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="match_parent"
        android:layout_row="0"
        android:layout_column="33"
        android:orientation="vertical"
        android:columnCount="2">


    <ImageView
            android:layout_width="150dp"
            android:layout_height="200dp"
            android:id="@+id/imageView1"
            android:layout_margin="25dp"
        android:layout_row="0"
        android:layout_column="0"
        android:src="@drawable/aa" />
    <ImageView
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:id="@+id/imageView2"
        android:layout_margin="25dp"
        android:layout_row="1"
        android:layout_column="0"
        android:src="@drawable/aa"/>

    <ImageView
        android:layout_width="150dp"
        android:layout_height="201dp"
        android:id="@+id/imageView4"
        android:layout_margin="25dp"
        android:layout_row="1"
        android:layout_column="1"
        android:src="@drawable/aa"/>

    <ImageView
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:id="@+id/imageView3"
        android:layout_margin="25dp"
        android:layout_row="0"
        android:layout_column="1"
        android:src="@drawable/aa" />

</GridLayout>

Menifest file

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="numeric.test">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Output