Android TableLayout – Learn with Simple Example

Android TableLayout – Android SDK द्वारा Provide किया जाने वाला ये Layout समझना उन लोगों के लिए काफी आसान है जो पहले Web Development कर चुके हैं क्‍योंकि CSS का प्रयोग होने से पहले किसी भी Website का Layout Design करने के लिए सामान्‍यत: Table का ही प्रयोग किया जाता था और Website के विभिन्‍न Structural Elements को Properly Position करने के लिए उन्‍हें Table के Rows व Comums के माध्‍यम से Place किया जाता था।

ठीक उसी Concept के आधार पर इस Layout में किसी Android App की Activity के विभिन्‍न UI Elements को Table के Rows and Columns के रूप में Position किया जाता है और इसके Placement का पूरा तरीका लगभग Website’s के Table आधारित Layout के समान ही होता है। यानी इस Layout में Activity के विभिन्‍न Child UI Elements को Rows व Columns में Arrange किया जाता है।

TableRow Object

TableLayout के अन्‍तर्गत TableRow Object एक Row को Represent करता है और इस Row को Layout की जरूरत के अनुसार Single or Multiple कई Columns में वि‍भाजित किया जाता है तथा प्रत्‍येक Column के अन्‍तर्गत विभिन्‍न UI Elements को Place किया जाता है।

TableLayout एक प्रकार का Container Object होता है लेकिन इसके Rows, Columns या Cells की Border Line दिखाई नहीं देते। जबकि प्रत्‍येक Row में 0 or More Cells हो सकते हैं व प्रत्‍येक Cell, एक Single View Object यानी UI Control को Hold कर सकता है।

जिस तरह से एक Row में कई Cells हो सकते हैं, उसी तरह से एक Row में कई Columns भी हो सकते हैं। एक Table में Multiple Rows व Multiple Columns हो सकते हैं। साथ ही किसी भी Table में किसी भी Cell को Empty भी छोड़ा जा सकता है, जिसमें कोई UI Control Exist न हो तथा Cells, एक से ज्‍यादा Columns में ठीक उसी तरह से SPAN भी कर सकते हैं, जिस तरह से HTML में करते हैं अन्‍तर केवल इतना है कि HTML Table में Cells को <td> Element  द्वारा Define किया जाता है जबकि Android के TableLayout में Cells को प्रत्‍येक UI View Control स्‍वयं ही Define कर देता है।

किसी TableLayout के किसी Column की Width उस Table के किसी Row के उसी Column के सबसे Wide Cell की Width के बराबर होता है। फिर भी हम हमारी जरूरत के अनुसार किसी Specific Column की Width को अपनी Java File में setColumnShrinkable() व setColumnStrechable() Methods द्वारा तथा XML Layout File में shrinkColumns व strechColumns Attributes द्वारा Shrink या Strech कर सकते हैं।

जब किसी Column को Shrinkable Mark किया जाता है, तो उस स्थिति में Table Shrink होकर अपने Parent Object के अनुसार Fit हो जाता है। जबकि यदि किसी Column को Strechable Mark किया जाता है, तो उस स्थिति में वह Column, Expand होकर Extra Width Space को Consume कर लेता है। जबकि किसी भी TableLayout की कुल Width, उस TableLayout के Parent Container Object की Total Width द्वारा Define होता है।

यहां एक और ठीक से समझ लेने वाली महत्‍वपूर्ण बात ये है कि  कोई Column, Strechable भी हो सकता है और Shrinkable भी। इस प्रकार की स्थिति में भी वह Column हमेंशा बचे हुए Space को ही Expand होकर Use करता है और किसी भी स्थिति में बचे हुए Space से अधिक Space को Consume नहीं करता।

जबकि TableLayout के setColumnCollapsed() Method अथवा collapseColumns Attribute का प्रयोग करके हम किसी Specific Column को Hide/Show यानी Collapse/Restore कर सकते हैं। जब हम किसी Column को Collapse करते हैं, तो वह Column Android Device की Screen से Hide हो जाता है तथा उस Column द्वारा Occupied Space को अन्‍य Columns द्वारा Occupy कर लिया जाता है। जब हम उस Column को फिर से Restore करते हैं, तो वह Column फिर से Android Device की Screen पर Show होने लगता है। यहां एक महत्‍वपूर्ण रूप से ध्‍यान देने वाली बात ये है कि किसी भी Column को केवल तभी Collapsed/Restored किया जा सकता है जबकि वह TableRow से सम्‍बंधित हो।

TableLayout के किसी भी Child Element में हम layout_width Attribute को Specify नहीं कर सकते बल्कि Width को हमेंशा MATCH_PARENT Value से ही Set किया जा सकता है। लेकिन किसी भी Child Element की Height को layout_height Attributge द्वारा Define किया जा सकता है, जिसका Default मान WRAP_CONTENT होता है और Child कोई TableRow Element होता है, तब Height हमेंशा WRAP_CONTENT से Set रहता है।

TableLayout के प्रत्‍येक Row में Add किए जाने वाले प्रत्‍येक Cell को Increasing Column Order में ही Add किया जाना चाहिए फिर चाहे उन्‍हें XML Code के माध्‍यम से Add किया जा रहा हो या फिर Java Codes के माध्‍यम से। Column Number, Zero Based होते हैं और यदि हम किसी Column को कोई Number Specify नहीं करते, तो Automatically सबसे पहले Column का Index Number 0 Set हो जाता है और आगे के सभी Columns का Index Auto-Increment होता जाता है। जबकि यदि हम Manually Index Numbers Specify करते-करते किसी Index Number को Skip कर देते हैं, तो Android System उसे उस Row में एक Empty Column के रूप में Define कर लेता है।

हालांकि TableLayout के लिए TableRow ही Specify किया गया Direct Child होता है लेकिन क्‍योंकि TableLayout Class में View व ViewGroup Class को Inherit किया गया है, इसलिए हम किसी भी View या ViewGroup Sub-Class Object को TableLayout में Direct Child की तरह Specify कर सकते हैं। साथ ही इस Class में LinearLayout Class को भी Inherit किया गया है, इसलिए LinearLayout Class के विभिन्‍न Constants को भी हम TableLayout के अन्‍तर्गत ठीक उसी तरह से Use कर सकते हैं जिस तरह से LinearLayout में करते हैं।

उदाहरण के लिए layout_weight Attribute वास्‍तव में LinearLayout में Defined Constant है, लेकिन हम इस Attribute को TableLayout में भी Use कर सकते हैं और TableLayout के विभिन्‍न UI Elements को Properly Position करने के लिए उन्‍हें Weightage दे सकते हैं। वास्‍तव में सभी प्रकार के Layouts, Android SDK की Views व ViewGroups Class से ही Derive होते हैं, इसलिए सभी प्रकार के Layouts निम्‍नानुसार कुछ Mostly Used Common Attributes को Share करते हैं:

इनके अलावा और भी ढे़रों Attributes हैं जो लगभग सभी UI Controls में Comon रूप से होते हैं लेकिन layout_weight व layout_gravity ही दो ऐसे Attributes हैं, जो या तो LinearLayout के अन्‍तर्गत Use किए जाने वाले UI Controls की Positioning तय करने के लिए Use किए जा सकते हैं या फिर TableLayout के अन्‍तर्गत Use किए जाने वाले UI Controls की Positioning तय करने के लिए और LinearLayout को Discuss करते समय हमने इन्‍हें जिस तरह से Use किया था, TableLayout के अन्‍तर्गत भी हमें इन्‍हें Exactly उसी तरह से Use करना होता है।

चलिए, इस Layout को भी ठीक से समझने के लिए हम एक Simple सा Login Activity Example देखते हैं-

// File Name: strings.xml 
<resources>
 <string name="tv_login">Login </string>
 <string name="tv_username">Username: </string>
 <string name="tv_password">Password: </string>
 <string name="btn_login">Login </string>
 </resources>

// File Name: dimens.xml 
<resources>
 <!-- Default screen margins, per the Android Design guidelines. -->
 <dimen name="activity_horizontal_margin">16dp</dimen>
 <dimen name="activity_vertical_margin">16dp</dimen>
 <dimen name="activity_heading1">26sp</dimen>
 </resources>

//File Name: MainActivity.java 
package com.bccfalna.myapp;

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.table_layout);
  }
 }

//File Name: table_layout.xml 
<?xml version="1.0" encoding="utf-8"?>
 <TableLayout
 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:padding="@dimen/activity_horizontal_margin"
 android:stretchColumns="*" >

<TableRow
 android:layout_width="match_parent"
 android:layout_height="match_parent" >

<TextView
 android:id="@+id/tvLogin"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/tv_login"
 android:layout_span="5"
 android:textAlignment="center"
 android:textSize="@dimen/activity_heading1"/>
 </TableRow>

<TableRow
 android:layout_width="match_parent"
 android:layout_height="match_parent" >

<TextView
 android:id="@+id/tvUsername"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/tv_username" />

<EditText
 android:id="@+id/etUsername"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:ems="5"
 android:inputType="textPersonName"
 android:layout_weight="1" />
 </TableRow>

<TableRow
 android:layout_width="match_parent"
 android:layout_height="match_parent" >

<TextView
 android:id="@+id/tvPassword"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/tv_password" />

<EditText
 android:id="@+id/etPassword"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:ems="10"
 android:inputType="textPassword" />
 </TableRow>

<TableRow
 android:layout_width="match_parent"
 android:layout_height="match_parent">

<Space
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

<Button
 android:id="@+id/btnLogin"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/btn_login"
 android:layout_marginTop="@dimen/activity_horizontal_margin"
 android:layout_weight="1"/>
 </TableRow>
 </TableLayout>

जब हम इस Example को Run करते हैं, तो हमें निम्‍न चित्रानुसार Login Screen का Output प्राप्‍त होता है-

इस Example के TableLayout Codes को हमने table_layout.xml नाम की एक नई XML Layout File में लिखा है और इसीलिए MainActivity.java File में setContentView() Method में इस XML File के नाम को R.layout.table_layout Parameter के माध्‍यम से Specify किया है। साथ ही इस Example में Use होने वाले सभी String व Dimension Resources को हमने क्रमश: strings.xml व dimens.xml File में Specify किया है।

Buy this eBook for Detailed Discussion of this Example…