Android TableLayout example

What is Android layout?

Layout denotes the architecture of the application, where and how the controls should be organized in the UI.It defines the layout structure and holds all the elements that appear to the user.

Android allows us to create layouts for the applications using simple XML file and those layouts must be placed in /res/layout folder.

We can declare the layout in two ways and here we will discuss first way of doing it:

1. Declare UI elements in XML
2. Create UI elements at runtime using Java.

 

Different kinds of layouts in Android are:

• Linear Layout
• Relative Layout
• Table Layout
• WebView Layout
• Grid View
• Tab Layout
• List View

Table layout

 

In a table layout, as the name suggests, all the controls are arranged  into rows and columns.

Why Table layout?

New Visitor? Like what you read? Then do subscribe to our blog
Subscribe

Table layouts can be used for displaying tabular data or neatly aligning screen contents in a way similar to an HTML table on a web page. It organizes user interface controls, or widgets, on the screen in neatly defined rows and columns.

Before we start with developing application, download code from here to follow with the below listings.

Layout architecture:

The application that we are developing has a simple screen with few controls arranged into rows and columns:

Create layout XML

• Create new android project [File >> New >> Android Project] with project name TableLayoutExample
• Click next and select target android device version [I chose version 2.2]
• Click next and enter package name – ‘com.prgguru.android’
• Click finish

By default main.xml will be created (can be found under /res/layout folder) when you create new project and the same is set as layout for the application using setContentView(R.layout.main)method. Check the onCreate method in TableLayoutExampleActivity class to know about how the layout xml is set:

 

1 2 3 4

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);        setContentView(R.layout.main); }

Open main.xml, now you can view the layout as either XML or in graphical view and just replace the XML with below one:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/tableLayout1"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:shrinkColumns="*"     android:stretchColumns="*" >     <TableRow         android:id="@+id/tableRow1"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:gravity="center_horizontal" >         <TextView             android:id="@+id/textView11"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_span="6"             android:gravity="center"             android:text="Weather Report"             android:textSize="18dp"             android:textStyle="bold" >         </TextView>     </TableRow>     <TableRow         android:id="@+id/tableRow2"         android:layout_width="match_parent"         android:layout_height="wrap_content" >         <TextView             android:id="@+id/TextView21"             android:text="" >         </TextView>         <TextView             android:id="@+id/TextView22"             android:gravity="center"             android:text="M"             android:textStyle="bold"             android:typeface="serif" >         </TextView>         <TextView             android:id="@+id/TextView23"             android:gravity="center"             android:text="T"             android:textStyle="bold"             android:typeface="serif" >         </TextView>         <TextView             android:id="@+id/TextView24"             android:gravity="center"             android:text="W"             android:textStyle="bold"             android:typeface="serif" >         </TextView>         <TextView             android:id="@+id/TextView25"             android:gravity="center"             android:text="T"             android:textStyle="bold"             android:typeface="serif" >         </TextView>         <TextView             android:id="@+id/textView26"             android:gravity="center"             android:text="F"             android:textStyle="bold"             android:typeface="serif" >         </TextView>     </TableRow>     <TableRow         android:id="@+id/tableRow3"         android:layout_width="match_parent"         android:layout_height="wrap_content" >         <TextView             android:id="@+id/textView31"             android:text="Day High"             android:textStyle="bold" >         </TextView>         <TextView             android:id="@+id/textView32"             android:gravity="center_horizontal"             android:text="34°C" >         </TextView>         <TextView             android:id="@+id/textView33"             android:gravity="center_horizontal"             android:text="35°C" >         </TextView>         <TextView             android:id="@+id/textView34"             android:gravity="center_horizontal"             android:text="34°C" >         </TextView>         <TextView             android:id="@+id/textView35"             android:gravity="center_horizontal"             android:text="35°C" >         </TextView>         <TextView             android:id="@+id/textView36"             android:gravity="center_horizontal"             android:text="33°C" >         </TextView>     </TableRow>     <TableRow         android:id="@+id/tableRow4"         android:layout_width="match_parent"         android:layout_height="wrap_content" >         <TextView             android:id="@+id/textView41"             android:text="Day Low"             android:textStyle="bold" >         </TextView>         <TextView             android:id="@+id/textView42"             android:gravity="center_horizontal"             android:text="28°C" >         </TextView>         <TextView             android:id="@+id/textView43"             android:gravity="center_horizontal"             android:text="27°C" >         </TextView>         <TextView             android:id="@+id/textView44"             android:gravity="center_horizontal"             android:text="29°C" >         </TextView>         <TextView             android:id="@+id/textView45"             android:gravity="center_horizontal"             android:text="26°C" >         </TextView>         <TextView             android:id="@+id/textView46"             android:gravity="center_horizontal"             android:text="29°C" >         </TextView>     </TableRow>     <TableRow         android:id="@+id/tableRow5"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:gravity="center" >         <TextView             android:id="@+id/textView8"             android:text="Conditions"             android:textStyle="bold" >         </TextView>         <ImageView             android:id="@+id/imageView1"             android:src="@drawable/monday" >         </ImageView>         <ImageView             android:id="@+id/imageView2"             android:src="@drawable/tuesday" >         </ImageView>         <ImageView             android:id="@+id/imageView3"             android:src="@drawable/wednesday" >         </ImageView>         <ImageView             android:id="@+id/imageView4"             android:src="@drawable/thursday" >         </ImageView>         <ImageView             android:id="@+id/imageView5"             android:src="@drawable/friday" >         </ImageView>     </TableRow> </TableLayout>

How the controls are arranged on the screen?:

Look at the below image and check how the tablerows are arranged inside table layout:

• @+id/tableRow1 – displays text ‘Weather Report’ [Has one TextView control]
• @+id/tableRow2 – displays week days[Has  six TextView controls]
• @+id/tableRow3 – displays high temperature of the day [Has six TextView controls]
• @+id/tableRow4 – displays low temperature of the day [Has  six TextView controls]
• @+id/tableRow5 – iconic display of weather condition [Has  one TextView and Five ImageView controls]

Demo:

Let us test the application:
Run click on the project >> Run as >> Android application
You could see following screen:

Entire project is zipped and is available for download. Unzip the downloaded project and to import the project into eclipse, launch eclipse >> File >> Import.. >> Choose downloaded project(How to import android project in eclipse). If you just want to run the application in your mobile and see the output but don’t want to hit your head with source code, download application(apk) file and install it in your mobile device. 

Download Source CodeDownload Application(apk)*apk in Android is the installation file simliar to exe in windows.

 

 

Reference:

Table Layout

I hope you enjoyed the post!!