Penggampu: Nur Iksan | PTIK UNNES 2014

CheckBox
User dapat memilih lebih dari satu pilihan dengan checkbox. Pada palette, Checkbox ada di
bagian FormWidgets.

Coba tambahkan dua checkboxs lalu set atribut id dan text melalui window property:

Sehingga hasilnya

Sedangkan contoh program untuk mendapatkan nilai suatu checkbox di check atau tidak adalah
sebagai berikut.
Tambahkan Button dan TextView di form untuk menampilkan hasil pilihan user. Sehingga
tampilannya akan seperti ini.

Materi Pertemuan : Form Widgets

Penggampu: Nur Iksan | PTIK UNNES 2014

Sedangkan XML-nya akan seperti ini, anda dapat langsung mengedit file XML ataupun melalui
window property. Jangan lupa atribut onClick:

Materi Pertemuan : Form Widgets

Penggampu: Nur Iksan | PTIK UNNES 2014

Tambahkan di activity code method klikHasil sebagai berikut, perhatikan penggunaan isChecked
untuk mengambil nilai apakah user meng-check pilihan:

Materi Pertemuan : Form Widgets

Penggampu: Nur Iksan | PTIK UNNES 2014

Latihan CheckBox:
Buat soal berikut yang penggunanya dapat memilih lebih dari satu:
-------------------------------------------------------------------------------1. Manakah kota dibawah ini yang merupakan ibu kota propinsi?
Bandung
Bogor
Banjarmasin
Bontang
ini button
Periksa Nilai
Nilai anda: [ditampilkan setelah tombol periksa nilai diklik]
-------------------------------------------------------------------------------Jawaban yang benar adalah Bandung dan Banjarmasin. Setiap jawaban
benar bernilai 10, tetapi setiap jawaban yang salah akan dikurangi 5. Jadi jika
pengguna menjawab Bandung, Bogor dan Banjarmasin dan maka
pengguna mendapat nilai 20 5 = 15. Tampilkan nilai ini.
Catatan: input dari method setText adalah teks, sehingga nilai integer harus
dikonversi terlebih dulu menjadi teks. Gunakan Integer.toString(intNilai).

RadioButton
Pada radioButton, hanya satu pilihan yang boleh aktif (mutual exclusive) di dalam satu group
yang disebut radioGroup. Modifikasi program checkbox diatas, tambahkan radio group (bukan
radiobutton) yang ada di Form Widget

Hasilnya:

Tambahkan button dan textview, lalu gunakan property untuk mengedit sehingga hasilnya seperti
berikut. Ganti id RadioGroup dengan rgJenisKel, radiobutton dengan rbLaki dan
rbPerempuan dan id TextView dengan tvHasilRadio. Tambahkan property onClick
pada button dengan nama klikHasilRadio

Materi Pertemuan : Form Widgets

Penggampu: Nur Iksan | PTIK UNNES 2014

Catatan: Anda dapat mengeset atribut android:orientation pada RadioGroup menjadi horizontal
agar radio button tersusun secara mendatar.
Sedangkan code saat tombol diklik
adalah sebagai berikut.Perhatikan pengunaan
getCheckRadioButtonId yang mengambil idRadio yang dipilih oleh pengguna:

Latihan:
Buat soal berikut yang penggunanya hanya dapat memilih tepat satu:
-------------------------------------------------------------------------------1. Sebutkan ibu kota propinsi Sulawesi Tenggara?
Samarinda
Kendari
Palu
ini button
Makasar
Periksa Nilai
Nilai anda: [ditampilkan setelah tombol periksa nilai diklik]
-------------------------------------------------------------------------------Jawaban yang benar adalah Kendari. Jika pengguna memilih pilihan yang
benar akan mendapat nilai 10, sedangkan jika menjawab salah maka akan
mendapat nilai -2
Materi Pertemuan : Form Widgets

Penggampu: Nur Iksan | PTIK UNNES 2014

ListView
List view adalah widget untuk menampilkan data dalam bentuk list yang dapat di-scroll. Karena
ukuran layar smartphone terbatas, listview merupakan salah satu widget terpenting dan paling
sering digunakan untuk menampilkan kelompok informasi.
ListView dapat berbentuk sederhana sampai kompleks. Beberapa contoh

Kita akan mulai dengan membuat list sederhana seperti gambar di bawah:

Pertama, buat project baru lalu pilih Composite dan tambahkan ListView di activity_main.xml

Ganti id list view dengan listAngka

Materi Pertemuan : Form Widgets

Penggampu: Nur Iksan | PTIK UNNES 2014

Di activity utama, tambahkan code sebagai berikut:

Coba jalankan.
Pada code di atas, dibuat adapter berisi string
untuk mengisi list.
Sedangkan
R.layout.simple_expandable_list_item1 adalah layout standard yang disediakan Android.
Bagaimana mengupdate isi listview saat program sedang berjalan?
Untuk mengupdate data pada contoh diatas, nilai array dapat langsung diubah lalu panggil
method adapter.notifyDataSetChanged()untuk merefresh tampilan. Sebagai contoh, kita akan
membuat button yang saat diklik akan mengubah item pertama:
Tambahkan button diatas listview

Tambahkan event onClick bernama klikButton dan kode seperti berikut:

Materi Pertemuan : Form Widgets

Penggampu: Nur Iksan | PTIK UNNES 2014

Composite ListView

Listview juga dapat digunakan untuk menampilkan struktur yang lebih rumit. Contoh berikut
memperlihatkan listview dengan isi yang kita tentukan sendiri.

Untuk membuatnya, pertama buat project baru. Tambahkan ListView seperti pada contoh
sebelumnya. Ganti id dengan listJudul.
Kemudian kita akan buat layout untuk setiap baris pada ListView yang berisi judul dan
keterangan. Pilih project pada project explorer, lalu klik kanan Android Tools New
Resources File (gambar bawah)

Catatan: alternatif lain membuat layout XML, klik kanan project new Android XML File.
Pilih resource type Layout. Beri nama file row.xml, pilih root element LinearLayout, XML
akan dibuat di dalam direktori /res/layout. File row.xml ini akan menentukan layout dari setiap
baris pada listview.
Materi Pertemuan : Form Widgets

Penggampu: Nur Iksan | PTIK UNNES 2014

Pada row.xml yang baru digenerate tambahkan widget LargeText dan TextView (gambar
bawah).
Ganti Id kedua komponen itu. LargeText dengan tvJudul dan TextView dengan
tvKeterangan.

Pada contoh di atas hanya digunakan dua widget (LargeText dan TextView), tapi sebenarnya
apapun dapat dimasukkan di dalam layout ini. Misalnya Button, ImageView dan lainnya. Ini
memungkinkan kita membuat ListView dengan isi yang kompleks.
Sekarang buat class untuk yang menampung data judul dan keterangan. Pada project explorer,
pilih /src/[package], klik kanan new Class

Beri nama DataList

Materi Pertemuan : Form Widgets

Penggampu: Nur Iksan | PTIK UNNES 2014

Berikut isi dari DataList. Class ini akan berisi data yang akan muncul di setiap baris.

Selanjutnya kita akan buat adapter untuk list. Fungsinya untuk mengisi setiap row dengan isi
objek DataList.
Buat class dengan cara yang sama dengan sebelumnya (klik /src/[package], klik kanan, new
class), beri nama DataAdapter, jadikan class ini turunan dari kelas ArrayAdapter.
Klik browse di dialog saat membuat class di bagian superclass (gambar bawahh)

Ketik Array, maka akan muncul ArrayAdapter, pilih item tersebut (gambar bawah)

Isi class DataAdapter adalah sebagai berikut. Pada method getView, parameter pos adalah
indeks baris. Perhatikan pengisian tvJudul dan tvKeterangan dengan data sesuai indeks.

Materi Pertemuan : Form Widgets

10

Penggampu: Nur Iksan | PTIK UNNES 2014

Terakhir, di activity utama (MainActivity.java) tambahkan kode berikut:

Jika dijalankan, hasilnya akan seperti ini:

Materi Pertemuan : Form Widgets

11

Penggampu: Nur Iksan | PTIK UNNES 2014

Latihan:

Buat program dengan tampilan seperti berikut, saat tombol diklik, maka isi list
akan bertambah sesuai dengan nim dan nama. Tip: gunakan
adapter.notifyDataSetChanged() untuk merefresh data.

Penanganan Click pada ListView

Listview sering digunakan untuk menampilkan data master-detail yang jika di tap barisnya akan
menampilkan detil pada layar terpisah. Listview juga dapat digunakan untuk menampilkan
menu.
Untuk menangani tap pada listview, gunakan method setOnItemClickListener
Contoh berikut akan menampilkan dialog singkat jika baris ditekan, judul pada baris juga akan
berubah menjadi warna merah. Berdasarkan kode pada contoh listview sebelumnya, tambahkan
kode berikut (bagian yang dilingkari). Penjelasan tentang Toast ada di sub bab berikutnya.

Materi Pertemuan : Form Widgets

12

Penggampu: Nur Iksan | PTIK UNNES 2014

Ada empat parameter untuk onItemClick:

Parent
View
Position
id

AdapterView (view parent yang menampung semua row)

View baris yang ditap
Posisi (indeks) dari view pada adapter
Id dari row.

Materi Pertemuan : Form Widgets

13