BAB 3
XML LAYOUT, BASIC WIDGET DAN
45
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
46 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
47 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
“on-click” 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.
48 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
pilihan-pilihan yang dihandle oleh sebuah adapter untuk menyuplai pilihan-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,
49
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_width="fill_parent" android:layout_height="fill_parent"
android:layout_alignLeft="@+id/lblComments" android:layout_below="@+id/lblComments" android:layout_centerHorizontal="true" >
50
android:layout_width="fill_parent" android:layout_height="444dp" android:src="@drawable/andro" />
</FrameLayout>
<TextView
android:id="@+id/lblComments" android:layout_width="wrap_content" android:layout_height="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)
51 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_width="fill_parent" android:layout_height="fill_parent" tools:context=".MainActivity" >
<TableRow>
Langkah 4: Tekan F11 untuk mendebug aplikasi pada emulator Android
52
Gambar 19 Contoh Tampilan Linear Layout
Langkah 6 : Isikan edit text yang tersedia, maka akan muncul virtual keyboard
53
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_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical" >
<Button
android:id="@+id/btnSave"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Save" /> <Button
android:id="@+id/btnOpen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Open" /> <ImageButton
android:id="@+id/img1"
54
android:id="@+id/chkAutoSave"
android:layout_width="fill_parent"
Langkah 3: Buatlah Class MainActivity.java sebagai berikut :
55
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
Button btnOpen = (Button) findViewById(R.id.btnOpen); btnOpen.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) { btnSave.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
DisplayToast("You have click the Save Button"); }
});
CheckBox checkBox = (CheckBox)findViewById(R.id.chkAutoSave); checkBox.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
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");
56
});
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
