Cara Menerapkan Switch dan RadioButton di Android Studio

Switch & RadioButton Android Studio

Switch adalah subkelas dari CompoundButton (sebuah tombol dengan dua status, dicentang dan tidak dicentang. Ketika tombol ditekan atau diklik, keadaan berubah secara otomatis). Ini pada dasarnya adalah tombol off / on yang menunjukkan keadaan Switch tersebut saat ini. Tombol ini kurang lebih hampir sama dengan ToggleButton yang sudah di bahas sebelumnya melalui postingan Penerapan SharedPreference.

RadioButton adalah tombol dua status yang dicentang atau tidak dicentang. Tombol ini juga termasuk subkelas dari CompoundButton. Jika sebuah tombol radio belum dicentang, kita dapat mengkliknya untuk membuat tombol radio tersebut dicentang. Setelah tombol radio tersebut dicentang, tombol tersebut tidak bisa di hilangkan centangannya. Jadi, ada perbedaan dengan tombol-tombol lainnya yang termasuk dalam subkelas CompoundButton.

Supaya tombol centang pada sebuah RadioButton bisa hilang, maka diperlukan bantuan dari RadioButton lainnya yang ada dalam 1 group. Dan untuk membuat lebih dari 1 RadioButton, digunakan sebuah RadioGroup. Seperti biasa; untuk menghindari kepala pusing, sebaiknya langsung pada praktek. Karena saya juga tidak ahli dalam ber teori.

Gambar 1 : Contoh Switch & RadioButton

Penerapan Switch & RadioButton

Pada contoh tutorial ini, kita akan membuat sebuah Switch button dan 3 RadioButton yang berada dalam sebuah RadioGroup, seperti gambar 1 di atas. Aktivitas yang digunakan hanya activity_main.xml dengan source kodingan java MainActivity.java. Ketika tombol Switch di klik, maka akan mengganti icon bohlam menjadi icon bohlam lainnya, begitupun untuk RadioButton; ketika salah satu tombol di pilih, akan mengganti icon bohlam ke icon bohlam lainnya. Ukuran icon-icon tersebut pada contoh ini adalah 100x100.

Jumlah seluruh icon bohlam adalah 4 icon bohlam. 3 icon di download dari website flaticon.com lalu mengupload nya ke Android Studio melalui Vector Asset. Sedangkan sisanya dibuat langsung melalui icon yang tersedia di Vector Asset. Jika Anda mengikuti contoh tutorial ini dan ingin menggunakan icon yang sama, Anda bisa mengunduh nya disini. Mengenai cara membuat Vector Asset dengan Icon dari luar Android Studio, Anda bisa melihat tutorial nya pada postingan ini.

Pertama-tama tentunya mempersiapkan project. Jika project sudah ready, maka bukalah activity_main.xml. Untuk membuat Switch, panggil dengan tag <Switch atau bisa juga menggunakan tag <androidx.appcompat.widget.SwitchCompat. Tidak ada perbedaan pada widget tersebut, hanya class yang akan di gunakan nanti  pada source java yang berbeda. Untuk Switch menggunakan class Switch, dan <androidx.appcompat.widget.SwitchCompat menggunakan class SwitchCompat.

Untuk membuat 3 RadioButton dalam 1 group, terlebih dahulu buat RadioGroup dengan tag <RadioGroup, lalu di dalam RadioGroup tersebut, untuk membuat RadioButton adalah dengan tag <RadioButton. Berikut isi lengkap activity_main.xml dari package com.gwnbs.proyekkedua :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:id="@+id/parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/klikdonk"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="40dp"
        android:gravity="center"
        android:textStyle="bold"
        android:textSize="20sp"
        android:text="Klik tombol switch dibawah untuk menghidupkan lampu dan tombol grup dibawah untuk memilih jenis lampu" />

    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hidupkan lampu"
        android:id="@+id/switchs"
        android:layout_marginTop="40dp"
        android:layout_below="@id/klikdonk"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"/>

    <ImageView
        android:id="@+id/lampu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/switchs"
        android:src="@drawable/ic_light"
        android:layout_below="@id/klikdonk"
        tools:ignore="ContentDescription" />

    <TextView
        android:id="@+id/klikdonk2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/lampu"
        android:layout_marginTop="50dp"
        android:layout_marginStart="20dp"
        android:textStyle="bold"
        android:textSize="17sp"
        android:text="Pilih jenis lampu yang Anda mau" />

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:id="@+id/radiogrup"
        android:layout_below="@id/klikdonk2">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Lampu kuning biasa"
            android:id="@+id/lampu1"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Lampu kuning hijau"
            android:id="@+id/lampu2"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Lampu kuning hitam"
            android:id="@+id/lampu3"/>
    </RadioGroup>

</RelativeLayout>

Itu saja. Berikutnya kita menuju ke MainActivity.java. Pertama-tama adalah membuat global variabel untuk ImageView. Maksud dari global variabel disini adalah penetapan variabel berada di luar metode onCreate atau penempatannya berada sejajar dengan metode onCreate tersebut dan berada di atas metode onCreate, tepatnya di bawah public class MainActivity extends AppCompatActivity.

Hal ini supaya class dari variabel tersebut bisa di gunakan pada seluruh metode yang ada di dalam public class MainActivity extends AppCompatActivity. Jika variabel dari sebuah class ditetapkan di dalam metode onCreate, maka class tersebut hanya dapat di gunakan di dalam area metode onCreate itu saja. Sehingga, jika ada metode lain di luar onCreate yang membutuhkan class tersebut, maka harus menetapkan variabel baru lagi untuk class tersebut.

Ketika Anda menetapkan variabel dari sebuah class secara global, namun Anda hanya menggunakan class tersebut dalam 1 metode saja di dalam onCreate, Android Studio secara otomatis akan menyarankan Anda untuk memindahkan variabel tersebut ke dalam metode onCreate. Mudah-mudahan bisa di mengerti, karna saya sendiri kadang tidak mengerti dengan apa yang saya katakan.

Sebenarnya, semua kodingan di MainActivity.java yang akan segera kita lakukan ini semuanya berada di dalam metode onCreate, sehingga untuk penetapan variabel ImageView bisa di lakukan di dalam metode onCreate, namun harus di deklarasikan final. Alasan disini di buat menjadi global variabel adalah sekalin memberitahu Anda (tentunya bagi yang belum tahu)  mengenai peletakan-peletakan variabel ini. Saya harap Anda tidak pusing dengan bahasa penjelasan saya.

private ImageView boklam;

Salin kode di atas dan tempelkan di bawah public class MainActivity extends AppCompatActivity. Setelah itu, di dalam metode onCreate; tetapkan lagi variabel untuk class Switch, dan mendapatkan id dari Switch yang ada di activity_main.xml. Setelah itu, membuat metode listener untuk class Switch tersebut dengan  setOnCheckedChangeListener, lalu secara otomatis akan muncul metode baru lagi di dalamnya yaitu onCheckedChanged.

Di dalam metode onCheckedChanged tersebutlah akan di implementasikan saat tombol Switch di on/off yaitu dengan if else. Dan di dalam if else inilah di tempatkan kode untuk merubah icon dengan menggunakan setImageResource. Salin dan temelkan di bawah setContentView (R.layout.activity-main);

boklam = findViewById(R.id.lampu);
Switch geser = findViewById(R.id.switchs);
geser.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
       if (isChecked) {
            boklam.setImageResource(R.drawable.ic_light_yellow);
            } else {
            boklam.setImageResource(R.drawable.ic_light);
            }
} });

Sampai disini urusan dengan Switch sudah selesai. Sekarang urusan nya dengan RadioGroup dan anak-anak nya, yaitu 3 RadioButton. Sama dengan cara di atas, namun disini yang perlu di tentukan variabelnya adalah RadioGroup. Dan metode yang di gunakan juga sama yaitu setOnCheckedChangeListener, namun untuk implementasi tombol yang di gunakan adalah switch case, bukan if else.

Sebenarnya bisa juga menggunakan if else, namun supaya tidak terlalu banyak simbol kurung kurawal jadi switch case saja. Langsung saja, berikut kode komplit nya untuk RadioButton dan keluarga nya. Salin dan tempel di bawah kodingan Switch :

RadioGroup gruptombol = findViewById(R.id.radiogrup);
gruptombol.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
   case R.id.lampu1 :
       boklam.setImageResource(R.drawable.ic_light_yellow);
       break;
   case R.id.lampu2 :
       boklam.setImageResource(R.drawable.ic_light_yellow_green);
       break;
   case R.id.lampu3 :
       boklam.setImageResource(R.drawable.ic_light_yellow_black);
       break;
}}});

Dan berikut ini isi keseluruhan MainActivity.java dari package com.gwnbs.proyekkedua :

package com.gwnbs.proyekkedua;

import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.ImageView;
import android.widget.RadioGroup;
import android.widget.Switch;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private ImageView boklam;

    @Override    

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        boklam = findViewById(R.id.lampu);
        Switch geser = findViewById(R.id.switchs);
        geser.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override            

            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    boklam.setImageResource(R.drawable.ic_light_yellow);
                } else {
                    boklam.setImageResource(R.drawable.ic_light);
                }
            }
        });

        RadioGroup gruptombol = findViewById(R.id.radiogrup);
        gruptombol.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override            

            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.lampu1 :
                        boklam.setImageResource(R.drawable.ic_light_yellow);
                        break;
                    case R.id.lampu2 :
                        boklam.setImageResource(R.drawable.ic_light_yellow_green);
                        break;
                    case R.id.lampu3 :
                        boklam.setImageResource(R.drawable.ic_light_yellow_black);
                        break;
                }
            }
        });
    }
}

Pengujian Switch dan RadioButton

Sekarang tutorial ini benar-benar sudah berakhir. Di bawah ini sebuah video yang saya upload di Youtube, akunnya baru saya buat barusan tadi. Video di bawah memperlihatkan bahwa penerapan sudah di lakukan dengan baik. Sebenarnya tidak, karna pada tutorial ini, teks-teks yang ada pada activity_main.xml tidak kita ekstrak menjadi sumber String. Ini bisa panjang lagi kalau di jelaskan!

Sekilas Mengenai String

Namun lebih baik di jelaskan, karena tentunya masih ada yang belum tahu mengenai hal itu. Di ekstrak ke sumber string maksudnya adalah teks-teks yang ada pada layout ataupun pada file java di letakan ke file sumber string. File sumber ini berada pada folder res > value > strings.xml. Kenapa perlu di ekstrak ke String?

Pertama, berguna untuk memperpendek isi dari layout atau file java. Misalnya pada layout Anda terdapat komponen TextView yang memiliki teks sebanyak 4000 kata misalnya, Anda dapat memperpendek nya hanya menjadi 1 kata saja dengan mengekstrak nya ke sumber file strings.xml. Dan teks Anda pada komponen TextView tersebut akan berubah menjadi android:text="@string/teks4000". Itu hanya contoh jika Anda menamai sumber file nya dengan teks4000.

Kedua, ketika Anda membutuhkan teks yang sama pada komponen TextView berbeda atau komponen lain yang mensupport penggunaan teks, Anda hanya perlu memanggilnya dari file sumber strings.xml. Cara mengekstrak nya adalah dengan mengarahkan mouse Anda ke teks yang ada pada komponen, lalu akan muncul sugesti Extract string resource. Klik sugestinya lalu tentukan Resoure name nya pada tab konfigurasi yang muncul.

Cara lainnya yang bisa di lakukan adalah dengan mengakses langsung file strings.xml. Sebelum Anda membuat sebuah komponen yang akan berisi teks, buat terlebih dahulu teks nya pada file strings.xml. Contoh membuat nya seperti ini :

<string name="teks4000">teks Anda yang berjumlah 400 kata di letakkan disini</string>

Maka saat Anda membuat sebuah komponen TextView di layout, dan berada pada tahapan membuat atribut text, Anda hanya perlu menggunakan seperti contoh di atas yaitu : android:text="@string/teks4000". 

Sekian dan terima kasih. Jika ada yang ingin di tanyakan silahkan di post di kolom komentar.