Android Create Table Layout Example Tutorial Android Studio

How to add multiple rows and columns in tablelayout in android like HTML step by step guide with code download.

Table layout is one of the most famous layout firstly comes with HTML and still loved by millions of developers because of its simplicity and easy behavior. Android layouts is also gives us TableLayout . With this type of layout android developer can easily create simple android applications with perfect widget alignment feature so each and every widget holds its perfect place . So here is the complete step by step tutorial for Android Create Table Layout Example Tutorial Android Studio.

android-project-download-code-button

Parts of TableLayout is :

  1. Row .
  2. Column .

Basic definition of Row : Row is basically used to hold a single type of record means inside a single record only one person information can be stored, No matter what type of information you have stored inside a row it will always belong to one person. Rows always goto top to down vertical formation.

Basic definition of Column : Column is the sub divided part of each row and a single row can hold multiple type of columns. Each column consist a different type of information regarding to that particular row. Columns can always be created into horizontal formation.

Android Create Table Layout Example Tutorial Android Studio

Android Create Table Layout Example Tutorial Android Studio.

Code for MainActivity.java file.

package com.example.tablelayout_android_examples.com;
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.

 <TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:shrinkColumns="*" 
android:stretchColumns="*" 
android:background="#ffffff">
 
<!-- Row 1 Starts From Here -->
 <TableRow
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:gravity="center_horizontal">
 
 <TextView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="This is Row 1" 
 android:textSize="20dp" 
 android:padding="20dp"
 android:layout_span="3"
 android:background="#2196F3"
 android:textColor="#ffffff"
 android:textStyle="bold"
 android:gravity="center"/>
 
 </TableRow>
 
<!-- Row 2 Starts From Here -->
 <TableRow
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:gravity="center_horizontal">
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Row 2 Column-1" 
 android:textSize="12dp" 
 android:padding="20dp"
 android:layout_span="1"
 android:background="#64FFDA"
 android:textColor="#000000"
 android:textStyle="bold"
 android:gravity="center"
 />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Row 2 Column-2" 
 android:textSize="12dp" 
 android:padding="20dp"
 android:layout_span="1"
 android:background="#64FFDA"
 android:textColor="#000000"
 android:textStyle="bold"
 android:gravity="center"/>
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Row 2 Column-3" 
 android:textSize="12dp" 
 android:padding="20dp"
 android:layout_span="1"
 android:background="#64FFDA"
 android:textColor="#000000"
 android:textStyle="bold"
 android:gravity="center"/>
 
 </TableRow>
 
<!-- Row 3 Starts From Here -->
 
 <TableRow
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:gravity="center_horizontal">
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Row 3 Column-1" 
 android:textSize="12dp" 
 android:padding="20dp"
 android:layout_span="1"
 android:background="#FFE0B2"
 android:textColor="#000000"
 android:textStyle="bold"
 android:gravity="center"
 />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Row 3 Column-2" 
 android:textSize="12dp" 
 android:padding="20dp"
 android:layout_span="1"
 android:background="#FFE0B2"
 android:textColor="#000000"
 android:textStyle="bold"
 android:gravity="center"/>
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Row 3 Column-3" 
 android:textSize="12dp" 
 android:padding="20dp"
 android:layout_span="1"
 android:background="#FFE0B2"
 android:textColor="#000000"
 android:textStyle="bold"
 android:gravity="center"/>
 
 </TableRow>
 
 <!-- Row 4 Starts From Here -->
 
 <TableRow
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:gravity="center_horizontal">
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Row 4 Column-1" 
 android:textSize="12dp" 
 android:padding="20dp"
 android:background="#FFCCBC"
 android:textColor="#000000"
 android:textStyle="bold"
 android:gravity="center"
 android:layout_weight="1"
 />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Row 4 Column-2" 
 android:textSize="12dp" 
 android:padding="20dp"
 android:background="#FFCCBC"
 android:textColor="#000000"
 android:textStyle="bold"
 android:layout_weight="1"
 android:gravity="center"/>
 
 </TableRow>
 
 <!-- Row 5 Starts From Here -->
 <TableRow
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:gravity="center_horizontal">
 
 <TextView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="This is Row 5" 
 android:textSize="20dp" 
 android:padding="20dp"
 android:layout_span="3"
 android:background="#2196F3"
 android:textColor="#ffffff"
 android:textStyle="bold"
 android:gravity="center"/>
 
 </TableRow>
 
 </TableLayout>

Screenshot:

table_layout

Click here to download Android Create Table Layout Example Tutorial Android Studio project with source code.

Leave a Reply

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