Thu. Oct 21st, 2021

Pada materi sebelumnya membahas tentang desain layout xml LinearLayout horizontal dan vertikal. pada kesempatan ini kita akan membahas desain layout TabelLayout dan Table Row.

TableLayout merupakan desain layout yang berkaitan dengan baris dan kolom. dimana table row digunakan untuk membuat baris pada layout. misalnya membuat layout seperti gambar dibawah ini.

untuk membuat tampilan seperti gambar diatas. diperlukan layout TableLayout dan Table Row.

full code:

<?xml version="1.0" encoding="utf-8"?>

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

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

            <TextView
                android:id="@+id/textView"
                android:layout_column="1"
                android:padding="3dp"
                android:text="Open..." />

            <TextView
                android:id="@+id/textView2"
                android:layout_gravity="right"
                android:padding="3dp"
                android:text="Ctrl-O" />
        </TableRow>

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

        <TextView
            android:id="@+id/textView3"
            android:layout_column="1"
            android:padding="3dp"
            android:text="Save..." />

        <TextView
            android:id="@+id/textView4"
            android:layout_gravity="right"
            android:padding="3dp"
            android:text="Ctrl-S" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/textView5"
            android:layout_column="1"
            android:padding="3dp"
            android:text="Save As..." />

        <TextView
            android:id="@+id/textView6"
            android:layout_gravity="right"
            android:padding="3dp"
            android:text="Ctrl-Sift-S" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:padding="3dp"
            android:text="X" />

        <TextView
            android:padding="3dp"
            android:text="Import..." />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:padding="3dp"
            android:text="X" />
        <TextView
            android:padding="3dp"
            android:text="Export..." />
        <TextView
            android:padding="3dp"
            android:text="Ctrl-E" />
    </TableRow>
    </TableLayout>

 

stretchColumns digunakan untuk mengubah lebar default kolom diset sama dengan kolom yang paling luas.

misal:

android:stretchColumns="0" ,misal ada 3 kolom dengan warna abu,merah, dan kuning
kolom awal dimulai dari 0
Jika nilainya 0 maka kolom pertama lebarnya akan ditarik menjadi lebih luas

android:stretchColumns="1"
Jika nilainya 1 maka kolom kedua lebarnya akan ditarik menjadi lebih luas

android:stretchColumns="2"
Jika nilainya 2 maka kolom ketiga lebarnya akan ditarik menjadi lebih luas


Code:

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/simpleTableLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="2"> <!-- stretch the second column of the layout-->

    <!-- first row of the table layout-->
    <TableRow

        android:id="@+id/firstRow"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <!-- first element of the row-->
        <TextView

            android:id="@+id/t1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#b0b0b0"
            android:padding="18dip"
            android:text="Text 1"
            android:textColor="#000"
            android:textSize="12dp" />

        <TextView

            android:id="@+id/t2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#FF0000"
            android:padding="18dip"
            android:text="Text 2"
            android:textColor="#000"
            android:textSize="12dp" />

        <TextView

            android:id="@+id/t3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#FFF000"
            android:padding="18dip"
            android:text="Text 3"
            android:textColor="#000"
            android:textSize="12dp" />

    </TableRow>
</TableLayout>

Penerapan Table Layout Misalnya membuat desain untuk Login Aplikasi

full code:

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/simpleTableLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1"> <!-- stretch the second column of the layout-->

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

        <TextView
            android:id="@+id/hd"
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:layout_span="2"
            android:text="LOGIN TRPL"
            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/inptuser"
            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/simpan" android:layout_span="1" ></Button>
    </TableRow>
</TableLayout>