Workshop 3 XML dan Widget

BAB 3

XML LAYOUT, BASIC WIDGET DAN

SELECTION WIDGET

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 bahwa aapt meng-generate R.java source file di dalam project Anda, yang mana

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, dropdownlist, picture gallery, dan sebagainya.

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>

<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 :

52

Gambar 19 Contoh Tampilan Linear Layout

Langkah 6 : Isikan edit text yang tersedia, maka akan muncul virtual keyboard seperti pada gambar di bawah ini :

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:layout_height="wrap_content"

android:src="@drawable/emo_im_happy"/> <EditText

android:id="@+id/txtName"

android:layout_width="fill_parent"

android:layout_height="wrap_content" /> <CheckBox

android:id="@+id/chkAutoSave"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="AutoSave" /> <CheckBox

android:id="@+id/star"

style="?android:attr/starStyle"

android:layout_width="wrap_content"

android:layout_height="wrap_content" /> <RadioGroup

android:id="@+id/rdGp1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical" > <RadioButton

android:id="@+id/rdb1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Option1"/> <RadioButton

android:id="@+id/rdb2"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Option2" /> </RadioGroup>

<ToggleButton

android:id="@+id/toggle1"

android:layout_width="wrap_content"

android:layout_height="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;

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) {

DisplayToast("You have click the Open button"); }

}); //---Button

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)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"); }

});

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 toast message :

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:layout_height="wrap_content"

android:src="@drawable/emo_im_happy"/> <EditText

android:id="@+id/txtName"

android:layout_width="fill_parent"

android:layout_height="wrap_content" /> <CheckBox

android:id="@+id/chkAutoSave"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="AutoSave" /> <CheckBox

android:id="@+id/star"

style="?android:attr/starStyle"

android:layout_width="wrap_content"

android:layout_height="wrap_content" /> <RadioGroup

android:id="@+id/rdGp1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical" > <RadioButton

android:id="@+id/rdb1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Option1"/> <RadioButton

android:id="@+id/rdb2"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Option2" /> </RadioGroup>

<ToggleButton

android:id="@+id/toggle1"

android:layout_width="wrap_content"

android:layout_height="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;

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) {

DisplayToast("You have click the Open button"); }

}); //---Button

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)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"); }

});

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

toast message :