MODUL II

User Interface Event & Widget

Materi
1. User Interface Event
2. Widget
3. Latihan

2.1 User Interface Event

Ketika kita merancang sebuah interface menggunakan View atau widget, terdapat beberapa
hal utama yang menjadi permasalahan yang selalu kita pikirkan, bagi kita yang baru melakukan
pemograman android tentunya akan memikirkan tentang bagaimana interaksi antara
pengguna dengan widget atau view. Jawaban dari pertanyaan ini adalah dua hal yang pertama
adalah penggunaan Event Handler dan Event Listener.
a. Event Listener
Event listener merupakan antarmuka di kelas View yang berfungsi callback tunggal, metod ini
akan dipanggil oleh framework android jika tampilan yang telah terdaftar dengan listener dan
dipicu oleh interaksi pengguna dengan item di dalam interface pengguna. Kelas View memiliki
sekumpulan interface sebagai Event Listener, dan masing-masing interface memiliki fungsi
untuk mengembalikan nilai tunggal (callback), contohnya saja.
- View.OnClickListener, digunakan untuk menangani event klik pada View
- View.OnTouchListener, digunakan untuk mennangani even sentuhan pada laya
- View.OnKeyListener, digunakan untuk nengangani even keypad pada View
- View.onFocusChangeListener, dipanggil saat pengguna menyusuri item dengan
menggunakan tombol navigasi atau trackball
b. Event Handler
Ketika proses pembuatan aplikasi mobile terkadang ada komponen kustom yang digunakan
sebagai komponen tambahan, permasalahan tersebut dapat diselesaikan dengan

PEMOGRAMAN PERANGKAT BERGERAK | IB P MANUABA MANUABA.PUTRA@GMAIL.COM

mendefinisikan metode callback sebagai event handler default. Terdapat beberapa callback
umum atau sering digunakan untuk event handler
- onKeyDown(int,KeyEvent), Dipanggil bila terjadi kejadian tombol baru
- onKeyUp(int,KeyEvent), Diapanggil bila kejadian tombol naik
- onTrackballEvent(MotionEvent), dipanggil bila terjadi kejadian gerakan trackbal
- onTouchEvent(MotionEvent), dipanggil bila terjadi gerakan layar sentuh
- onFocusChanged(Boolean, int, Rect), dipanggil jika view memperolah atau kehilangan
focus

2.2 Widget
a. TextView
Widget yang memiliki kegunaan untuk menampilkan text ke layar, secara default widget ini
tidak dapat di edit (mengubah isi text), namun text di dalam widget ini dapat di ubah dengan
menggunakan subclass yang berfungsi untuk menampilkan isi dari widget TextView.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contoh Text View"
android:id="@+id/textView1"/>

b. Button
Widget button merupakan perangkat user interface pada android yang berbentuk tombol.
Button merupakan salah satu interface yang sering digunakan pada aplikasi Android, banyak
aktivitas pada aplikasi Android yang membutuhkan Button sebagai interface untuk
mengeksekusi seperti Login, Logout, Pencarian atau Menu.
Kode design xml, button text :

PEMOGRAMAN PERANGKAT BERGERAK | IB P MANUABA MANUABA.PUTRA@GMAIL.COM

 <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button1"
android:text="Button 1"/>

Kode design xml Image Button :

<ImageButton
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="44dp"
android:src="@android:drawable/ic_dialog_email"/>

Kode design xml Button text dan Image :

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button2"
android:drawableLeft="@android:drawable/btn_plus"
android:text="Tambah"/>

Kode event handling widget button :

PEMOGRAMAN PERANGKAT BERGERAK | IB P MANUABA MANUABA.PUTRA@GMAIL.COM

 Button button1 = (Button)findViewById(R.id.button2);
button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"Ini Button",
Toast.LENGTH_LONG).show();
}
});

c. EditText
EditText merupakan salah satu widget yang dapat menerima inputan dari pengguna atau user.
EditText merupakan subclass dari view TextView yang mengijinkan pengguna untuk mengubah
text yang tekandung di dalam widget.
Kode design EditText :
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/editText1"
android:hint="Contoh EditText"/>

- InputType digunakan untuk mengendalikan inputan terhadap widgets sehinggainputan

sesuai dengan formatyang diharapkan. Beberapa macam input type seperti : Text(default
input), Number, Phone, DateTime, Date, Time.
- TypeFace digunakan untuk mendefinisikan jenis huruf yang mau ditampilkan

d. Rating Bar
RatingBar merupakan widget yang digunakan untuk memberikan penilaian berdasarkan rating,
dan biasanya terdiri dari nilai 0 sampai dengan 5. RatingBar pada umumnya digunakan atau
dapat dijumpai pada aplikasi penilaian seperti survey
Kode design xml rating bar :

PEMOGRAMAN PERANGKAT BERGERAK | IB P MANUABA MANUABA.PUTRA@GMAIL.COM

 <RatingBar
android:id="@+id/ratingBar1"
android:layout_marginLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:saveEnabled="true"
android:numStars="5"/>

Kode untuk mengambil Nilai Rating Bar :

RatingBar.getRating()

d. RadioGroup dan Radio Button

RadioButton digunakan untuk menyejikan pilihan data kepada pengguna, radiobutton
digunakan bersama-sama dengan RadioGroup.
Kode design xml RadioButton :
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/rgroup1">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/r1"
android:text="Opsi1"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/r2"
android:text="Opsi2"/>
</RadioGroup>

Kode Radion Button :

PEMOGRAMAN PERANGKAT BERGERAK | IB P MANUABA MANUABA.PUTRA@GMAIL.COM

 private RadioGroup rGroup;
private RadioButton rButton;
private Button btnOpsi;

rGroup =(RadioGroup)findViewById(R.id.rgroup1);
btnOpsi=(Button)findViewById(R.id.btnOpsi);

btnOpsi.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int selectRadio = rGroup.getCheckedRadioButtonId();
rButton=(RadioButton)findViewById(selectRadio);

Toast.makeText(MainActivity.this,rButton.getText(),Toast.LENGTH_LON
G).show();
}
});

3. Latihan
Buatlah aplikasi untuk penyajian artikel seperti pada gambar di bawah ini, dimana judul dan
artikelnya dapat di ambil dari sumber berikut : https://id.lipsum.com. Kemudian berikan kolom
untuk menyajikan penilain berupa rating terhadap artikel tersebut.

PEMOGRAMAN PERANGKAT BERGERAK | IB P MANUABA MANUABA.PUTRA@GMAIL.COM

Jika Button Beri Nilai di klik oleh pengguna maka akan muncul penilaian yang diberikan oleh
pengguna seperti pada gambar di bawah ini.

PEMOGRAMAN PERANGKAT BERGERAK | IB P MANUABA MANUABA.PUTRA@GMAIL.COM