Android UI - Table Layout

Android UI

Table Layout

Oleh : Ahmad Hasyim BSA

Lagi belajar android UI, sekalian nulis, kali ini saya mau share soal table layout di android,
TableLayout memungkinkan layout di tampilkan secara garis dan kolom atau mirp table. (ya namanya juga table :D) keterangan ada di link resmi android

Berikut adalah contoh TableLayout dua baris dan dua kolom
Code

<?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> <TextView android:padding="3dip" android:text="Save"/> <TextView android:gravity="right" android:padding="3dip" android:text="CTRL+S "/> </TableRow> <tablerow> <TextView android:padding="3dip" android:text="Save As"/> <TextView android:gravity="right" android:padding="3dip" android:text="CTRL+Alt+S"/> </TableRow> </TableLayout> 

 

 hasil dari kode atas seperti di samping, dengan penjelasan sebagai berikut :

TableRow pertama sebagai baris pertama, dan TableRow kedua sebagi baris kedua, sedangkan isi table saya isi dengan TextView,  TextView pertama sebagai kolom pertama dan TextView kedua sebagai kolom kedua, baris pertama berada pada <TableRow> isi baris pertama  </TableRow>, Table Layout akan membuat kolom otmatis saat kita menambahkan objek, sebagai contoh di atas saya menggunakan dua TextView, jika kita tambah kan satu button maka otomatis akan langsung membuat kolom baru.

Code :

<tablerow> <TextView android:padding="3dp" android:text="Save"/> <TextView android:gravity="right" android:padding="3dp" android:text="CTRL+S "/> <Button android:text="Save" /> </TableRow> <tablerow> <TextView android:padding="3dp" android:text="Save As"/> <TextView android:gravity="right" android:padding="3dp" android:text="CTRL+Alt+S"/> <Button android:text="Save As" /> </TableRow> </TableLayout>  

akan menghasilkan tampilan dibawah ini

Tabel 3 kolom

TableLayout akan langsung otomatis memberikan kolom, untuk membantu membuat table kita juga bisa menggunakan bantuan di mode design pada android studio.

Perhatikan tanda di atas dan samping kiri tampilan android studio membantu untuk menganalisa table dari gambar saja kita sudah bisa mengartikan bahwa ada 3kolom dan 2baris.

Nah untuk finishing sekarang mari kita membuat aplikasi sederhana tentang Gradasi Warna

“Open Your Android Studio”, lets write a code.

Code : 

<?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="0"> <tablerow> <TextView android:layout_height="80dp" android:background="#3f51b5" android:text="Gradasi Warna Biru" android:textColor="#ffffff" android:textSize="35sp" /> </TableRow> <tablerow> <View android:layout_height="80px" android:background="#e8eaf6"/> <TextView android:layout_gravity="center_vertical" android:paddingLeft="4px" android:text="#e8eaf6" /> </TableRow> <tablerow> <View android:layout_height="80px" android:background="#c5cae9"/> <TextView android:layout_gravity="center_vertical" android:paddingLeft="4px" android:text="#c5cae9" /> </TableRow> <tablerow> <View android:layout_height="80px" android:background="#9fa8da"/> <TextView android:layout_gravity="center_vertical" android:paddingLeft="4px" android:text="#9fa8da" /> </TableRow> <tablerow> <View android:layout_height="80px" android:background="#7986cb"/> <TextView android:layout_gravity="center_vertical" android:paddingLeft="4px" android:text="#7986cb" /> </TableRow> <tablerow> <View android:layout_height="80px" android:background="#5c6bc0" /> <TextView android:layout_gravity="center_vertical" android:paddingLeft="4px" android:text="#5c6bc0" /> </TableRow> <tablerow> <View android:layout_height="80px" android:background="#3f51b5"/> <TextView android:layout_gravity="center_vertical" android:paddingLeft="4px" android:text="#3949ab" /> </TableRow> <tablerow> <View android:layout_height="80px" android:background="#3949ab"/> <TextView android:layout_gravity="center_vertical" android:paddingLeft="4px" android:text="#3949ab" /> </TableRow> <tablerow> <View android:layout_height="80px" android:background="#303f9f"/> <TextView android:layout_gravity="center_vertical" android:paddingLeft="4px" android:text="#303f9f" /> </TableRow> <tablerow> <View android:layout_height="80px" android:background="#283593"/> <TextView android:layout_gravity="center_vertical" android:paddingLeft="4px" android:text="#283593" /> </TableRow> <tablerow> <View android:layout_height="80px" android:background="#1a237e"/> <TextView android:layout_gravity="center_vertical" android:paddingLeft="4px" android:text="#1a237e" /> </TableRow> </TableLayout>  

Nah aplikasi nya sudah jadi

Selamat Mencoba