Tutorial Membuat Custom Toggle Button Android

ToggleButton adalah widget untuk menampilkan sebuah tombol yang memiliki dua pilihan keadaan, yaitu, "ON" dan "OFF" atau Checked dan Unchecked. Contoh penerapannya seperti mengaktifkan atau menonaktifkan "Mode Pesawat", "Wifi", "Mobile Data" dan lain sebagainya. MyKode Tutorial akan memberikan contoh Custom Toggle Button Android yang dapat anda pelajari sendiri nantinya.
Anda bisa menambahkan tombol ini untuk layout Anda dengan objek ToggleButton. Di Android 4.0 (Ice Cream Sandwich) memperkenalkan jenis lain dari Toggle Button yang disebut "switch" yang menyediakan "slider control" dimana Anda bisa menambahkan Object Switch di Android 4.0 keatas. Jika Anda ingin mengubah kondisi tombol ini sendiri, Anda dapat menggunakan metode CompoundButton.setChecked() atau CompoundButton.toggle().

Custom Toggle Button Android
Custom Toggle Button Android
Android Switched Button
Switches (di Android 4.0+)
Toggle Button
Toggle buttons

Menanggapi Toggle Button jika ditekan pengguna

Untuk mendeteksi pengguna ketika mengaktifkan button atau switch, buat sebuah objek CompoundButton.OnCheckedChangeListener dan menetapkan ke tombol dengan memanggil setOnCheckedChangeListener(). Sebagai contoh :

1. Konsep Custom Toggle Button Android

Kita akan membuat Toggle seperti yang ada di Expanded. Ini sebagai bayangan dari tampilan yang akan kita buat. Tampilan UI ini berada di kode XML.
Konsep dan ide mengenai Custom Toggle Button yang akan kita buat nanti yaitu ketika smartphone belum rooted maka tampilkan pesan dan jangan lakukan apapun yang artinya semua toggle tidak akan bekerja. Dan ketika smartphone sudah rooted, pengguna diijinkan dari mendapatkan tindakan ketika tombol ditekan dengan menampilkan dialog terlebih dahulu atau tidak. Kita menggunakan library Libsuperuser dari ChainFire untuk mengakses hak akses root di Android. Tindakan - tindakan ini kita lakukan di kode Java.

2. Format Custom Toggle Button

Secara default kode widget Toggle Button adalah seperti berikut :

Itu hanya satu Toggle Button, di tampilan nanti akan terdiri dari banyak Toggle Button sehingga kita akan membingkainya dalam satu wadah LinearLayout sebagai Custom View. Didalam LinearLayout tersebut terdapat banyak Toggle Button. Di java akan menjadi "public class NamaKelas extends LinearLayout" sedangkan di XML di UI akan menjadi seperti ini :

Kemudian kita akan menaruhnya di layout activity_main.xml (ibaratkan Expanded), sehingga akan menjadi seperti ini :

3. Membuat Project Baru Custom Toggle Button Android

Anda bisa membuat project gradle baru dengan menggunakan tools IDE untuk pengembangan aplikasi di platform Android seperti Android Studio, Eclipse, atau AIDE Mobile.

A. Menambahkan Library LibSuperUser

Buka /app/build.gradle dan tambahkan libsuperuser di dependencies.

B. Custom drawable toggle button dengan selector "android:state_checked"

Untuk membuat Button Toggle menggunakan kondisi dua image tanpa text ON/OFF seperti defaultnya, kita buat selector xml untuk meng-handle-nya.
Tambahkan beberapa images.png untuk ON dan OFF dan selector.xml ke folder Res. Misalny untuk wifi wifi_on.png, wifi_off.png, dan wifi_selector.xml. Lakukan hal tersebut ke semua ToggleButton dan sebagai contoh untuk wifi_selector.xml berikut kode xml-nya :

Yang artinya ketika tombol WiFi di checked tampilkan image wifi_on.png dan unchecked untuk wifi_off.

C. File toggle_view.xml

Buat file xml baru di res/layout/ beri nama toggle_view.xml dan letakkan beberapa widget ToggleButton di dalam LinearLayout seperti berikut ini. Perhatikan baik-baik sehingga tidak terjadi mismatch tag.

D. Custom Dialog View, dialog_view.xml

Agar pengguna bisa berinteraksi dengan aplikasi diperlukan dialog ini. Ketika tombol ToggleButton ditekan akan menampilkan dialog terlebih dahulu kemudian pengguna bisa memilih untuk melanjutkan OK atau membatalkan Batal.
Dialog kita akan menggunakan custom view yang mengambil dari file xml yang berisi widget ImageView, TextView, dan Button di dalam LinearLayout. Kita akan menghandle wadah tersebut di kode Java nanti untuk meletakkan objek tertentu. Misalnya ImageView kita letakkan wifi_on.png, TextView kita letakkan pesan dan Button sebagai tombol konfirmasi.
Buat file baru dialog_view.xml di folder res/layout/ dan isikan kode xml berikut :

1. File MainActivity.java

MainActivity.java ibaratkan PhoneStatusBar.smali, karena kita tidak akan mengedit apapun di PhoneStatusBar.smali maka kita juga tidak akan menambahkan apapun disini.
Berikut kode MainActivity.java

2. Kode - kode ToggleView.java

Kita akan membahas bagian per bagian kode dari ToggleView.java. Anda bisa membaca keterangan-keterangannya di kodenya secara langsung karena dengan menambahkan komentar secara langsung memudahkan kita membaca kode di masa depan jika kita ingin melihat kodenya lagi.
Buatlah file dengan class baru ToggleView.java dengan menjadikannya sebagai LinearLayout. Dan Berikut Cunstructor parameters-nya. Serta gambaran-gambaran kode-kodenya secara sederhana sebagai desain jalan kodenya.

Source Code Project Custom Toggle Button Android

Anda bisa melihat dan mendownload source code Custom Toggle Button Android di GitHub.
Download Source Code

Mendapatkan Smali Custom Toggle Button Android

Anda cukup decompiling file apk yang sudah anda build menggunakan Apktool Mobile, AdvancedApkTool BDFreak atau tool lain yang sejenisnya. Ambil file-file yang diperlukan saja.

Memasang di UI / Layout Kosong

Taruh smali yang anda dapatkan di tempatnya masing - masing. Anda hanya perlu memasang Kode xml Custom Toggle Button Android dimanapun anda mau. Kodenya seperti yang ada di activity_main.xml

Guide Smali Files Custom Toggle Button Android


Silahkan dimodifikasi sendiri menurut kreatifitas masing-masing. Anda bisa menampilkan hasil tampilan aplikasi anda sendiri di dalam komentar dibawah sebagai dukungan serta jika tutorial ini sangat bermanfaat bagi anda. Jangan Lupa tinggalkan komentar Anda.
Think Simple Make it Simple. Happy Coding...! :)

Credit + Referensi

Itulah tutorial dan contoh membuat Custom Toggle Button Android yang menyerupai power toggle di expanded dalam SystemUI.apk. Anda bisa menaruh kode utama dimana saja yang anda mau Aplikasi ini bekerja baik di Android yang sudah memiliki hak akses root.
Terimakasih sudah membaca artikel Custom Toggle Button Android semoga bermanfaat.

Artikel Terkait

Tutorial Membuat Custom Toggle Button Android
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

4 komentar

14 October 2016 at 18:04 delete

mastah suyono
ane request tut dcrc miui8 lollipop dong.....
ditunggu ya....

Reply
avatar
14 October 2016 at 18:05 delete

mastah suyono
ane request tut dcrc miui8 lollipop dong.....
ditunggu ya....

Reply
avatar
3 December 2016 at 21:21 delete

fc om pas di pencet di menu boot options sama restrat ui..

Reply
avatar