Android tutorial - Layouts in android | Table Layout | Android TableLayout example - android app development - android studio - android development tutorial
Learn android - android tutorial - Layouts in android - android examples - android programs
TableLayout in Android:
- In Android, A table layout is a grid which contains rows and columns, just like the standard table layout in HTML, and .
- Table Layouts are ideal for displaying tabular data. It can be also used to neatly align items on the screen.
- You can use TableLayout to organize UI (user Interface) or widgets. There is a table row control for each row in your table.
- TableRow is a layout where its elements are horizontally arranged. This object must always be used as a child of TableLayout.
- The children of the TableRow do not need to set the layout_width and layout_height attributes. These values are permanently MATCH_PARENT and WRAP_CONTENT respectively.
- In this tutorial, we show you how to use TableLayout to arrange button, textview and edit text 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.
Note
- In Eclipse 3.7, XML code assist will not prompts the attribute “android:layout_span“, “android:layout_column” and many other useful TableLayout attributes, no idea why, may be bug. Just put the attribute inside, it’s still compile and run.
- P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.
1. TableLayout:
- Open “res/layout/main.xml” file, add following views for demonstration. Read the XML comments, it should be self-explanatory.
- File : res/layout/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" >
<!-- 2 columns -->
<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>
<!-- edittext span 2 column -->
<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>
<!-- just draw a red line -->
<View
android:layout_height="2dip"
android:background="#FF0000" />
<!-- 3 columns -->
<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>
<!-- display this button in 3rd column via layout_column(zero based) -->
<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>
<!-- display this button in 2nd column via layout_column(zero based) -->
<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>
click below button to copy the code from android tutorial team
2. Demo - android emulator - android tutorial :
