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.

 

SPAN in Android TableLayout

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>

 

ScreenHunter_07 May. 19 09.43Autobot, ROLL-OUT!!!

Popular Posts

WorldConferences.net