Layouting Aplikasi Android Menggunakan TableLayout

TableLayout merupakan teknik penggambaran user interface aplikasi android berdasarkan baris dan kolom. Baris adalah berurutan kebawah dan kolom berurutan menyamping. Untuk urusan layouting menggunakan TableLayout, developer Android perlu mengetahui beberapa hal, diantarany:

• TableLayout di Android secara default tidak menampilkan garis batas untuk masing-masing baris dan kolom.
• Tiap baris table bisa memiliki satu atau banyak sel.
• Tiap sel hanya diperbolehkan memiliki satu objek view.

Jika pada aplikasi web pembaca pasti mengetahui penggunaan table untuk user interface, Android pun demikian. Pada dasarnya penggunaan TableLayout pada aplikasi Android hanya sebatas untuk keperluan tertentu, dan tidak menyeluruh untuk layouting. Karena penggunaan Relative Layout maupun Linear Layout lebih disukai developer.

Berikut adalah contoh penggunaan Table Layout :

Membuat 3 baris menggunakan TableLayout

Secara default, setiap baris dalam TableLayout berisi 3 kolom. Jika suatu ketika pembaca ingin membuat sebuah baris (row) pada TableLayout menjadi full width. Maka pembaca perlu menggunakan tag layout span untuk memecahnya. Berikut adalah contoh gambarnya :

Dari gambar diatas, kita membuat 3 baris tabel layout. Berikut adalah source codenya :

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:android1="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="*" >

    <!-- Baris pertama -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:textSize="18dp" 
            android:text="Baris Pertama"  
            android:layout_span="3"
            android:gravity="center"
            android:background="#37abc8"
            android:textColor="#f2f2f2"/>  
    </TableRow>

    <!-- Baris kedua -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:textSize="18dp" 
            android:text="Baris Kedua"  
            android:layout_span="3"
            android:gravity="center"
            android:background="#222222"
            android:textColor="#f2f2f2"/>  
    </TableRow>

    <!-- Baris ketiga -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:textSize="18dp" 
            android:text="Baris Ketiga"  
            android:layout_span="3"
            android:gravity="center"
            android:background="#f6f6f6"
            android:textColor="#222222"/>  
    </TableRow>
</TableLayout>

Penjelasan kode :

• Baris 11 hingga baris 24 adalah script XML untuk baris pertama.
• Baris 27 – 40 untuk baris kedua
• dan Baris 43 – 56 untuk baris ketiga
• Masing-masing teks pada baris bisa terletak ditengah dari baris itu sendiri adalah karena kita memecahnya menggunakan tag android:layout_span=”3″

Membuat Baris Dengan 3 Kolom

Untuk membuat baris dengan 3 buah kolom. Pembaca hanya perlu membuat 3 buah view objek, misalkan TextView. Masing-masing TextView tersebut nantinya akan menempati masing-masing kolom.

Untuk membuat baris pertama menjadi 3 kolom seperti gambar diatas, silahkan edit isi TableRow baris pertama, seperti source code berikut :

<!-- Baris pertama -->

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#37abc8"
            android:gravity="center"
            android:text="Baris Pertama"
            android:textColor="#f2f2f2"
            android:textSize="18dp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#37abc8"
            android:gravity="center"
            android:text="Baris Pertama"
            android:textColor="#f2f2f2"
            android:textSize="18dp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#37abc8"
            android:gravity="center"
            android:text="Baris Pertama"
            android:textColor="#f2f2f2"
            android:textSize="18dp" />
    </TableRow>

Penjelasan :

• Untuk membuat 3 kolom, kita cukup membuat tiga buah objek view
• Pada masing-masing TextView penulis telah menghilangkan tag android:layout_span

Membuat Tabel 2 Kolom

Langkah untuk membuat tabel dengan 2 buah kolom sebenarnya hampir sama seperti saat kita membuat 3 kolom diatas. Kita hanya perlu membuat 2 buah objek view, dan melakukan pemecahan span 2 kolom untuk salah satu objek view. Lihat gambar berikut :

Pembaca cukup mengganti source code TableRow baris kedua dengan kode berikut :

 <!-- Baris kedua -->

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#222222"
            android:gravity="center"
            android:text="Baris Kedua"
            android:textColor="#f2f2f2"
            android:textSize="18dp" />
       <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#222222"
            android:gravity="center"
            android:layout_span="2"
            android:text="Baris Kedua"
            android:textColor="#f2f2f2"
            android:textSize="18dp" />
    </TableRow>

Penjelasan :

• Kolom terdiri dari 2 objek TextView
• Pada baris ke 21, kita melakukan span layout untuk 2 kolom. Sehingga objek kedua berada persis ditengah kolom.
• Untuk melakukan span layout pada objek pertama, pembaca cukup menghilangkan tag layout_span objek kedua dan menggantinya ke objek pertama.