TableLayout adalah tampilan yang disusun berdasarkan baris dan kolom. Biasanya, TableLayout terdiri dari beberapa TableRow. Didalam TableRow inilah terdapat field-field yang nantinya terlihat sebagai kolom. Hasil akhir bagian ini dapat dilihat pada Gambar 3.6.
Gambar 3.6
Yuk kita mulai!😃Â
1. Jalankan Enclipse, File > New > Android Project
2. Isikan kotak dialog new seperti berikut
| Project name | LayoutTabel |
|------------------|-----------------------|
| Build Target | Android 2.2 |
| Application name | Tampilan Layout Tabel |
| Package name | contoh.layoutTabel |
| Create Activity | LayoutTabel |
| Min SDK version | 8 |
3. Pada Package Explorer, pilih LayoutTabel > res > layout > main.xml lalu tuliskan xml berikut
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android "
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Save..."
android:padding="3dip" />
<TextView
android:text="Ctrl-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Save As..."
android:padding="3dip" />
<TextView
android:text="Ctrl-Shift-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:text="X"
android:padding="3dip" />
<TextView
android:text="Import..."
android:padding="3dip" />
</TableRow>
Perhatikan gambar 3.7 merupakan tampilan hierarki sebuah project
Gambar 3.7 (a) Hierarki project (b) hierarki layout main.xml
3. Pastikan kode activity LayoutTabel.java seperti dibawah ini, lihat Gambar 3.8
Activity LayoutTabel.java
package contoh.layoutTabel;
import android.app.Activity;
import android.os.Bundle;
public class LayoutTabel extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
Gambar 3.8. activity LayoutTabel pada package
4. Lakukan Run dengan shortcut CTRL+F11 atau klik kanan package > run as > android Project.
5. Lihat hasilnya seperti Gambar 3.6.
Penjelasan ProgramÂ
Yap, saya kira sudah bisa dipahami dengan mudah mengenai layout main.xml. Sampai bagian ini kita masih bermain-main dengan xml. Layout main.xml jika dilihat dari Outlinenya tampak seperti gambar 3.7 (b).
Beberapa atribut main.xml yang perlu diperhatikan antara lain pada baris ke 5, dimana android:stretchColumns artinya kolom diset melebar memenuhi layar. Baris ke 11 ( android:padding) merupakan atribut untuk membuat jarak antara content terhadap tepi kanan kiri textview.
Sumber
omayib.com
