Table Layout Activity || Basic || Android Studio Tutorial || Mr.DarkTechy

Table Layout Activity || Basic || Android Studio Tutorial || Mr.DarkTechy

Note

---

In Android, TableLayout let you arranges components in rows and columns, just like the standard table layout in HTML, <tr> and <td>.

In this tutorial, we show you how to use TableLayout to arrange button, textview and edittext in rows and columns format, and also demonstrates the use of "android:layout_span" to span view in 2 cells, and "android:layout_column" to display the view in specified column.

XML : 

activity_main

LOCATION: res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http:// schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >


<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView1"
android:text="Column 1"
android:textAppearance="?android:attr/textAppearanceLarge" />

<Button
android:id="@+id/button1"
android:text="Column 2" />
</TableRow>


<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<EditText
android:id="@+id/editText1"
android:layout_span="2"
android:text="Column 1 & 2" />
</TableRow>


<View
android:layout_height="2dip"
android:background="#FF0000" />


<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView2"
android:text="Column 1"
android:textAppearance="?android:attr/textAppearanceLarge" />

<Button
android:id="@+id/button2"
android:text="Column 2" />

<Button
android:id="@+id/button3"
android:text="Column 3" />
</TableRow>


<TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<Button
android:id="@+id/button4"
android:layout_column="2"
android:text="Column 3" />
</TableRow>


<TableRow
android:id="@+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<Button
android:id="@+id/button5"
android:layout_column="1"
android:text="Column 2" />
</TableRow>

</TableLayout>