Tutorial Cara Membuat Table Layout pada layout.xml Android

DenysAndroider - Kali ini Saya akan memberi Tutorial cara membuat Table Layout di Android. TableLayout pada layout.xml terdiri dari baris dan kolom seperti yang ada pada tag table HTML.
Disini kita akan membuat tampilan yang terdiri dari widget editText,TextView dan Button. Dan juga sebelumnya kita bisa membuat rancanganya terlebih dahulu.

 Seperti gambar berikut :

Rancangan Baris dan Kolom

Struktur folder/file Layout.xml

Pastikan kalian sudah Membaca Cara Membuat Aplikasi HelloWorld di Android Studio untuk dasarnya ,karena tutorial disini kita akan langsung mulai pemrograman Aplikasi di dalam Android Studio.

Buat  file layout.xml :

Klik Kanan folder Layout di app> res>Layout

Buat file Layout

Buat nama layout

Kalian bisa membuat layout.xmlnya seperti code berikut :

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:shrinkColumns="*"
    android:stretchColumns="*" >

    <!-- Baris 1 Kolom 1 -->

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <TextView
            android:id="@+id/textView9"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text=" Contoh Login"
            android:textSize="24dp"
            android:textStyle="bold" >
        </TextView>
    </TableRow>

    <!--Baris 2 Kolom 2 -->

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="UserName"
            android:textSize="16dp" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10" >
        </EditText>
    </TableRow>

    <!-- Baris 3 Kolom 3 -->

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

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

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

    <!-- Baris 4 Kolom 1 -->

    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right" >

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Masuk" />
    </TableRow>

</TableLayout>

Hasilnya:

Table Layout