Cara Membuat Toggle Button pada Android Studio

Assalamualaikum Warahmatullahi Wabarakatuh.

Toggle Button adalah salah satu elemen dasat pada Android Studio. Pada dasarnya Toggle Button berbedan dengan Button biasanya pada Android, Toggle Button mempunyai dua buah state, yaitu ON dan OFF. Toggle Button memiliki fungsi seperti saat kita menyalakan sebuah lampu, kita bisa menyalakan dan juga mematikan saklar tersebut.

Pada tutorial berikut ini, kita akan belajar cara membuat dan juga menggunakan Toggle Button pada Android Studio, disini kita akan mempraktekannya dengan membuat program sederhana beserta penjelasan pengenai program tersebut.

Materi Lainnya Yang Direkomendasikan:

• Tutorial Membuat Checkbox Pada Android Studio
• Cara Membuat RatingBar Material Design Android Studio
• Tutorial Menggunakan RadioButton & RadioGroup Android

Cara Membuat Toggle Button pada Android Studio

Buatlah project baru pada android studio kalian, jika sudah, selanjutnya buka file activity_main.xml pada project tersebut.

Disini kita akan membuat 2 buah Toggle Button, dimana pada kedua Toggle Button tersebut bisa kita set menjadi ON atau OFF. dengan menggunakan kode xml, kalian dapat membuatnya seperti berikut ini.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFF5F5F5"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <ToggleButton
        android:id="@+id/toggle1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Toggle 1"/>

    <ToggleButton
        android:id="@+id/toggle2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Toggle 2"
        android:textOff="Mati"
        android:textOn="Menyala" />

    <Button
        android:id="@+id/cek"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Check" />

</LinearLayout>

Pada contoh tersebut, kita membuat 2 buah ToggleButton, ToggleButton pertama menggunakan label text default dari Toggle Button tersebut. Sedangkan pada Toggle Button Kedua, kita mengubah text label sesuai dengan state nya, jika state nya ON maka tulisan pada labelnya adalah "Menyala", sedangkan jika state nya OFF maka label akan bertuliskan "Mati", Lalu satu buah button lagi yang digunakan untuk mengecek kondisi dari kedua Toggel Button tersebut.

Selain menggunakan kode xml secara manual, Kalian dapat langsung mendrag/drop komponen tersebut yang terdapat pada Pallete, kedalam Activity/Layout. dan Juga atur propertiesnya, seperti id, text, textOff dan TextOn.

Selanjutnya buka file MainActivity.java pada project tersebut, lalu masukan source code berikut ini.

package android.cianjur.developer.net.basicandroid;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final ToggleButton toggle1 = findViewById(R.id.toggle1);
        final ToggleButton toggle2 = findViewById(R.id.toggle2);
        Button Check = findViewById(R.id.cek);
        Check.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Mengecek Kondisi pada ToggleButton 1
                if (toggle1.isChecked()){
                    Toast.makeText(getApplicationContext(), "Toggle 1 MENYALA", Toast.LENGTH_SHORT).show();
                }else{
                    Toast.makeText(getApplicationContext(), "Toggle 1 MATI", Toast.LENGTH_SHORT).show();
                }

                //Mengecek Kondisi pada ToggleButton 2
                if (toggle2.isChecked()){
                    Toast.makeText(getApplicationContext(), "Toggle 2 MENYALA", Toast.LENGTH_SHORT).show();
                }else{
                    Toast.makeText(getApplicationContext(), "Toggle 2 MATI", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

Source codenya cukup sederhana, kita bisa mengecek kondisi pada ToggleButton 1 dan 2 dengan menggunakan Statement if-else, program akan mengecek kondisi pada kedua ToggleButton tersebut, saat Button Check di Klik, lalu menampilkan pesan dari hasil cek kondisi tersebut dengan menggunakan Toast.

Demo:

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.