BAB 3 XML LAYOUT, BASIC WIDGET DAN SELECTION WIDGET

BAB 3 XML LAYOUT, BASIC WIDGET DAN SELECTION WIDGET

3.1 Tujuan Pembelajaran 1. Memahami tentang pembuatan layout dengan XML pada Android 2. Memahami tentang apa sajakah fitur dari Basic Widget dan Selection Widget 3.2 Dasar Teori Dalam pembuatan sebuah interface di Android, diperlukan beberapa elemen penting. Diantaranya terdapat sebuah elemen dasar, yaitu Layout. Layout adalah sebuah arsitektur user interface dalam Activity. Selain layout, terdapat beberapa elemen lainnya, yaitu Basic Widget dan Selection Widget. 3.2.1 XML Layout Sebagaimana namanya, layout berbasis XML merupakan sebuah spesifikasi dari hubungan antar widget yang mana container yang dimiliki dikodekan dalam format XML. Secara spesifik, Android menganggap layout berbasis XML sebagai sebuah resources (sumber daya). Dengan demikian, file-file layout disimpan di dalam direktori res atau layout di dalam project Android Anda. Setiap layout XML terdiri dari elemen-elemen tree yang menspesifikasi layout dari widget dan container yang juga menciptakan sebuah hirarki View. Atribut di dalam elemen XML adalah properties, menggambarkan bagaimana sebuah widget seharusnya terlihat atau bagaimana seharusnya container berjalan. Seperti contoh berikut, jika sebuah elemen button mempunyai nilai atribut dari android:textstyle= bold, itu berarti bahwa teks yang muncul pada button harus dalam bentuk font tebal. SDK dari Android melakukan pengiriman dengan sebuah tool (aapt) yang digunakan pada layout. Tool ini otomatis dipanggil oleh toolchain Android Anda (seperti Eclipse, dan sebagainya). Penting untuk diketahui oleh seorang developer bahwa aapt meng-generate R.java source file di dalam project Anda, yang mana 45

mengijinkan Anda untuk mengakses layout dan widget-widget di dalam layout tersebut secara langsung dari kode Java. Berikut ini beberapa layout yang dikenal dalam Android : Frame Layout Layout ini merupakan layout XML yang paling sederhana. Frame Layout menyusun child dimulai dari layar kiri atas. Hanya satu view yang ada pada layar. Linear Layout Linear Layout menambahkan masing-masing child pada sebuah garis lurus, baik itu secara vertikal, maupun horizontal. Vertikal layout mempunyai sebuah child View per baris, sedangkan horizontal layout mempunyai sebuah baris tunggal View. Layout ini mengijinkan Anda untuk melakukan spesifikasi weight dari masing-masing child View yang mengontrol ukuran relatifnya di dalam space yang tersedia. Relative Layout Dalam menggunakan relative layout, Anda dapat menentukan posisi dari masing-masing child View relatif satu sama lain dan batas-batas layar. Table Layout Tabel layout mengijinkan Anda untuk memodifikasi tata letak menggunakan grid baris dan kolom. Tabel dapat menampung banyak baris dan kolom, dan kolom dapat diatur untuk shrink or grow. Absolute Layout Pada absolute layout, masing-masing posisi child View ditunjukkan dalam koordinat absolut. Dengan menggunakan class ini, Anda dapat menjamin layout yang tepat dari komponen Anda. Dibandingkan dengan manager yang sebelumnya, mendeskripsikan sebuah layout secara absolut berarti bahwa layout yang digunakan tidak bisa secara dinamis menyesuaikan resolusi, maupun orientasi layar yang berbeda 3.2.2 Basic Widgets 46

Setiap toolkit GUI memiliki beberapa widget dasar: field, label, button, dan sebagainya. Android toolkit pun tidak berbeda, dan Basic Widget akan memberikan pengenalan yang baik untuk menjelaskan bagaimana ia bekerja di activity-activity dalam Android. Label Simple Widget antara lain adalah label, sebagaimana yang dimaksud dalam Android seperti Text View. Seperti kebanyakan GUI toolkit, label merupakan potongan teks yang tidak dapat diedit langsung oleh user. Biasanya digunakan untuk mengidentifikasi widget yang berdekatan ( seperti, Name: merupakan label dari sebuah field di mana akan diisi sebuah nama. Di Java, Anda dapat membuat sebuah label dengan membuat sebuah instace TextView. Pada umumnya, saat Anda membuat label dalam layout XML, dengan menambahkan sebuah elemen TextView pada layout, dengan sebuah properti dari android:text untuk mengatur nilai dari label tersebut. Button Android 1.6 menambahkan sebuah fitur untuk mendeklarasikan sebuah onclick listener untuk button. Sebagai tambahan, pada pendekatan klasik dari mendefinisikan sebuah object (seperti activity) yang mengimplementasikan View.OnClickListener interface, Anda dapat mengambil pendekatan sederhana berikut ini : Menentukan sebuah method pada activity Anda yang berisi button yang mengambil sebuah single View parameter, memiliki pengembalian (return) void, dan berbentuk public. Di layout XML, pada elemen button, sertakan android:onclick atribut dengan nama dari method yang didefinisikan di langkah sebelumnya. Images 47

Android memiliki dua widget yang bisa disertakan dalam activity, yaitu ImageView dan ImageButton. Seperti terlihat pada namanya, kedua widget tersebut merupakan image berbasis TextView dan Button. Setiap widget memerlukan atribut android:src (pada XML layout) untuk menspesifikasi gambar manakah yang digunakan. Biasanya, referensinnya berupa drawable resources. Anda juga dapat mengatur konten image berbasis URI dari content provider setimageuri(). 3.2.3 Selection Widget Android menawarkan sebuah framework yang fleksibel untuk menentukan pilihan-pilihan yang tersedia pada beberapa widget. Lebih spesifiknya, Android menawarkan sebuah framework dari data adapter yang menyediakan sebuah interface umum untuk daftar pemilihan, mulai dari static array, hingga database contents. Selection views merupakan widget untuk merepresentasikan daftar pilihanpilihan yang dihandle oleh sebuah adapter untuk menyuplai pilihan yang sebenarnya. RadioButton dan CheckButton merupakan widget yang cocok untuk seleksi pemilihan dari sebuah set kecil option. Saat kumpulan beberapa pilihan lebih besar ukurannya, maka widget lain yang lebih sesuai adalah listbox, combobox, dropdownlist, picture gallery, dan sebagainya. 48

Workshop 3 XML Layout dan Basic Widget A. Tujuan 1. Memahami macam-macam variasi dari XML Layout 2. Memahami penggunaan dari Basic Widget B. Tugas Pendahuluan 1. Pelajari XML Layout dan Basic Widget Android C. Percobaan a. Percobaan 1: Mengaplikasikan Layout (Relative Layout dan Frame Layout) Langkah 1: Buat project Android baru pada Eclipse Langkah 2: Ketikan kode berikut pada main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity" > <FrameLayout android:layout_height="fill_parent" android:layout_alignleft="@+id/lblcomments" android:layout_below="@+id/lblcomments" android:layout_centerhorizontal="true" > <ImageView 49

android:layout_height="444dp" android:src="@drawable/andro" /> </FrameLayout> <TextView android:id="@+id/lblcomments" android:layout_width="wrap_content" android:layout_alignparentleft="true" android:layout_alignparenttop="true" android:text="hello Android" /> </RelativeLayout> Langkah 3: Tambahkan statement huruf tebal pada MainActivity.java Langkah 4: Tekan F11 untuk mendebug aplikasi pada emulator Android Langkah 5: Kemudian, akan muncul output sebagai berikut : Gambar 18 Contoh Tmapilan Relative Layout b. Percobaan 2: Mengaplikasikan Layout (Linear Layout) Langkah 1: Buat project Android baru pada Eclipse 50

Langkah 2: Ketikan kode berikut pada main.xml <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_height="fill_parent" tools:context=".mainactivity" > <TableRow> <TextView android:layout_width="120px" android:text="user Name" /> <EditText android:id="@+id/txtusr" android:width="200px" /> </TableRow> <TableRow> <TextView android:text="password" /> <EditText android:id="@+id/txtpass" android:password="true"/> </TableRow> <TableRow> <Button android:padding="20px" android:id="@+id/btnsign" android:text="sign In" /> </TableRow> </TableLayout> Langkah 4: Tekan F11 untuk mendebug aplikasi pada emulator Android Langkah 5: Kemudian, akan muncul output sebagai berikut : 51

Gambar 19 Contoh Tampilan Linear Layout Langkah 6 : Isikan edit text yang tersedia, maka akan muncul virtual keyboard seperti pada gambar di bawah ini : 52

Gambar 20 Contoh Tampilan Linear Layout c. Percobaan 3 : Mengenal Basic Widget Langkah 1: Buat project Android baru pada Eclipse Langkah 2: Ketikan kode berikut pada main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:orientation="vertical" > <Button android:id="@+id/btnsave" android:text="save" /> <Button android:id="@+id/btnopen" android:layout_width="wrap_content" android:text="open" /> <ImageButton android:id="@+id/img1" 53

android:src="@drawable/emo_im_happy"/> <EditText android:id="@+id/txtname" /> <CheckBox android:id="@+id/chkautosave" android:text="autosave" /> <CheckBox android:id="@+id/star" style="?android:attr/starstyle" android:layout_width="wrap_content" /> <RadioGroup android:id="@+id/rdgp1" android:orientation="vertical" > <RadioButton android:id="@+id/rdb1" android:text="option1"/> <RadioButton android:id="@+id/rdb2" android:text="option2" /> </RadioGroup> <ToggleButton android:id="@+id/toggle1" android:layout_width="wrap_content" /> </LinearLayout> Langkah 3: Buatlah Class MainActivity.java sebagai berikut : package com.ai.widget; import android.app.activity; import android.os.bundle; import android.view.view; import android.widget.button; import android.widget.checkbox; import android.widget.radiobutton; import android.widget.radiogroup; import android.widget.radiogroup.oncheckedchangelistener; 54

import android.widget.toast; import android.widget.togglebutton; public class BasicWidgetActivity extends Activity { @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); //---Button view--- Button btnopen = (Button) findviewbyid(r.id.btnopen); btnopen.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { DisplayToast("You have click the Open button"); ); //---Button view--- Button btnsave = (Button) findviewbyid(r.id.btnsave); btnsave.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { DisplayToast("You have click the Save Button"); ); //---CheckBox--- CheckBox checkbox = (CheckBox)findViewById(R.id.chkAutoSave); checkbox.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { if (((CheckBox)v).isChecked()) DisplayToast("Chekbox is checked"); else DisplayToast("Checkbox is unchecked"); ); //---RadioButton--- RadioGroup radiogroup = (RadioGroup)findViewById(R.id.rdGp1); radiogroup.setoncheckedchangelistener(new OnCheckedChangeListener() { @Override public void oncheckedchanged(radiogroup group, int checkedid) { // TODO Auto-generated method stub RadioButton rb1 = (RadioButton)findViewById(R.id.rdb1); if (rb1.ischecked()) { DisplayToast("Option 1 is checked"); else{ DisplayToast("Option 2 is checked"); 55

); //---ToggleButton--- ToggleButton togglebutton = (ToggleButton) findviewbyid(r.id.toggle1); togglebutton.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { if (((ToggleButton)v).isChecked()) DisplayToast("Toggle button is On"); else DisplayToast("Toggle button is Off"); ); private void DisplayToast(String msg) { Toast.makeText(getBaseContext(), msg, Toast.LENGTH_SHORT).show(); Langkah 4 :Tekan F11 untuk mendebug aplikasi pada emulator Android Langkah 5: Kemudian, akan muncul output sebagai berikut : Langkah 6 : Lakukan action pada masing-masing widget, maka akan muncul toast message : 56

57

58