1
MODUL 6
KOMPONEN WIDGET TOGGLEBUTTON DAN SPINNER
CAPAIAN PEMBELAJARAN
1. Mahasiswa mampu menggunakan Widget ToggleButton dan Spinner untuk
membuat aplikasi sederhana
KEBUTUHAN ALAT/BAHAN/SOFTWARE
1. Android Studio 3.5
2. Handphone Android versi 7.0 (Nougat)
3. Kabel data USB.
4. Driver ADB.
DASAR TEORI
Toggle Button
Android Toggle Button dapat digunakan untuk menampilkan status dicentang /
tidak dicentang (Aktif / Nonaktif) pada tombol. Ini bermanfaat jika pengguna harus
mengubah pengaturan misalnya, antara dua negara, untuk pengaturan Suara
Nyala / Mati, Wifi, Bluetooth dll.
2
Sejak Android 4.0, ada jenis lain dari tombol sakelar yang disebut sakelar (switch)
yang menyediakan kontrol slider.
Android ToggleButton dan Switch keduanya adalah subclass dari kelas
CompoundButton.
Tiga atribut XML dari kelas ToggleButton yang sering dipakai seperti berikut.
Atribut XML Deskripsi
Alfa untuk diterapkan pada indikator saat
dinonaktifkan.
Teks pada button saat tidak dicentang.
Teks pada button saat dicentang.
Metode kelas ToggleButton yang banyak digunakan diberikan di bawah ini.
Method Description
Menghasilkan teks saat button tidak
dalam status checked.
Menghasilkan teks saat button dalam
status checked.
3
Mengubah status checked button ini.
Spinner
Spinner menyediakan cara cepat untuk memilih salah satu dari sekumpulan nilai.
Dalam status default, spinner menampilkan nilai yang dipilihnya saat ini.
Menyentuh spinner akan menampilkan menu drop-down bersama semua nilai lain
yang tersedia, yang memungkinkan pengguna memilih salah satunya.
Anda bisa menambahkan spinner ke layout dengan objek . Anda biasanya
harus melakukannya dalam layout XML dengan elemen <Spinner>. Sebagai
contoh:
Untuk mengisi spinner dengan daftar pilihan, Anda perlu menetapkan
SpinnerAdapter dalam kode sumber Activity atau Fragment Anda.
Kelas-kelas utama adalah berikut ini:
Mengisi Spinner dengan Pilihan Pengguna
4
Pilihan yang Anda sediakan untuk spinner bisa berasal dari sumber apa saja,
namun harus disediakan melalui , seperti jika
pilihan tersedia dalam larik atau jika pilihan tersedia dari kueri
database.
PRAKTIK
1. Buatlah project dengan nama Widget Dasar 2 dengan parameter berikut:
Attribute Value
Template Empty Activity dalam tab Phone and Tablet
Application Name Widget Dasar 2
Company Name android (atau domain anda sendiri)
Language Kotlin
Minimum API level API 21: Android 5.0 (Lollipop) atau API lain yang sesuai
This project will support instant apps
(Biarkan box ini terhapus / tidak terpilih)
Use AndroidX artifacts Pilih box ini.
2. Tunggu Android Studio menyelesaikan Gradle build. Jika anda melihat error,
pilih Build > Rebuild Project.
3. Jalankan aplikasi dan tunggu beberapa saat sampai proses build selesai. Anda
seharusnya melihat layar dengan "Hello World!" di tengah layar.
Membuat Objek ToggleButton
5
4. Buka file activity_main.xml dalam mode Text. Modifikasilah kode XML
sehingga menjadi seperti beikut.
5. Jalankan aplikasi Anda, sentuh (tap) pada objek toggle button, perhatikan apa
yang terjadi.
Merespon saat ToggleButton ditekan
6. Dalam kelas MainActivity method onCreate(), tambahkan kode berikut.
7. Jalankan aplikasi Anda, sentuh (tap) pada objek toggle button, perhatikan apa
yang terjadi.
8. Buka file strings.xml, tambahkan kode XML berikut (dalam kotak).
6
9. Buka file activity_main.xml dalam mode Text. Dibawah elemen
ToggleButton, tambahkan kode XML seperti berikut.
10. Dalam kelas MainActivity method onCreate(), tambahkan kode berikut.
7
11. Jalankan aplikasi Anda, sentuh (tap) pada objek switch, perhatikan apa yang
terjadi.
Membuat objek Spinner
12. Buka file activity_main.xml dalam mode Text. Tambahkan widget Spinner
seperti berikut.
13. Dalam file strings.xml, tambahkan kode XML berikut.
8
14. Dalam kelas MainActivity method onCreate(), tambahkan kode berikut.
15. Jalankan aplikasi Anda, pilih item pada spinner
Merespon Pilihan Pengguna
16. Pada deklarasi kelas MainActivity berikut:
Tambahkan kode sehingga menjadi seperti berikut.
17. Dalam kelas MainActivity method onCreate(), tambahkan kode berikut.
18. Dalam kelas MainActivity tambahkan dua method berikut.
9
19. Jalankan aplikasi Anda, pilih item pada spinner. Perhatikan apa yang terjadi.
Mengatur layout pada Spinner
20. Dalam node layout berikut::
Tambahkan file XML baru dengan cara: klik kanan, New > XML > Layout XML
File. Isilah dialog yang muncul dengan isian seperti berikut.
21. Ubahlah isi file simple_spinner_item.xml sehingga menjadi seperti berikut.
10
22. Ulangi langkah di atas untuk membuat file: simple_spinner_drop_down.xml.
Ubahlah kode XML sehingga menjadi seperti berikut.
23. Tambahkan dalam file styles.xml dengan kode XML berikut.
24. Dalam kelas MainActivity method onCreate(), ubahlah kode sehingga
menjadi seperti yang ditandai kotak berikut.
11
25. Jalankan aplikasi Anda, pilih item pada spinner. Perhatikan apa yang terjadi.
LATIHAN
1. Dalam file activity_main.xml. Tambahkan widget TextView seperti berikut.
2. Tambahkan kode pada fungsi onItemSelected(), sehingga tampilan Toast
sebelumnya juga ditampilkan di TextView di atas.
12
TUGAS
1. Tambahkan pada project Anda ToggleButton, yang berfungsi mengubah
warna pesan menjadi merah jika sedang ON.
2. Tambahkan pada project Anda Spinner, yang berisi nama-nama ruang kelas.
Jika terpilih akan ditampilkan dalam TextView
REFERENSI
1. https://codelabs.developers.google.com/codelabs/kotlin-android-training-get-
started/#0
2. https://developer.android.com/guide/topics/ui/controls/togglebutton
3. https://developer.android.com/guide/topics/ui/controls/spinner
4. https://tutorial.eyehunts.com/android/android-spinner-with-example-in-kotlin/
5. https://www.tutorialkart.com/kotlin-android/android-spinner-kotlin-example/
6. https://www.tutorialsbuzz.com/2019/09/android-kotlin-styling-spinner-drop-
down.html