Download - Mobile Computing Checkbox Radio List
Materi Pertemuan : Form Widgets
1 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
2 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
3 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
4 Penggampu: Nur Iksan | PTIK UNNES 2014
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
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
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).
Periksa Nilai
ini button
Materi Pertemuan : Form Widgets
5 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
Makasar
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
Periksa Nilai
ini button
Materi Pertemuan : Form Widgets
6 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
7 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
8 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
9 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
10 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
11 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
12 Penggampu: Nur Iksan | PTIK UNNES 2014
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.
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.
Materi Pertemuan : Form Widgets
13 Penggampu: Nur Iksan | PTIK UNNES 2014
Ada empat parameter untuk onItemClick:
Parent AdapterView (view parent yang menampung semua row) View View baris yang ditap Position Posisi (indeks) dari view pada adapter id Id dari row.