Mobile Programming (ANDROID)

BAB 5
Event Handling Komponen User Interface

Mengenal Event Handling

Event Handling adalah suatu metode untuk menangani sebuah aksi yang diberikan pengguna kepada
suatu komponen User Interface. Event adalah suatu aksi yang dipicu oleh pengguna pada suatu komponen
user interface, misalnya tombol ditekan, gambar disentuh, checkbox di ganti, dan lain-lain. Dengan
memberikan event handling kepada komponen-komponen UI maka komponen tersebut menjadi berfungsi
atau dapat menampilkan aksi.
Contoh :
Dibawah ini adalah contoh tampilan login pada aplikasi SKYPE. Ketika user ingin melakukan login maka
button Sign In tersebut diklik, barulah user terbut bisa melakukan login, yang dimaksud Event Handling
disini adalah pemberian metode ketika button Sign In tersebut di klik oleh user.

Button Sign In tersebut tidak akan

berfunsi ketika di klik, apabila tidak
diberi Event Handling pada button tsb.

Pemberian Event Handling pada button

Sign In di tulis menggunakan bahasa
JAVA.

Danandjaya Saputra (http://profile.danzbot.com) Page 1

 Mobile Programming (ANDROID)

Macam-macam Event Handling

EVENT HANDLING KETERANGAN
OnClickListener() Digunakan pada saat pengguna mengklik pada komponen seperti
Button, textView, ImageView, dll.
OnLongClickListener() Digunakan pada saat pengguna mengklik dengan durasi yang cukup
lama pada komponen seperti Button, textView, ImageView, dll.
OnTouchListener() Digunakan pada saat pengguna menyentuh komponen seperti Button,
textView, ImageView, dll.
OnItemSelectedListener() Digunakan pada saat pengguna memilih opsi/item komponen seperti
Spinner(combobox), RadioButton, CheckBox, dll.
OnFocusChangeListener() Digunakan pada saat pengguna memilih opsi/item komponen seperti
Spinner(combobox), RadioButton, CheckBox, dll.

Danandjaya Saputra (http://profile.danzbot.com) Page 2

 Mobile Programming (ANDROID)

Praktikum 1 (Event Handling OnClickListener)

Contoh Studi Kasus : Aplikasi Menghitung Berat Badan Ideal
Dalam praktikum ini anda akan menggunakan 3 komponen UI yaitu TextView, EditText dan Button,
Kemudian pada komponen Button Hitung diberikan event handling OnClickListener(), kemudian aksi pada
event handling pada button Hitung tersebut akan menampilkan hasil perhitungan berat badan ideal.
Rumus perhitungan berat badan ideal pada program dibawah ini menggunakan acuan rumus :
Berat Badan Ideal = (Tinggi Badan - 100)- ( 10% (tinggi badan -100))

Danandjaya Saputra (http://profile.danzbot.com) Page 3

 Mobile Programming (ANDROID)

1. Buat project baru dengan mengikuti tabel dibawah ini (cara membuat project lihat di materi BAB 3) !
Application Name Aplikasi Berat Badan
Project Name AplikasiBeratBadan
Package Name com.example.aplikasiberatbadan
Minimum Required SDK API 9: Android 2.3
Target SDK API 19: Android 4.4
Compile With API 19: Android 4.4
Theme Holo Light with Dark Action Bar
2. Atur nama activity dan layout
Activity Name MainActivity
Layout Name activity_main

3. Pada package explorer, buka file activity_main.xml.

4. Ubah kode activity_main.xml, seperti dibawah ini

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="wrap_content"
5. android:orientation="vertical">
6. <TextView
7. android:id="@+id/TextView1"
8. android:layout_width="match_parent"
9. android:layout_height="wrap_content"
10. android:text="MASUKAN TINGGI BADAN ANDA (CM):"
11. android:textSize="18dp" />
12. <EditText
13. android:id="@+id/txtTinggiBadan"
14. android:layout_width="match_parent"
15. android:layout_height="wrap_content"
Danandjaya Saputra (http://profile.danzbot.com) Page 4
 Mobile Programming (ANDROID)

16. android:inputType="numberDecimal"
17. android:textSize="18dp" />
18. <Button
19. android:id="@+id/btnHitung"
20. android:layout_width="wrap_content"
21. android:layout_height="wrap_content"
22. android:text="Hitung" />
23. </LinearLayout>

5. Selanjutnya pada package explorer, buka file activity_main.java.

6. Ubah kode activity_main.java, lengkapi seperti dibawah ini

1. package com.example.aplikasiberatbadan;
2.
3. import android.os.Bundle;
4. import android.app.Activity;
5. import android.view.Menu;
6. import android.view.View;
7. import android.widget.Button;
8. import android.widget.EditText;
9. import android.widget.Toast;
10.
11. public class MainActivity extends Activity {
12. EditText txtTinggiBadan;
13. Button btnHitung;
14. @Override
15. protected void onCreate(Bundle savedInstanceState) {
16. super.onCreate(savedInstanceState);
17. setContentView(R.layout.activity_main);
18.
19. txtTinggiBadan = (EditText) findViewById(R.id.txtTinggiBadan);
20. btnHitung = (Button) findViewById(R.id.btnHitung);
21.
22. btnHitung.setOnClickListener(new View.OnClickListener() {
23. @Override
24. public void onClick(View v) {
25. try{
26. double tinggi_badan =

Danandjaya Saputra (http://profile.danzbot.com) Page 5

 Mobile Programming (ANDROID)

Double.parseDouble(txtTinggiBadan.getText().toString());
27. double hitung_bb = (tinggi_badan - 100) - ( 0.1 * (tinggi_badan -
100));
28. Toast.makeText(MainActivity.this, "Berat ideal anda " +
String.valueOf(hitung_bb) + " KG", Toast.LENGTH_LONG).show();
29. }catch(RuntimeException e){
30. Toast.makeText(MainActivity.this, e.getMessage(),
Toast.LENGTH_SHORT).show();
31. }
32. }
33. });
34.
35. }
36.
37. @Override
38. public boolean onCreateOptionsMenu(Menu menu) {
39. // Inflate the menu; this adds items to the action bar if it is present.
40. getMenuInflater().inflate(R.menu.main, menu);
41. return true;
42. }
43.
44. }

7. Selesai. Lakukan run menggunakan emulator atau smartphone (caranya run lihat di materi BAB 3).

Penjelasan kode program :

1. Lihat code activity_main.xml
Baris 1 : Code yang harus di tulis pada saat mengawali penggunakan kode XML.
Baris 2 - 5 : Code yang digunakan untuk membuat LinearLayout, Linear layout ini
berfungsi sebagai parent dari komponen lainnya. Didalam baris
tersebut mempunyai beberapa atribut, antara lain :

android:layout_width="match_parent" artinya lebar dari

LinearLayout mengikuti ukuran layar.

android:layout_height="wrap_content" artinya tinggi dari

LinearLayout mengikuti content yang ada didalamnya.

android:orientation="vertical"> artinya apabila ada child yang

berupa komponen-komponen seperti button, textview dll, maka
komponen tersebut secara otomatis akan tersusun secara vertikal
dari atas ke bawah.

Baris 6 - 11 : Code yang digunakan untuk membuat TextView dengan tulisan

MASUKAN TINGGI BADAN ANDA (CM):, Didalam TextView tersebut
mempunyai beberapa atribut, antara lain :

android:id="@+id/TextView1" artinya ID dari komponen ini adalah TextView1

Danandjaya Saputra (http://profile.danzbot.com) Page 6
 Mobile Programming (ANDROID)

android:text="MASUKAN TINGGI BADAN ANDA (CM):" artinya Text

yang akan ditampilkan pada komponen ini
android:textSize="18dp" artinya ukuran font pada textview

*atribut yang sama pada komponen sebelumnya tidak akan dijelaskan lagi,
karena fungsinya sama.

Baris 12 - 17 : Code yang digunakan untuk membuat EditText untuk user memasukan
tinggi badan, Didalam TextView tersebut mempunyai beberapa atribut,
antara lain :

android:inputType="numberDecimal" artinya input keyboard yang akan

ditampilkan hanya angka saja

Baris 18 - 22 : Code yang digunakan untuk membuat Button hitung, atribut pada
komponen button ini tidak akan dikelaskan lagi karena memiliki arti
yang sma pada penjelasan atribut baris diatas.

2. Lihat code activity_main.java

Baris 1 : Nama paket dimana activity_main.java tersimpan pada struktur project

Baris 3 - 9 : Code yang digunakan untuk mengimport beberapa kelas bawaan
android untuk mendukung beberapa pengunaan komponen pada
program utama kita seperti EditText, Button, Toast (menampilkan
pesan)

Baris 11 : Code yang menampilkan nama kelas activity yaitu MainActivity, Code
ini secara otomatis akan tergenerate pada saat kita membuat activity.

Baris 12 - 13 : Deklarasi variabel object EditText dan Button

Baris 17 : Mengeset dan Menampilkan layout XML yang digunakan

Baris 19 - 20 : Sinkronisasi object terhadap komponen di layout berdasarkan id
FindViewById digunakan untuk mencari id pada layout XML.

Baris 22 -33 : Memberikan event handling setOnClickListener pada button Hitung,

kemudian baris 26 s.d 30 adalah kode aksi dari Button Hitung setelah
diklik, baris tersebut melakukan perhitungan berat badan ideal
berdasarkan inputan user pada komponen EditText kemudian hasil
perhitungan akan ditampilkan pada Toast (pesan).

Danandjaya Saputra (http://profile.danzbot.com) Page 7

 Mobile Programming (ANDROID)

Latihan
Buatlah aplikasi android seperti dibawah ini, ketika button Tampil diklik maka nama yang telah dimasukan
pada edittext akan menampilkan pesan dengan nama anda.

Danandjaya Saputra (http://profile.danzbot.com) Page 8

 Mobile Programming (ANDROID)

Praktikum 2 (Event Handling OnItemSelectedListener)

Contoh Studi Kasus : Aplikasi Memilih Program Studi
Dalam praktikum ini anda akan menggunakan 2 komponen UI yaitu TextView, Spinner (umumnya disebut
combobox), Kemudian pada komponen Spinner diberikan event handling setOnItemSelectedListener(),
kemudian aksi pada event handling pada spinner tersebut akan text dari spinner tersebut yaitu nama
program studi.

1. Buat project baru dengan mengikuti tabel dibawah ini (cara membuat project lihat di materi BAB 3) !
Application Name Aplikasi Pilih Prodi
Project Name AplikasiPilihProdi
Package Name com.example.aplikasipilihprodi
Minimum Required SDK API 9: Android 2.3
Target SDK API 19: Android 4.4
Compile With API 19: Android 4.4
Theme Holo Light with Dark Action Bar

Danandjaya Saputra (http://profile.danzbot.com) Page 9

 Mobile Programming (ANDROID)

2. Atur nama activity dan layout

Activity Name PilihProdiActivity
Layout Name activity_pilih_prodi

3. Pada package explorer, buka file activity_pilih_prodi.xml.

4. Klik tab activity_pilih_prodi.xml (tampilan kode xml).

5. Ubah kode activity_pilih_prodi.xml, seperti dibawah ini
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="wrap_content"
5. android:orientation="vertical">
6. <TextView
7. android:id="@+id/TextView1"
8. android:layout_width="match_parent"
9. android:layout_height="wrap_content"
10. android:text="PILIH PROGRAM STUDI ANDA :"
11. android:textSize="18dp" />
12. <Spinner
13. android:id="@+id/spProdi"
14. android:layout_width="match_parent"
15. android:layout_height="wrap_content"
16. android:textSize="18dp" />
17. </LinearLayout>

Danandjaya Saputra (http://profile.danzbot.com) Page 10

 Mobile Programming (ANDROID)

6. Selanjutnya pada package explorer, buka file PilihProdiActivity.java.

7. Ubah kode PilihProdiActivity.java, lengkapi seperti dibawah ini

1. package com.example.aplikasipilihprodi;
2.
3. import android.os.Bundle;
4. import android.app.Activity;
5. import android.view.Menu;
6. import android.view.View;
7. import android.widget.AdapterView;
8. import android.widget.AdapterView.OnItemSelectedListener;
9. import android.widget.ArrayAdapter;
10. import android.widget.Spinner;
11. import android.widget.Toast;
12.
13. public class PilihProdiActivity extends Activity {
14. Spinner spinProdi;
15. String[] item_prodi = { "TEKNIK INFORMATIKA", "SISTEM INFORMASI", "KOMPUTER AKUNTASI"
};
16. @Override
17. protected void onCreate(Bundle savedInstanceState) {
18. super.onCreate(savedInstanceState);
19. setContentView(R.layout.activity_pilih_prodi);
20. spinProdi = (Spinner) findViewById(R.id.spinProdi);
21.
22. ArrayAdapter<String> spinnerAdapter = new
ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, item_prodi);
23.
spinnerAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
24. spinProdi.setAdapter(spinnerAdapter);
25.
26. spinProdi.setOnItemSelectedListener(new OnItemSelectedListener() {
27. @Override
28. public void onItemSelected(AdapterView<?> parentView, View selectedItemView,
int position, long id) {
29. String prodi_pilih = spinProdi.getSelectedItem().toString();
30. Toast.makeText(PilihProdiActivity.this, "Anda telah memilih : " +
prodi_pilih, Toast.LENGTH_SHORT).show();
31. }
32.
33. @Override
34. public void onNothingSelected(AdapterView<?> parentView) {

Danandjaya Saputra (http://profile.danzbot.com) Page 11

 Mobile Programming (ANDROID)

35.
36. }
37. });
38. }
39.
40.
41. @Override
42. public boolean onCreateOptionsMenu(Menu menu) {
43. // Inflate the menu; this adds items to the action bar if it is present.
44. getMenuInflater().inflate(R.menu.pilih_prodi, menu);
45. return true;
46. }
47.
48. }

8. Selesai. Lakukan run menggunakan emulator atau smartphone (cara run lihat di materi BAB 3).
Penjelasan kode program :
1. Lihat code activity_pilih_prodi.xml
Baris 12 - 16 : Code yang digunakan untuk membuat Spinner

2. Lihat code PilihProdiActivity.java

Baris 14 : Deklarasi variabel object Spinner

Baris 15 : Deklarasi variabel array string dengan nama item_prodi, kemudian

memasukan beberapa data pada variabel tersebut.
Baris 17 : Mengeset dan Menampilkan layout XML yang digunakan
Baris 20 : Sinkronisasi object terhadap komponen di layout berdasarkan id
FindViewById digunakan untuk mencari id pada layout XML.

Baris 22 -24 : Menampilkan data yang diisikan pada variabel item_prodi ke spinner
dengan nama spinProdi, sehingga pada spiner spinProdi nantinya akan
muncul item pilihan sesuai dengan data yang diisikan pada item_prodi

Baris 26 - 37 : Memberikan event handling setOnItemSelectedListener pada spiner

spinProdi, kemudian baris 29 s.d 30 adalah kode aksi dari spiner
spinProdi setelah dipilih itemnya, baris tersebut mengambil text dari
item yang dipilih kemudian dimasukan ke variabel string prodi_pilih,
nilai dari variabel prodi_pilih akan ditampilkan pada Toast (pesan)

Danandjaya Saputra (http://profile.danzbot.com) Page 12

 Mobile Programming (ANDROID)

Latihan
Buatlah aplikasi android seperti dibawah ini, dimana spiner dapat menampilkan menu makanan yang
terdiri dari NASI GORENG, SATE DAN AYAM GORENG.

Danandjaya Saputra (http://profile.danzbot.com) Page 13

 Mobile Programming (ANDROID)

Praktikum 3 (Event Handling SetOnTouchListener)

Contoh Studi Kasus : Aplikasi Sentuh Gambar
Dalam praktikum ini anda akan menggunakan 2 komponen UI yaitu ImageView dan TextView, Kemudian
pada komponen ImageView diberikan event handling setOnTouchListener(), kemudian aksi pada event
handling pada ImageView tersebut ketika di setuh akan menampilkan status di textView dibawahnya.

1. Buat project baru dengan mengikuti tabel dibawah ini (cara membuat project lihat di materi BAB 3) !
Application Name AplikasiPilihGambar
Project Name AplikasiPilihGambar
Package Name com.example.aplikasipilihgambar
Minimum Required SDK API 9: Android 2.3
Target SDK API 19: Android 4.4
Compile With API 19: Android 4.4
Theme Holo Light with Dark Action Bar

Danandjaya Saputra (http://profile.danzbot.com) Page 14

 Mobile Programming (ANDROID)

2. Atur nama activity dan layout

Activity Name PilihGambarActivity
Layout Name activity_pilih_gambar

3. Masukan 1 gambar dengan format JPEG/PNG (rekomendasi file PNG dg ukuran 256x256 px) kemudian
rename file gambar tersebut dengan nama tiger, kemudian paste atau letakan pada folder drawable-
hdpi

4. Pada package explorer, buka file activity_pilih_gambar.xml.

Danandjaya Saputra (http://profile.danzbot.com) Page 15

 Mobile Programming (ANDROID)

5. Ubah kode activity_pilih_gambar.xml, seperti dibawah ini

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="wrap_content"
5. android:orientation="vertical"
6. android:layout_gravity="center">
7. <ImageView
8. android:id="@+id/imageSentuh"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:layout_gravity="center"
12. android:src="@drawable/tiger" />
13. <TextView
14. android:id="@+id/txtStatusSentuh"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:layout_marginTop="20dp"
18. android:layout_gravity="center"
19. android:text="......"
20. android:textStyle="bold"
21. android:textSize="20dp"/>
22. </LinearLayout>

6. Selanjutnya pada package explorer, buka file PilihProdiActivity.java.

7. Ubah kode PilihGambarActivity.java, lengkapi seperti dibawah ini

1. package com.example.aplikasipilihgambar;
2.
3. import android.os.Bundle;
4. import android.app.Activity;
5. import android.view.Menu;
6. import android.view.MotionEvent;
7. import android.view.View;
8. import android.view.View.OnTouchListener;
9. import android.widget.ImageView;
10. import android.widget.TextView;
11.
12. public class PilihGambarActivity extends Activity {

Danandjaya Saputra (http://profile.danzbot.com) Page 16

 Mobile Programming (ANDROID)

13. TextView txtStatusSentuh;

14. ImageView imageSentuh;
15. @Override
16. protected void onCreate(Bundle savedInstanceState) {
17. super.onCreate(savedInstanceState);
18. setContentView(R.layout.activity_pilih_gambar);
19.
20. txtStatusSentuh = (TextView) findViewById(R.id.txtStatusSentuh);
21. imageSentuh = (ImageView) findViewById(R.id.imageSentuh);
22.
23. imageSentuh.setOnTouchListener(new OnTouchListener() {
24. @Override
25. public boolean onTouch(View v, MotionEvent event) {
26. if(event.getAction() == MotionEvent.ACTION_DOWN) {
27. txtStatusSentuh.setText("AWW...AKU DI SENTUH");
28. return true;
29. } else if(event.getAction() == MotionEvent.ACTION_UP) {
30. txtStatusSentuh.setText("YAH...AKU DI LEPAS");
31. return true;
32. }
33. return false;
34. }
35. });
36. }
37.
38.
39. @Override
40. public boolean onCreateOptionsMenu(Menu menu) {
41. // Inflate the menu; this adds items to the action bar if it is present.
42. getMenuInflater().inflate(R.menu.pilih_gambar, menu);
43. return true;
44. }
45.
46. }

8. Lakukan run menggunakan emulator atau smartphone (cara run lihat di materi BAB 3).

Penjelasan kode program :

1. Lihat code activity_pilih_gambar.xml
Baris 7 - 12 : Code yang digunakan untuk membuat ImageView dengan id
imageSentuh, Didalam ImageView tersebut mempunyai beberapa
atribut, antara lain :
android:layout_gravity="center" artinya posisi gambar akan tampil ditengah
layar
android:src="@drawable/tiger artinya memilih gambar dengan nama
tiger untuk ditampilkan pada imageView imageSentuh

Danandjaya Saputra (http://profile.danzbot.com) Page 17

 Mobile Programming (ANDROID)

2. Lihat PilihGambarActivity.java
Baris 13 - 14 : Deklarasi variabel object TextView dan ImageView

Baris 18 : Mengeset dan Menampilkan layout XML yang digunakan

Baris 20 - 21 : Sinkronisasi object terhadap komponen di layout code
activity_pilih_gambar.xml berdasarkan id
FindViewById digunakan untuk mencari id pada layout XML.

Baris 23 -35 : Memberikan event handling setOnTouchListener pada ImageView

dengan id imageSentuh, kemudian baris 26 s.d 32 adalah kode aksi dari
imageSentuh ketika user menyetuhnya, di aksi tersebut ada 2 kondisi
1. MotionEvent.ACTION_DOWN aksi ketika komponen disentuh
2. MotionEvent.ACTION_UP aksi ketika komponen dilepas

Danandjaya Saputra (http://profile.danzbot.com) Page 18