SPAN in Android TableLayout

Finally after two days of hard work, I managed to solve the layout issue. Having to insert the AdMob ads in dictionary app, I need to do minor changes to the layout. This morning I realised that there should be a SPAN capability in the TableLayout (as similar to HTML table). I decided to give it a try and, Alhamdulillah it works.

 

What is SPAN in table? It is a capability to merge several cells in a table. If it is a column span, than it is merging several columns in a row. In this example, I managed to merge 2 cells in a row (in line 21) and and 3 cells in a row (refer to line 85 in the code below).

 

Column span 2
Column span 3

 

And this is the XML code for the layout.

   1: <?xml version="1.0" encoding="utf-8"?>

   2: <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

   3:     android:orientation="vertical"

   4:     android:background="@drawable/bd"

   5:     android:layout_width="fill_parent"

   6:     android:layout_height="fill_parent"

   7:     android:stretchColumns="1"

   8:        >

   9:     <TableRow>

  10:         <TextView android:text="Perkataan Melayu" 

  11:             android:textColor="#ffffff"

  12:             android:layout_width="fill_parent" 

  13:             android:layout_height="wrap_content" />

  14:     </TableRow>

  15:     <TableRow>

  16:         <EditText android:text="" 

  17:             android:layout_column="0"

  18:             android:id="@+id/txtmelayu" 

  19:             android:layout_width="fill_parent" 

  20:             android:layout_height="wrap_content"

  21:             android:layout_span="2" />

  22:         <Button android:text="Cari" 

  23:             android:layout_column="2"

  24:             android:id="@+id/btncari" 

  25:             android:layout_width="wrap_content" 

  26:             android:layout_height="wrap_content" />

  27:     </TableRow>>

  28:     <TableRow>    

  29:             <TextView android:text="Bahasa Inggeris papar di sini" 

  30:             android:id="@+id/tveng" 

  31:             android:textColor="#ffffff"

  32:             android:layout_width="wrap_content" 

  33:             android:layout_height="wrap_content" />

  34:             

  35:             <Button android:text="" 

  36:             android:layout_column="2" 

  37:             android:drawableLeft="@drawable/sound"

  38:             android:id="@+id/btnsebutan1" 

  39:             android:layout_width="wrap_content" 

  40:             android:layout_height="wrap_content" 

  41:             />

  42:     </TableRow>

  43:     <TableRow>

  44:         <TextView android:text="Bahasa Arab papar di sini" 

  45:             android:id="@+id/tvarab" 

  46:             android:textColor="#ffffff"

  47:             android:layout_width="wrap_content" 

  48:             android:layout_height="wrap_content" />

  49:             <Button android:text="" 

  50:             android:layout_column="2" 

  51:             android:drawableLeft="@drawable/sound"

  52:             android:id="@+id/btnsebutan" 

  53:             android:layout_width="wrap_content" 

  54:             android:layout_height="wrap_content" 

  55:             />

  56: </TableRow>

  57:     <LinearLayout android:gravity="center_horizontal">

  58:                 <Button android:text="Muat turun imej" 

  59:                android:id="@+id/btndownimej" 

  60:             android:layout_width="wrap_content" 

  61:             android:layout_height="wrap_content" 

  62:              />

  63:     </LinearLayout>

  64:     <TableRow android:gravity="center_horizontal">

  65:         <ImageView 

  66:         android:id="@+id/image1"

  67:         android:layout_width="100sp"

  68:         android:layout_height="100sp"

  69:         />

  70:     </TableRow>

  71:     <TableRow>

  72:         <TextView android:text=" " 

  73:             android:textColor="#ffffff"

  74:             android:layout_width="fill_parent" 

  75:             android:layout_height="wrap_content" />

  76:     </TableRow>

  77:     <TableRow android:gravity="center_horizontal">

  78:         <com.google.ads.AdView

  79:             xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"

  80:             android:id="@+id/adView1"

  81:             android:layout_width="wrap_content"

  82:             android:layout_height="wrap_content"

  83:             ads:adSize="BANNER"

  84:             ads:adUnitId="CHANGE_TO_YOUR_ADMOB_PUBLISHER_ID"

  85:             android:layout_span="3"

  86:             />

  87:     </TableRow>

  88: </TableLayout>

 

Autobot, ROLL-OUT!!!