Belajar Cara Membuat Table Layout di Android Studio

Assalamualaikum Warahmatullahi Wabarakatuh.

Table Layout adalah sebuah layout yang terdiri dari kolom dan baris, setiap objek atau view yang berada didalam Table Layout, akan tersusun seperti tabel, yaitu ada kolom dan juga barisnya, Table Layout digunakan untuk mempermudah kita dalam merancang User Interface pada Activity.

Pada tutorial ini, kita akan belajar mengenai cara penggunaan Table Layout pada layout.xml menggunakan Android Studio. Untuk lebih jelasnya, mari kita simak tutorial berikut ini.

Materi Lainnya Yang Direkomendasikan:

• Cara Membuat FrameLayout di Android Studio
• Tutorial Cara Menggunakan LinearLayout pada Layout.xml
• Penggunaan RelativeLayout pada Aplikasi Android

Belajar Cara Membuat Table Layout di Android Studio

Buka Aplikasi Android Sudio kalian, Buat Project Baru.

Setelah kalian membuat new empty Activiy, selanjutnya buka activity tersebut, disini kita akan menggunakan sebuah Button pada percobaan Table Layout berikut ini.

Agar lebih mudah, kalian dapat langsung mendrag/drop Table Layout kedalam layout/activity tersebut, disini kita akan membuat tampilan layout seperti ini:

Jika menggunakan kode xml, kalian dapat membuatnya seperti berikut ini:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFF5F5F5"
    android:gravity="center"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <Button
            android:id="@+id/tes1"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:text="Baris 1 Kolom 1" />

        <Button
            android:id="@+id/tes2"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:text="Baris 1 Kolom 2" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <Button
            android:id="@+id/tes3"
            android:layout_width="160dp"
            android:layout_height="150dp"
            android:text="Baris 2 Kolom 1" />

        <Button
            android:id="@+id/tes4"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:text="Baris 2 Kolom 2" />

    </TableRow>

</TableLayout>

Untuk menambahkan baris baru pada Table Layout, kita harus menambahkan tag <TableRow>.

Selain itu juga, kita dapat membuat menu seperti, menu login menggunakan Table Layout, disini kita akan menggunaan beberapa TextView, EditText dan Button untuk membuat design tersebut.

Kode xmlnya seperti berikut ini;

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="8dp"
    android:background="#FFF5F5F5"
    android:gravity="center"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Email: " />

        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textEmailAddress" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Password: " />

        <EditText
            android:id="@+id/editText3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPassword" />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Login" />

        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Daftar" />
    </TableRow>
</TableLayout>

Maka hasilnya akan seperti ini

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.