Grid Layout Examples

Grid Layout

Items are shown as two dimensional scrolling grid, either vertically or horizontally. Grid is scrolling by default (no ScrollView is needed). The intersection of a row and column defines grid cell. One has the flexibility of placing the views randomly in the grid, by specifying their row and column positions. Multiple views can be placed in a grid cell. Same view can be placed for different grid cells. The number of items is not always specified and can be inserted using suitable Adapter, to fetch the data from data source, such as list, arraylist, database etc. GridView (like ListView) is sub-class of AdapterView.

Main Attributes

android:gravity This is for gravity within each grid cell, with possible values of top, bottom, left, right, center, center_vertical, center_horizontal etc
android:columnWidth This is for column width for each cell.
android:horizontalSpacing Defines the default horizontal spacing between each column.
android:verticallSpacing Defines the default vertical spacing between rows.
android:foregroundGravity Defines the gravity to be applied to the foreground drawable. Possible values are top, bottom, left, right, center, center_vertical, center_horizontal etc.
android:numColumns For number of columns to show.
android:stretchMode Defines how the column should stretch to fill the available space, with none when stretching is disabled.

Grid Layout Example - Static Grid Layout

MainActivity.java


package com.zyasin.gridlayout;

import android.os.Bundle;

import android.app.Activity;

public class MainActivity extends Activity {

TextView txt1, txt2, txt3, txt4, txt5, txt6, txt7, txt8, txt9;

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

        txt1 = (TextView) findViewById(R.id.text1);
        txt2 = (TextView) findViewById(R.id.text2);
        txt3 = (TextView) findViewById(R.id.text3);
        txt4 = (TextView) findViewById(R.id.text4);
        txt5 = (TextView) findViewById(R.id.text5);
        txt6 = (TextView) findViewById(R.id.text6);
        txt7 = (TextView) findViewById(R.id.text7);
        txt8 = (TextView) findViewById(R.id.text8);
        txt9 = (TextView) findViewById(R.id.text9);


   }
}

activity_main.xml


<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:rowCount="3"
    android:columnCount="3">
    
    
    <TextView 
        android:id="@+id/text1"
        android:layout_row="0"
        android:layout_column="0"
        android:text="one"
        android:textSize="25dp"
        android:padding="25dp"
        />
    
    <TextView 
        android:id="@+id/text2"
        android:layout_row="0"
        android:layout_column="1"
        android:text="two"
        android:textSize="25dp"
       	android:padding="25dp"
        />
    
    <TextView 
        android:id="@+id/text3"
        android:layout_row="0"
        android:layout_column="2"
        android:text="three"
        android:textSize="25dp"
       	android:padding="25dp"
        />
    
    <TextView 
        android:id="@+id/text4"
        android:layout_row="1"
        android:layout_column="0"
        android:text="four"
        android:textSize="25dp"
        android:padding="25dp"
        />
    
    < TextView 
        android:id="@+id/text5"
        android:layout_row="1"
        android:layout_column="1"
        android:text="five"
        android:textSize="25dp"
        android:padding="25dp"
        />
    
    <TextView 
        android:id="@+id/text6"
        android:layout_row="1"
        android:layout_column="2"
        android:text="six"
        android:textSize="25dp"
        android:padding="25dp"
        />
    
    <TextView 
        android:id="@+id/text7"
        android:layout_row="2"
        android:layout_column="0"
        android:text="seven"
        android:textSize="25dp"
        android:padding="25dp"
        />
    
    <TextView 
        android:id="@+id/text8"
        android:layout_row="2"
        android:layout_column="1"
        android:text="eight"
        android:textSize="25dp"
        android:padding="25dp"
        />
    
    <TextView 
        android:id="@+id/text9"
        android:layout_row="2"
        android:layout_column="2"
        android:text=" nine "
        android:textSize="25dp"
        android:padding="25dp"
        />
    
</GridLayout>