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.Read More »

Advertisements