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