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.



Sedangkan XML-nya akan seperti ini, anda dapat langsung mengedit file XML ataupun melalui

window property. Jangan lupa atribut onClick:



Tambahkan di activity code method klikHasil sebagai berikut, perhatikan penggunaan isChecked

untuk mengambil nilai apakah user meng-check pilihan:



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



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



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”



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:



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.



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



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.



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

Jika dijalankan, hasilnya akan seperti ini:



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.



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.

Documents

Mobile Computing Checkbox Radio List