Cara Membuat Table Layout pada Android dengan Mudah

Pada artikel ini kita akan membahas penggunaan Table Layout pada Android Studio. Simak selengkapnya sekarang juga !

Apa itu Table Layout di Android Studio?

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.

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 :

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>

Running Project

Hasilnya seperti gambar dibawah ini :

Penutup

Itulah penjelasan, tag, dan cara penggunaan Table Layout pada android studio. Agar lebih memahami silahkan kamu explorer lagi mengenai penggunaannya. Semoga bermanfaat dan jangan lupa share ke temanmu yang lainnya juga.