Pada tutorial kali ini kita akan mempelajari bagaimana membuat tampilan untuk aplikasi Android kita. Untuk membuat tampilan kita bisa membuatnya dengan menggunakan kode di file Java yang kita buat, atau menggunakan file XML layout. Sangat disarankan untuk menggunakan metode file XML layout agar kode Java kita lebih bersih dan rapi, serta kita memisahkan antara bagian tampilan dengan bagian pemrosesan dari aplikasi. File XML layout ini disimpan di folder res/layout/ pada project Android kita. Untuk membuat dan memodifikasi resource XML layout, pada ADT terdapat tool bernama Visual Layout Editor yang memudahkan kita melihat dan membuat tampilan secara WYSIWYG (What You See Is What You Get) tanpa secara manual mengetikkan dokumen XML. Gambar di bawah ini adalah tampilan Visual Layout Editor di Eclipse yang akan muncul saat kita membuka file XML layout.
Dengan menggunakan tools ini kita bisa menggunakan mekanisme Drag-and-Drop untuk menambahkan
komponen tampilan yang kita butuhkan. Kita akan mempelajari penggunaan berbagai macam komponen tampilan dan layout dengan membuat sebuah project aplikasi Android. Langkah-langkahnya adalah sebagai berikut :1. Buat sebuah project Android di Eclipse bernama Training, silakan pilih versi Build Target sesuai dengan
platform Android yang tersedia di komputer Anda. Isikan form New Android Project seperti gambar dibawah ini, lalu klik Finish.
Cara menambahkannya Anda dapat mengetikkannya secara manual dengan mengaktifkan tab strings.xml yang ada di bawah jendela editor Eclipse, atau pada mode tab Resource di bawah jendela editor Eclipse kita tekan tombol Add kemudian kita pilih String dari jendela daftar tipe resource yang muncul, baru kita isikan nama resource dan nilainya seperti pada gambar di bawah ini.
5. Buat file res/values/arrays.xml seperti pembuatan file colors.xml di atas, kemudian tambahkan item bertipe String Array bernama education_options, kemudian tekan lagi tombol Add saat item education_options tersorot. Tambahkan beberapa Item Elementary School, High School, Bachelor,Master, dan Doctor sebagai sub-item dari education_options sehingga tampilan editor seperti gambar di bawah ini.
6. Buka file res/layout/main.xml yang dibuat oleh Eclipse dari proses pembuatan project aplikasi Android.
Sekarang kita akan membuat tampilan aplikasi kita. Adapun hasil akhir dari tampilan aplikasi yang akan kita buat adalah seperti gambar berikut.
Sekarang kita akan membuat tampilan aplikasi kita. Adapun hasil akhir dari tampilan aplikasi yang akan kita buat adalah seperti gambar berikut.
Untuk membuat tampilan tersebut akan digunakan komponen TextView, EditText, RadioGroup,RadioButton, Spinner, CheckBox, dan ImageView. Di situ juga akan ditunjukkan penggunaan LinearLayout dan FrameLayout untuk mengatur posisi komponen.
Atau jika kita lihat di jendela Outline di sebelah kanan jendela Visual Layout Editor kita akan melihat struktur tree seperti gambar di bawah ini
Adapun penjelasan dari masing-masing komponen di atas adalah sebagai berikut :
1. Pada elemen paling atas terdapat sebuah LinearLayout yang kita set orientasinya adalah vertical, artinya elemen anak ke-n+1 akan berada di bawah elemen ke-n.
2. Elemen anak pertama dari LinearLayout itu adalah sebuah TextView, dengan label kita mengacu resource string bernama hello. Untuk styling teksnya, digunakan style bold, dengan ukuran font 18dp (density-independent pixel), dan latar belakang TextView tersebut diberi warna biru dengan mengakses nilai resource color bernama blue.
3. Elemen selanjutnya adalah sebuah EditText yang kita beri nama editName, dan kita gunakan atribut Hint untuk memberikan penjelasan kepada pengguna mengenai apa yang harus dimasukkan untuk isian ini. Hint ini akan tampil apabila isian EditText ini masih kosong. Apabila kita ingin memberikan nilai awal untuk isian EditText, maka kita isikan nilai teks awal tersebut di atribut Text dari EditText.
4. Selanjutnya ada elemen RadioGroup dan RadioButton, kedua elemen ini saling berkaitan di mana sebuah RadioGroup itu akan memiliki satu atau lebih RadioButton yang hanya ada satu elemen RadioButton tersebut yang nilai Checked nya adalah true dalam suatu waktu.
5. Elemen Spinner biasa juga dikenal sebagai komponen Combo Box pada platform lain. Untuk data pilihan yang bisa dipilih oleh pengguna, kita gunakan resource array bernama education_options yang sudah kita buat pada langkah ke-5 di atas. Kita supply ID array tersebut pada nilai atribut Entries dari elemen ini.
6. Elemen CheckBox, ada dua atribut yang perlu diketahui, yaitu Text untuk mengatur teks di sebelah tanda centang dan Checked untuk mengatur nilai checkbox apakah tercentang atau tidak.
7. LinearLayout dengan orientasi horizontal, yang artinya elemen anak ke-n+1 akan berada di kanan elemen ke-n. Agar posisi elemen anaknya terletak di tengah kita set atribut Gravity bernilai center_horizontal dan Layout width bernilai fill_parent atau match_parent.
8.Sebagai anak dari LinearLayout dengan orientasi horizontal di atas kita tambahkan dua buah Button. Untuk mengatur label dari Button ini kita set nilai atribut Text. Di sini ditunjukkan pula alternatif nilai Layout width selain wrap_content, fill_parent, atau match_parent yaitu menggunakan nilai ukuran yang fix.
9.Layout terakhir yang digunakan adalah FrameLayout. Untuk FrameLayout, pengaturan posisi komponennya dikendalikan oleh masing-masing komponen anaknya, yaitu dengan mengatur nilai atribut Layout gravity. Di situ kita bisa lihat ada tiga komponen yang menjadi anak dari FrameLayout yang berupa komponen ImageView, yang kita set nilai Layout gravity nya bernilai left, center, dan bottom|right.
7. Silakan coba jalankan aplikasi yang kita buat di atas di emulator. Hasilnya akan seperti gambar di bawah
ini.
0 comments:
Post a Comment