Android: Pengenalan Layout

Ketika membuat suatu halaman dalam aplikasi Android, diperlukan tata letak komponen yang rapi sehingga tampilan aplikasi yang dibuat terlihat cantik. Ada beberapa tata letak atau layout yang bisa digunakan di Android, yaitu Linear Layout, Relative Layout, Table Layout, dan Tab Layout. Penggunaan berbagai macam layout tersebut selain Tab Layout akan didemokan dalam satu aplikasi yang diberi nama ‘HiLayout’.

Sebagai tahap awal, buatlah project Android ‘HiLayout’. Silakan diisi dengan detail project sebagai berikut.

Project name : HiLayout
Application name : hiLayout
Package name : alh.apps
Create Activity : HiLayout
Build Target : Android 2.2
Min SDK Version : 8

Jika project sudah sukses dibuat, kita akan temukan file HiLayout.java dalam folder src/alh.apps dan file main.xml dalam folder res/layout di bagian Package Explorer. Untuk keperluan demo layout, file main.xml tidak digunakan. Sebagai gantinya, kita akan membuat file xml baru, satu file untuk satu demo layout.

Linear Layout

LinearLayout adalah layout yang menampilkan elemen-elemen view dalam arah linear, vertikal atau pun horizontal. Ini adalah layout paling sederhana di Android. Mari lihat implementasinya di Android.

Buat file xml baru dengan nama linearlayout.xml. Caranya, klik kanan di folder res/layout di project ‘HiLayout’. Pada menu pop-up yang muncul, pilih New > Android XML File. Selanjutnya, silakan isikan nama file XML dengan linerlayout.xml.

Gambar 1. Pembuatan File XML

Jika sudah diisi dan tidak ada pesan error, klik Finish. Default-nya, file linearlayout.xml yang dibuat akan berisi sebagai berikut. File xml tersebut tidak berisi elemen view apapun di dalamnya.

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>
</LinearLayout>

Nah, sekarang ubah isinya menjadi berikut ini.

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>

<TextView
android:text=”innovation for Indonesia..”
android:background=”#4c0000″
android:textSize=”10pt”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
/>
<TextView
android:text=”turn on our dreams!”
android:textSize=”13pt”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
/>
<Button
android:text=”ya!”
android:layout_marginTop=”30pt”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
/>
</LinearLayout>

Bisa kita lihat, tampilan yang dibuat akan memiliki tampilan teks (TextView) dan tombol (Button). Ukuran teks diatur melalui atribut android:textSize. Salah satu teks juga diberi warna background (latar belakang) dengan kode warna #4c0000 melalui atribut android:background.

Sekarang buka file HiLayout.java. Default-nya, isi file adalah sebagai berikut.

package alh.apps;

import android.app.Activity;
import android.os.Bundle;

public class HiLayout extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Lakukan perubahan kecil pada method onCreate() sehingga kode berubah menjadi berikut.

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.linearlayout);
}

Saat ini tampilan aplikasi sudah mengacu ke linearlayout.xml yang berada di folder res/layout. Mari lihat hasilnya melalui emulator. Kita akan dapatkan tampilan sebagai berikut.

Gambar 2. Tampilan Aplikasi dengan linearlayout.xml

Relative Layout

RelativeLayout adalah layout yang menampilkan elemen-elemen view dalam posisi relatif. Posisi dari sebuah view dapat diletakkan relatif terhadap posisi elemen view di sekitarnya atau relatif terhadap area layout utama. Sebuah desain tampilan aplikasi bisa dibuat lebih mudah dan sederhana menggunakan RelativeLayout dibandingkan dengan LinearLayout. Mari lihat implementasinya.

Buat file xml baru dengan nama relativelayout.xml. Detail pembuatannya ada di bagian awal pembahasan LinearLayout. Jika sudah, ubah isinya menjadi berikut ini. Perhatikan bedanya dengan linearlayout.xml.

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>
<TextView
android:id=”@+id/text”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:padding=”7dip”
android:text=”My Notes in the morning…”
/>
<EditText
android:id=”@+id/tf”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_marginBottom=”30dip”
android:hint=”write ur day here…”
android:layout_below=”@id/text”
/>
<Button
android:id=”@+id/share”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@id/tf”
android:layout_alignParentRight=”true”
android:width=”160dip”
android:drawableLeft=”@android:drawable/ic_input_get”
android:text=”Share”
/>
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_toLeftOf=”@id/share”
android:layout_alignBottom=”@id/share”
android:layout_alignParentLeft=”true”
android:drawableLeft=”@android:drawable/ic_input_add”
android:text=”Add”
/>
</RelativeLayout>

Tampilan yang dibuat akan memiliki tampilan teks (TextView), tombol (Button) dengan gambar, dan text field (EditText). Beberapa elemen view diberi id. Id ini akan menjadi sebuah identitas atau nama untuk suatu elemen view agar bisa diacu oleh elemen view lainnya.

Kita lihat dari xml di atas, text field dengan id tf berada di bawah teks dengan id text melalui pengaturan atribut android:layout_below. Tombol dengan id share pun berada di bawah text field tf. Atribut android:layout_marginBottom pada text field tf digunakan agar ada jarak tambahan di bawah view text field. Dalam hal ini, jaraknya adalah sebesar 30 dip. Atribut android:layout_alignParentRight pada tombol dengan id share akan memposisikan tombol tersebut rata kanan relatif terhadap parent-nya. Parent dari tombol share adalah RelativeLayout. Lalu tombol tanpa id ditempatkan di kiri tombol share melalui atribut android:layout_toLeftOf. Untuk mempercantik tampilan tombol, digunakanlah gambar yang sudah menjadi bawaan Android. Hal ini dilakukan melalui atribut android:drawableLeft. Ini artinya, gambar yang ditempatkan berada di kiri teks.

Lakukan perubahan kecil kembali pada method onCreate() di file HiLayout.java. Ubah menjadi berikut ini.

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.relativelayout);
    }

Nah, acuan tampilan aplikasi sudah diubah ke relativelayout.xml. Mari lihat hasilnya melalui emulator. Kita akan dapatkan tampilan sebagai berikut.

Gambar 3. Tampilan Aplikasi dengan relativelayout.xml

Hasil yang didapat cantik kan? Untuk mengetahui lebih dalam tentang penggunaan RelativeLayout ini, silakan utak-atik atribut elemen view dalam relativelayout.xml. Silakan gunakan dokumentasi offline untuk membantu pemahaman.

Table Layout

TableLayout adalah layout yang menampilkan elemen view dalam suatu posisi baris dan kolom dalam suatu representasi tabel. Bagi Anda yang sudah pernah mempelajari HTML, penggunaan TableLayout disini seperti penggunaan table dengan tag <table> dan <tr>. Mari lihat seperti apa bedanya.

Buatlah file tablelayout.xml di dalam folder res/layout. Setelah itu, ubah isinya menjadi sebagai berikut.

<?xml version=”1.0″ encoding=”utf-8″?>
<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>

<TextView
android:text=”Safia Bookstore”
android:textSize=”11pt”
android:background=”#70a2c1″
android:padding=”3dip”
android:layout_marginBottom=”20dip”
/>

<TableRow>
<TextView
android:layout_column=”0″
android:text=”Email”
android:padding=”3dip”
/>
<TextView
android:text=”:”
android:padding=”3dip”
/>
<EditText
android:padding=”3dip”
android:width=”240dip”
/>
</TableRow>

<TableRow>
<TextView
android:layout_column=”0″
android:text=”Password”
android:padding=”3dip”
/>
<TextView
android:text=”:”
android:padding=”3dip”
/>
<EditText
android:padding=”3dip”
android:password=”true”
android:width=”240dip”
/>
</TableRow>

<Button
android:text=”Sign In”
android:layout_marginTop=”20dip”
android:drawableRight=”@android:drawable/ic_menu_compass”
android:padding=”3dip”
/>
</TableLayout>

File tablelayout.xml akan merepresentasikan tabel dengan 4 baris. Baris pertama ada teks “Safia Bookstore”. Di baris kedua terdapat TableRow yang merepresentasikan sebuah baris dalam suatu tabel. TableRow seperti tag <tr> pada HTML. TableRow sendiri sebenarnya adalah layout untuk menyusun elemen-elemen view di dalamnya secara horizontal. Jika di dalam tag <TableRow> ada tiga buah elemen view, berarti dalam posisi baris ini terdapat tiga kolom yang terisi. Bagaimanapun, penempatan awal elemen view bisa kita atur melalui atribut android:layout_column pada view. Kita lihat dari file xml, android:layout_column=”0″ menandakan elemen view ditempatkan di kolom ke-0. Jika elemen selanjutnya tidak didefinisikan penempatan kolomnya, penempatan elemen view akan berada kolom sebelah kanannya dari view yang ada.

Jika kita bandingkan baris 1 dengan baris 2, mungkin muncul pertanyaan “kenapa baris pertama tidak menggunakan tag <TableRow>?” Baris pertama dalam xml ini langsung menggunakan elemen view, yaitu TextView. Ini berarti, satu baris hanya terdiri dari satu elemen view. Hal ini bisa dilakukan, tidak harus sebuah baris selalu direpresentasikan dengan TableRow.

Lakukan perubahan kecil kembali pada method onCreate() di file HiLayout.java. Ubah menjadi berikut ini.

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tablelayout);
    }

Mari lihat hasil tata letak elemen view dengan TableLayout. Kita akan dapatkan tampilan sebagai berikut.

Gambar 4. Tampilan Aplikasi dengan tablelayout.xml

Itulah ketiga buah layout sederhana yang bisa digunakan saat membuat aplikasi berbasis Android. Masih ada jenis layout yang lain di Android. Silakan dieksplorasi lebih lanjut. 😉

Referensi

• Burnette, Ed. 2010. Hello, Android: Intoducing Google’s Mobile Development Platform 3rd Edition. Texas, USA: The Pragmatic Bookshelf.