PERTEMUAN 3

Mobile
Programming

Widget dalam Android

Abstract Kompetensi
. Mahasiswa memahami konsep aplikasi
dalam android, serta mampu membuat
aplikasi sederhana.
Widget
Komponen user interface pada eclipe ini disebut widget. Beberapa widget dasar adalah: TextView,
Button, Image, EditText, CheckBox, RadioButton, ListView. Setiap widget memiliki property atau
atribut yang mengatur bagaimana widget itu ditampilkan, seperti tinggi dan lebar widget. Property
ini dapat diset melalui xml layout, property editor atau melalui program. Beberapa widget memiliki
beberapa event yang ter-trigger berdasarkan aksi dari pengguna, misalnya event click pada button.
Berikut adalah contoh pengaplikasian widget. Untuk menampilkan cukup drag icon ke layar kerja.

Text View

TextView digunakan untuk menampilkan label teks. View ini sudah kita gunakan Beberapa contoh
property dari TextView adalah android:textSize, android:textStyle, android:textColor. Coba tambahkan
textview standard dengan atribut dibawah.
Hasilnya:

Catatan: pada atribut textSize, direkomendasikan menggunakan ukuran sp. sp merupakan singkatan
dari scaled-pixel yang memperhitungkan kepadatan resolusi dan juga preferensi ukuran font dari
pengguna.

Button

Button merupakan turunan dari TextView sehingga yang berlaku di textView juga berlaku di button.
Tambahan property yang penting adalah onClick

Hasilnya (perhatikan penggunan fill_parent untuk atribut layout_width):

Catatan: dp yang digunakan sebagai satuan panjang merupakan singkatan dari density-independen pixel.
Nilai pixel untuk 1 dp berubah-ubah sesuai dengan resolusi. 1 dp pada resolusi 160 pixel berarti 1 pixel.
Jika resolusinya 320 pixel, maka 1 dp = 2 pixel demikian seterusnya.

Image View
Image View widget yang digunakan untuk menampilkan image. Image yang akan ditampilkan dalam
button diletakkan di direktori /res sesuai dengan resolusinya. Jadi untuk hasil yang maksimal, untuk
setiap image yang akan anda gunakan harus disediakan 4 image untuk setiap resolusi (mdpi sampai
dengan xxhdpi). Hal ini untuk mencegah gambar yang digunakan terlihat pecah atau terlalu kecil
pada device dengan resolusi berbeda. Pada folder res sudah terdapat image android. Sebagai
contoh kita tampilkan gambar tersebut. Drag image view kelayar kerja.

Contoh:

dan hasilnya

EditText

EditText digunakan untuk menerima input dari pengguna. Pada palette telah disediakan berbagai jenis
EditText, silahkan dicoba satu persatu dan perhatikan XML yang dihasilkan.
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:
Latihan CheckBox:

Buat soal berikut yang penggunanya dapat memilih lebih dari satu:
--------------------------------------------------------------------------------
1. Manakah kota dibawah ini yang merupakan ibu kota propinsi?
Bandung ini button
Bogor
Banjarmasin
Bontang

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

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 ini button

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
Daftar Pustaka
1. Burd, B. (2012). Android Application Development All-in-One For Dummies. For Dummies.
2. Cinar, O. (2012). Android Apps with Eclipse (1 ed.). Appress.
3. Murphy, M. L. (2010). Android Programming Tutorials. United States of America:
CommonsWare, LLC.
4. Modul Mobile Programming Susanto Hariyanto, S.Kom.
5. Modul Mobile Programming, Sekolah Tinggi Manajemen Informatika & Komputer Indonesia,
6. Modul Praktikum Pemrograman Mobile, Teknik Informatika, Fakultas teknik Industri, Institut
Sains Dan Teknologi AKPRIND, Yogyakarta, 2014