Trik Sederhana Membuat Toggle Switch dengan Button dan Image

Programming MIT App Inventor 2

Oleh: Wawan pada 2025-05-02 20:50:25 | Diperbarui: Wawan pada 2025-06-14 05:56:45

Bagikan: Facebook | Twitter | Whatsapp | Linkedin Kunjungan: 31

---

Apa itu Toogle Switch

Di rumah pasti ada saklar untuk menghidupkan/mematikan lampu penerangan, bukan? Nah, Itulah contoh Toggle Switch di kehidupan nyata. Toggle Switch hanya memiliki dua kemungkinan keadaan, OFF ataukah ON.

Toggle Switch di MIT App Inventor 2

Sebenarnya MIT App Inventor 2 menyediakan komponen Toggle Switch tersendiri, namun kita akan membuatnya dari komponen lain yaitu Button dan Image.

Manipulasi Properti

Trik yang kita pakai kali ini adalah memanipulasi properti dari Button berikut :

• Visibilitas (Visible),
• Warna latarbelakang (ColorBackground)
• Teks (Text).

Toggle Switch memakai Button

Siapkan dua komponen, yaitu Button1 dan Button2. Atur properti keduanya sebagai berikut :

Properti Button1

• BackgroundColor: Red
• Text: OFF
• Visible: Aktif

Properti Button2

• BackgroundColor: Green
• Text: ON
• Visible: tidak aktif

Pemrograman

Toggle Switch memakai Image

Komponen Image menghasilkan penampilan Toggle Switch lebih menarik, namun kita perlu menyiapkan dua buah file gambar yang dibutuhkan. Contohnya seperti ini :

Pada contoh di atas, gambar switch ON adalah file toggleON.png, sedangkan gambar switch OFF adalah file toggleOFF.png.

Pengaturan Properti Image

Image1

• Clickable: Aktif
• Picture: toggleON.png
• Visible: Tidak aktif

Image2

• Clickable: Aktif
• Picture: toggleOFF.png
• Visible: Aktif

Pemrograman Image

Berani mencobanya?

Go!