Mendesain Dengan Deklarasi android

Secara umum, pembuatan tampilan GUI menggunakan satu dari dua metode yaitu prosedural dan deklaratif. Konsep desain dengan prosedural adalah "Apa yang harus dilakukan pada objek", sedangkan konsep desain dengan deklarasi adalah "Apa yang ingin dilihat pada layar".

Desain dengan prosedural artinya pembuatan desain dilakukan di dalam kode program. Jika Anda membuat program dengan Swing di Java, maka Anda akan membuat dan memanipulasi objek tampilan seperti misalnya JFrame, JButton, dan lain-lain langsung dalam kode Java, dan kita menentukan apa yang harus dilakukan oleh setiap objek tersebut.

Di lain sisi yaitu desain deklaratif, tidak melibatkan kode program sama sekali. Sesuai namanya, hanya mendeklarasikan tampilan itu sendiri. Contoh yang umum adalah HTML. HTML adalah bahasa markup sama seperti XML, bahasa markup bukanlah bahasa pemrograman tetapi bahasa deklaratif. Bahasa deklaratif menjelaskan apa yang harus dilihat pada layar.

Android memberikan kebebasan kepada kita untuk membuat desain dengan prosedural atau deklaratif. Kita bisa membuat tampilan langsung dalam kode Java atau menggunakan XML jika ingin menggunakan metoda deklaratif.

Mana yang harus dipergunakan? Kita bisa menggunakan keduanya tentunya, namun Google memberikan saran agar kita menggunakan metoda deklaratif XML sebanyak mungkin. Umumnya kode XML lebih pendek dan lebih mudah dipahami dibanding kode yang sama dengan Java. Selain dari itu, perubahakan konsep deklarasi dengan XML di versi Android selanjutnya jauh lebih kecil dibanding dengan kode Java-nya.

Objek pertama yang harus dipahami dalam desain tampilan Android adalah "Layout" karena layout akan menentukan peletakan objek-objek tampilan Android. Oleh karena itu artikel ini membahas layout secara deklaratif menggunakan XML.

AbsoluteLayout

Sesuai namanya, AbsoluteLayout menempatkan setiap objek anak pada posisi berdasarkan koordinat X dan Y. Layout ini sangat tidak disarankan untuk dipergunakan karena tidak fleksibel. Tim pengembang Android sudah memasukkan layout ini ke dalam layout yang deprecated.

Berikut adalah contoh kode XML untuk AbsoluteLayout.

xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"> 
    <TextView
        android:layout_x="10px"
        android:layout_y="60px"
        android:text="Nama"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/nama"
        android:layout_x="120px"
        android:layout_y="50px"
        android:width="100px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:layout_x="10px"
        android:layout_y="120px"
        android:text="No. Telepon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/telepon"
        android:layout_x="120px"
        android:layout_y="110px"
        android:width="100px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />    
     <Button 
        android:id="@+id/okbutton"
        android:text=" OK "
        android:layout_x="10px"
        android:layout_y="160px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
AbsoluteLayout>

Dalam mendeklarasikan layout, terdapat beberapa parameter elemen yang umum yaitu:

• xmlns:android="http://schemas.android.com/apk/res/android"
  Parameter di atas mendefinisikan Namespace. Kita harus mendefinisikan ini hanya sekali yaitu pada tag pertama saja dalam sebuah file XML.
• android:layout_width dan android:layout_height
  Menentukan lebar dan tinggi layout. Ada dua kemungkinan isi, yang pertama adalah fill_parent yaitu lebar atau tinggi akan sama dengan elemen induk -- dalam contoh di atas berarti elemen layout akan sama lebar atau tinggi dengan lebar layar perangkat Android. Kemungkinan kedua adalah wrap_content yaitu lebar atau tinggi layout akan disesuaikan dengan ukuran lebar elemen itu sendiri sesuai dengan isinya.

Perhatikan penggunakan atribut android:layout_x dan android:layout_y untuk menentukan koordinat X dan Y. Android menentapkan bahwa koordinat 0,0 berada pada posisi paling atas kiri. Gambar 1 menunjukkan bentuk tampilan kode XML di atas.

Gambar 1

FrameLayout

FrameLayout dirancang untuk menampilkan sebuah objek dalam satu saat. Kita dapat memiliki banyak elemen dalam sebuah FrameLayout, dan semua elemen tersebut disimpan dalam stack. Setiap elemen baru yang ditambahkan akan disimpan pada posisi stack paling atas. Jika tidak ditentukan, posisi elemen akan menempati posisi kiri atas. Posisi elemen bisa diatur menggunakan gravity. Berikut adalah contoh FrameLayout.

xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffffff">      
    <ImageView 
        android:src="@drawable/breakdancing"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"/>
    <TextView
        android:text="AndroidKnowledge.com"
        android:textSize="24sp"
        android:textColor="#000000"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:gravity="center"/>
FrameLayout>

Gambar 2 menunjukkan tampilan dari FrameLayout di atas.

Gambar 2

Kode berikut sama seperti sebelumnya, bedanya adalah elemen  dan  bertukar posisi.

xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffffff">      
    <TextView
        android:text="AndroidKnowledge.com"
        android:textSize="24sp"
        android:textColor="#000000"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:gravity="center"/>
    <ImageView 
        android:src="@drawable/breakdancing"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"/>
FrameLayout>

Gambar 3 menunjukkan hasil dari kode XML di atas.

Gambar 3

Tulisan AndroidKnowledge.com tidak tampak lagi, ini karena elemen berada pada posisi teratas dalam stack dan menutupi elemen .

Jika kita tambahkan parameter android:visibility="false" pada elemen seperti berikut maka gambar breakdancing akan hilang dari pandangan seperti ditampilkan oleh Gambar 4.

<ImageView 
    android:src="@drawable/breakdancing"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:visibility="false"/>

Gambar 4

FrameLayout akan lebih berguna jika elemen dapat ditampilkan dan disembunyikan -- mengubah nilai android:visibility-- 
secara terprogram.

LinearLayout

LinearLayout mengatur elemen anak ke dalam sebuah kolom atau baris -- ditentukan dengan parameter android:orientation yang dapat diisi dengan "vertical" atau "horizontal".

Berikut adalah contoh LinearLayout dengan orientasi "horizontal".

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"> 
    <TextView
        android:text="Nama"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/nama"
        android:width="75px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="No. Telepon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/telepon"
        android:width="75px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />    
    <Button 
        android:id="@+id/okbutton"
        android:text=" OK "
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
LinearLayout>

Gambar 5 mengilustrasikan hasil kode di atas.

Gambar 5

Jika orientasi diubah menjadi "vertical", maka hasilnya akan seperti Gambr 6.

Gambar 6

Semua layout bisa dibuat nested, dan berikut adalah contoh LinearLayout yang di-nested.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:text="Nama"
            android:layout_width="80px"
            android:layout_height="wrap_content" />
        <EditText
            android:id="@+id/nama"
            android:width="100px"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:text="No. Telepon"
            android:layout_width="80px"
            android:layout_height="wrap_content" />
        <EditText
            android:id="@+id/telepon"
            android:width="100px"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" /> 
    LinearLayout>         
    <Button 
        android:id="@+id/okbutton"
        android:text=" OK "
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
LinearLayout>

Gambar 7

RelativeLayout

Dalam RelativeLayout, posisi elemen anak ditentukan berdasarkan relasi antar elemen atau dengan elemen induk. Berikut adalah contoh RelativeLayout.

xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:id="@+id/label_nama"
        android:text="Nama"        
        android:layout_width="80px"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/nama"
        android:width="100px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/label_nama" />
    <TextView
        android:id="@+id/label_telepon"
        android:text="No. Telepon"
        android:layout_width="80px"
        android:layout_height="wrap_content"
        android:layout_below="@id/nama" />
    <EditText
        android:id="@+id/telepon"
        android:width="100px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/label_telepon"
        android:layout_below="@id/nama"  />
    <Button 
        android:id="@+id/okbutton"
        android:text=" OK "
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/telepon" />
    <ImageView 
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />    
RelativeLayout>


Gambar 8 mengilustrasikan hasil kode di atas.

Gambar 8

Pada umumnya, setiap elemen dalam RelativeLayout disarankan diberi id dengan menggunakan parameter android:id="@+id/nama_id"
karena untuk menentukan posisi sebuah elemen agar memiliki posisi yang relatif terhadap elemen lain adalah dengan menggunakan id. Sebagai
contoh perhatikan cuplikan kode XML dari kode di atas berikut.

<EditText
    android:id="@+id/telepon"
    android:width="100px"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/label_telepon"
    android:layout_below="@id/nama" />

Kode XML di atas menentukan bahwa elemen diposisikan relatif terhadap dua eleman lainnya yaitu berada pada sisi kiri

<ImageView 
    android:id="@+id/logo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/icon"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true" />

Elemen  diposisikan relatif bukan terhadap elemen lain melainkan terhadap induknya yaitu RelativeLayout.
Elemen ini akan berada di tengah layar karena baik vertikal maupun horizonal diposisiskan berada di tengah-tengah elemen induknya.

TableLayout

TableLayout mengatur elemen anak ke dalam baris dan kolom. Baris ditentukan dalam kode XML menggunakan element sedangkan kolom akan ditentukan otomatis oleh Android. Berikut adalah contoh TableLayout.

xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TableRow>
        <TextView
            android:text="Nama"        
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <EditText
            android:id="@+id/nama"
            android:width="100px"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />        
    TableRow>
    <TableRow>
        <TextView
            android:text="No. Telepon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <EditText
            android:id="@+id/telepon"
            android:width="100px"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />        
    TableRow>
    <TableRow>
        <Button 
            android:id="@+id/okbutton"
            android:text=" OK "
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/telepon" />        
    TableRow>
TableLayout>

Gambar 9 mengilustrasikan hasil kode di atas.

Gambar 9