Android GridLayout Example Tutorial

How to use row,column in GridLayout.

GridLayout is type of android layout to create android applications who display widgets and text fields in grid format. Grid layout is usable with rows and columns like application developer can define how much rows and columns will created in layout files. Its like creating a matrix layout in android application. So here is the complete step by step tutorial for Android GridLayout Example Tutorial.

android-project-download-code-button

Android GridLayout Example Tutorial.

Code for MainActivity.java file.

package com.android_examples.com.gridlayout;
import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

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

Code for activity_main.xml layout file.

 <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:columnCount="4"
 android:rowCount="3"
 tools:context="com.android_examples.com.gridlayout.MainActivity" >

 <TextView
 android:id="@+id/textView1"
 android:layout_row="0"
 android:layout_column="0"
 android:text="A"
 android:textAppearance="?android:attr/textAppearanceLarge"
 android:padding="30dp"/>
 
 <TextView
 android:id="@+id/textView2"
 android:layout_row="0"
 android:layout_column="1"
 android:text="B"
 android:padding="30dp"
 android:textAppearance="?android:attr/textAppearanceLarge" />
 
 <TextView
 android:id="@+id/textView3"
 android:layout_row="0"
 android:layout_column="2"
 android:text="C"
 android:padding="30dp"
 android:textAppearance="?android:attr/textAppearanceLarge" />

 <TextView
 android:id="@+id/textView4"
 android:layout_row="0"
 android:layout_column="3"
 android:text="D"
 android:padding="30dp"
 android:textAppearance="?android:attr/textAppearanceLarge" />
 
 //2nd row starts from here.
 
 <TextView
 android:id="@+id/textView5"
 android:layout_row="1"
 android:layout_column="0"
 android:text="E"
 android:textAppearance="?android:attr/textAppearanceLarge"
 android:padding="30dp"/>
 
 <TextView
 android:id="@+id/textView6"
 android:layout_row="1"
 android:layout_column="1"
 android:text="F"
 android:padding="30dp"
 android:textAppearance="?android:attr/textAppearanceLarge" />
 
 <TextView
 android:id="@+id/textView7"
 android:layout_row="1"
 android:layout_column="2"
 android:text="G"
 android:padding="30dp"
 android:textAppearance="?android:attr/textAppearanceLarge" />

 <TextView
 android:id="@+id/textView8"
 android:layout_row="1"
 android:layout_column="3"
 android:text="H"
 android:padding="30dp"
 android:textAppearance="?android:attr/textAppearanceLarge" />

 //3rd row starts from here.
 
 <TextView
 android:id="@+id/textView9"
 android:layout_row="2"
 android:layout_column="0"
 android:text="I"
 android:textAppearance="?android:attr/textAppearanceLarge"
 android:padding="30dp"/>
 
 <TextView
 android:id="@+id/textView10"
 android:layout_row="2"
 android:layout_column="1"
 android:text="J"
 android:padding="30dp"
 android:textAppearance="?android:attr/textAppearanceLarge" />
 
 <TextView
 android:id="@+id/textView11"
 android:layout_row="2"
 android:layout_column="2"
 android:text="K"
 android:padding="30dp"
 android:textAppearance="?android:attr/textAppearanceLarge" />

 <TextView
 android:id="@+id/textView12"
 android:layout_row="2"
 android:layout_column="3"
 android:text="L"
 android:padding="30dp"
 android:textAppearance="?android:attr/textAppearanceLarge" />
 
 
 
</GridLayout>

Screenshot:

Android GridLayout Example Tutorial

Click Here to Download Android GridLayout Example Tutorial project.

Leave a Reply

Your email address will not be published. Required fields are marked *