User Interface Android Dengan XML

Contoh "Hello, World" yang telah selesai kita buat disebut layout UI (User Interface) yang "programmatic". Artinya, kita membuat dan menyusun UI aplikasi langsung dari sourcecode. Jika anda sering melakukan pemrograman UI, mungkin anda sangat menyadari bahwa programmatic tersebut sangat rapuh. Sedikit perubahan pada layout dapat mengakibatkan masalah besar pada sourcecode. Dan dengan metode ini kita membuat kita mudah lupa untuk menghubungkan tampilan bersama dengan tepat, dan bisa mengakibatkan code error dan menghabiskan waktu untuk mencari kesalahan.

karena itulah, android menyediakan alternatif model pembuatan UI, yaitu dengan file layout berbasis XML. Cara termudah untuk menjelaskan metode ini adalah dengan memberikan contoh, berikut adalah contoh file layout XML yang memberikan hasil sama dengan metode programatic sebelumnya:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/textview"
   android:layout_width="fill_parent"
   android:layput_height="fill_parent"
   android:text="@string/hello" />

Struktur umum dari sebuah file layout Android sangat sederhana. Dimana terdiri dari elemen XML disusun mirip hierarki pohon, dan setiap node adalah nama dari class View (dalam contoh ini hanyalah menggunakan satu elemen View). Kita bisa menggunakan apa saja nama class yang menjadikan View sebagai elemen pada layout XML, termasuk class-class tampilan yang kita atur sendiri dalam kode. Dengan metode ini, kita bisa membuat layout UI dengan cepat, karena menggunakan struktur dan sintaks yang lebih sedehana daripada layout dengan metode programmatic. Model ini terinspirasi dari pengembangan web, dimana kita bisa memisahkan pengaturan tampilan (UI) dari logika aplikasi yang digunakan untuk mengisi, mengolah dan menampilkan data.
Pada contoh XML di atas, hanya terdapat satu elemen tampilan (view), yaitu TextView. Elemen tersebut memiliki lima atribut, berikut adalah penjelasannya:

Attribute	Keterangan
xmlns:android	Ini adalah menunjukan cakupan deklarasi XML yang menyatakan bahwa tool Android yang akan kita buat merujuk pada atribut umum yang didefinisikan dalam cakupan Android. Tag paling luar dari setiap file layout android marus memiliki atribut ini.
android:id	Atribut ini memberikan sebuah identifier unik kepada elemen TextView. Kita bisa menggunakan ID yang telah diberikan untuk merujuk tampilan ini dari sourcecode atau dari deklarasi pada file XML lain.
android:layout_width	Atribut ini mendefinisikan dan mengatur seberapa besar lebar layar yang akan dipakai untuk tampilan ini. Dalam kasus ini, tampilan yang ada hanya satu, jadi kita akan memakai seluruh lebar layar, karena inilah arti dari value "fill_parent."
android:height	Atribut ini memiliki arti sama dengan atribut android:layout_width hanya saja atribut ini mengatur tinggi layar yang digunakan
android:text	Atribut ini mengatur text yang akan ditampilkan oleh elemen TextView. Dalam contoh ini, kita tidak menggunakan string langsung di sourcecode, namun menggunakan sebuah sumber daya string yang disimpan di tempat lain. String hello yang kita gunakan, kita definisikan di file xml res/values/strings.xml Cara ini adalah cara yang direkomendasikan untuk memasukan string ke dalam apliaksi kita, karena dengan cara ini kita akan lebih mudah bila ingin menterjemahkan aplikasi kita ke bahasa lain, tanpa harus mengutak-atik file sourcecode layout.

layout XMl yang kita buat ini berada di direktori /res/layout/ dalam projek kita. Kata "res" merupakan singkatan dari "resources" yang artinya sumber daya. Dalam direktori ini berisi semua aset bukan kode yang dibutuhkan aplikasi. Sebagai tambahan selain file layout, resource juga berisi aset lain, misalnya gambar, suara, dan string yang sesuai dengan bahasa masing-masing.

Plugin dari Eclipse secara otomatis membuat satu buah file layout yang diberi nama: main.xml. Dalam aplikasi "Hello World" yang baru saja kita selesaikan, file tersebut diabaikan karena kita membuat layout dengan metode programmatic. Namun selanjutnya, kita sebaiknya mengatur layout dengan menggunakan file xml daripada sourcecode. Berikut in adalah instruksi agar aplikasi kita menggunakan layout XML.

1. Pada Package Explorer Eclipse, buka folder /res/layout dan buka main.xml. Untuk melihat versi courcode, klik tab main.xml di bagian bawah. Ganti isi yang ada di dalamnya menjadi kode berikut;

   <xml version="1.0" encoding="utf-8"?>
   <TextView xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/textview"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:text="@string/hello" />

   Kemudian simpan filenya.
2. Di dalam folder res/values/ buka file strings.xml. Di file inilah kita seharusnya menyimpan semua text string default untuk UI aplikasi kita. Jika kita menggunakan Eclipse, kemudian ADT akan membuat du buah string secara otomatis, yaitu hello dan app_name. Ubahlah hello menjadi sesuatu yang lain, misalnya "Hello, Android! Text ini adalah sebuah sumber daya string!" Secara keseluruhan, isi file akan menjadi:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
        <string name="hello">hello, Android! Text ini adalah sebuah sumber daya string!"<string>
        <string name="app_name">Hello, Android</string>
   </resources>

3. Sekarang buka dan modifikasi class HelloAndroid dan gunakan layout dari XML. Edit isinya menjadi seperti berikut ini:

   package com.example.helloandroid;
   
   import android.app.Activity;
   import android.os.Bundle;
   
   public class HelloAndroid extends Activity {
       /** Called when the activity is first created. */
       @Override
       public void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.main);
       }
   }

   Ketika kita mengedit file, ketikan dengan tangan untuk mencoba fitur code-completion, yaitu melengkapi secara otomatis. Ketika kita mengetik "R.layout.main" plugin akan memberikan beberapa saran. Fitur ini akan banyak membantu kita nantinya.
   
   Daripada memberikan setContentView(), sebuah obyek, kita memberikannya sebuah rujukan ke sumber daya (resource) layout. Resource tersebut diindetifikasikan sebagai R.layout.main, yang mana merujuk kepada sebuah obyek yang sudah dikompilasi dari layout yang didefinisikan di /res/layout/main.xml. Plugin Eclipse secara otomatis membuat rujukan ini untuk kita di dalam class R.java. Jika kita tidak menggunakan Eclipse, class R.java akan dibuatkan untuk kita ketika menjalankan Ant untuk membuat aplikasi.

Sekarang jalankan lagi aplikasi kita dengan cara klik icon panah hijau untuk menajalankannya, atau klik Run > Run History > Android Activity. Selain perubahan pada string Textview, aplikasi tetap sama. Maksud dari tulisan ini adalah untuk menunjukan bahwa dua pendekatan layout akan memberikan hasil yang identik.

Tweet