Cara Membuat Table Layout pada Android dengan Mudah

Panduan Membuat Aplikasi untuk Pemula

Table Layout adalah Layout yang digunakan untuk membangun user interface (tampilan antar muka ) aplikasi android dengan berdasarkan Baris dan Kolom.  Layout ini digunakan untuk keperluan tertentu saja karena kebanyakan pembangunan tampilan antar muka lebih sering memanfaatkan Relative Layout dan Linear Layout.

Sumber : Tutorial Point

Table Layout terdiri dari:

  1. Row/ baris pada dasarnya digunakan untuk menyimpan satu jenis record, hanya satu informasi yang dapat disimpan.
  2. Kolom adalah sub bagian terbagi dari setiap baris dan satu baris dapat menampung beberapa jenis kolom. Setiap kolom terdiri dari jenis informasi yang berbeda mengenai baris tersebut.

Tag Table Layout

Beberapa tag pada Table Layout :

  1. TableLayout : Tag pembuka untuk menggunakan TableLayout
  2. TableRow : Tag untuk membuat Baris

Contoh Penggunaan

Buatlah project baru dengan nama TableLayout. Kemudian masukan kode-kode xml berikut pada Activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1">

    <TableRow
        android:background="#22ff">
        <TextView
            android:layout_column="1"
            android:text="Open..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-O"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <TableRow android:background="#22ff">
        <TextView
            android:layout_column="1"
            android:text="Save..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-S"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <TableRow android:background="#22ff">
        <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 android:background="#ffff00">
        <TextView
            android:text="X"
            android:padding="3dip" />
        <TextView
            android:text="Import..."
            android:padding="3dip" />
    </TableRow>

    <TableRow android:background="#ffff00">
        <TextView
            android:text="X"
            android:padding="3dip" />
        <TextView
            android:text="Export..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-E"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

    <TableRow android:background="#aaf">
        <TextView
            android:layout_column="1"
            android:text="Quit"
            android:padding="3dip" />
    </TableRow>
</TableLayout>

Maka hasilnya adalah seperti gambar dibawah ini :

Membuat Table Layout pada Android

 

Berikut contoh penggunaan table layout yang lainnya :

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >


    <TableRow
        android:paddingTop="10px"
        android:gravity="center"
        android:layout_marginTop="20px">

        <TextView
            android:id="@+id/status"
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:layout_span="2"
            android:text="LOGIN"
            android:textColor="#890000"
            android:textSize="25sp"
            android:textStyle="bold" />

    </TableRow>

    <TableRow
        android:layout_marginTop="20dip" >

        <TextView
            android:layout_width="wrap_content"
            android:text="Username :"
            android:textSize="20sp"
            android:textColor="#000000"
            android:layout_marginLeft="20dip"
            ></TextView>

        <EditText
            android:id="@+id/screenName"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1" >

        </EditText>

    </TableRow>


    <TableRow
        android:layout_marginTop="20dip" >

        <TextView android:text="Password :"
            android:layout_width="wrap_content"
            android:textSize="20sp"
            android:textColor="#000000"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"></TextView>

        <EditText
            android:id="@+id/password"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1" >

        </EditText>

    </TableRow>


    <TableRow
        android:gravity="center"
        android:layout_marginTop="20dip" >

        <Button
            android:text="Submit"
            android:clickable="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/save" android:layout_span="2" ></Button>
    </TableRow>

</TableLayout>

 

Hasilnya seperti gambar dibawah ini :

Membuat Table Layout pada Android

 

Itulah penjelasan, tag, dan cara penggunaan Table Layout. Agar lebih memahami silahkan kamu explorer lagi mengenai penggunaannya.