Cara Membuat SwitchCompat di Android Material Design

Assalamualaikum Warahmatullahi Wabarakatuh.

Hallo sahabat developer, ketemu lagi dengan saya Wildan M Athoillah, Disini kita akan melanjutkan seri tutorial mengenai Android Material Design, materi yang akan kita bahas kali ini adalah SwitchCompat Widget, SwitchCompat merupakan sebuah widget yang mirip seperti tuas ON/OFF, widget ini mirip dengan widget Switch dan ToggleButton, hanya saja SwitchCompat mempunyai tampilan yang lebih menarik dibandingkan kedua widget tersebut.

SwitchCompat memiliki dua state, yaitu true dan false, didalam aplikasi biasanya komponen ini digunakan pada menu pengaturan, yaitu untuk mengaktifkan dan menonaktifkan fitur tertentu. Pada tutorial ini kita akan belajar membuat project sederhana dengan menggunakan SwitchCompat Material Design.

Materi lainnya yang direkomendasikan:

• Cara Membuat Custom Toolbar Material Design
• Tutorial Membuat Navigation Drawer di Android Studio
• Cara Membuat Swipe Refresh Material Design
• Membuat Animasi dan Sub Menu pada Floating Action Button
• Cara Membuat TabLayout di Android Material Design

Cara Membuat SwitchCompat di Android Material Design

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Pertama masukan beberapa library berikut ini didalam dependensies pada file build.gradle (app level), untuk kebutuhan komponen material design kita.

implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:support-v4:27.1.1'
implementation 'com.android.support:design:27.1.1'

3) Buka file activity_main.xml kalian, disini kita tambahkan 1 buah SwitchCompat, pada widget tersebut kita akan hanya akan menggunakan Style bawaan dari komponen SwitchCompat.

<?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:layout_height="match_parent"
    android:gravity="center"
    tools:context="android.cianjur.developer.net.materialdesignexample.MainActivity">

    <android.support.v7.widget.SwitchCompat
        android:id="@+id/switchcompat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Mode Tidur"
        android:textSize="15sp"
        android:textStyle="bold"
        tools:ignore="HardcodedText" />

</RelativeLayout>

4) Selanjutnya buka class MainActivity.java kalian, pada class tersebut kita akan membuat sistem pada SwitchCompat, dimana saat user mengganti tuas menjadi ON(true)/OFF(false), maka akan muncul pesan tertentu.

package android.cianjur.developer.net.materialdesignexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SwitchCompat;
import android.widget.CompoundButton;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {

    //Deklarasi Variable
    private SwitchCompat switchCompat;
    private CompoundButton.OnCheckedChangeListener changeListener;

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

        //Inisialisasi
        switchCompat = findViewById(R.id.switchcompat);

        //Membuat listener untuk menangani kejadian saat SwitchCompat berpidah State
        changeListener = new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

                //Jika SwitchCompat berada di State ON(true)
                if(buttonView.isChecked()){
                    Toast.makeText(MainActivity.this, buttonView.getText()+" Aktif", Toast.LENGTH_LONG).show();
                }else {
                    //Jika SwitchCompat berada di State OFF(false)
                    Toast.makeText(MainActivity.this, buttonView.getText()+" Mati", Toast.LENGTH_LONG).show();
                }
            }
        };

        //Memasang Listener pada SwitchCompat
        switchCompat.setOnCheckedChangeListener(changeListener);
    }
}

Demo:

5) Pada contoh sebelumnya kita menggunakan Style bawaan dari komponen tersebut, kita juga dapat membuat style custom yang dapat disesuaikan warnanya pada widget tersebut.

Caranya buka file res/values/style.xml di project android studio kalian, masukan baris kode berikut ini.

<style name="TECHNOARTSwitch" parent="Theme.AppCompat.Light">
    <!-- Warna yang akan aktif saat berada di State True (30% transparency) -->
    <item name="colorControlActivated">#FFBA0000</item>

    <!-- Warna yang akan aktif saat berada di State False color -->
    <item name="colorSwitchThumbNormal">#FF0072AF</item>

    <!-- Warna Latar Depan (30% transparency) -->
    <item name="android:colorForeground">#FF757575</item>
</style>

6) Buka activity_main.xml, lalu terapkan style tersebut pada komponen SwitchCompat, seperti ini.

<android.support.v7.widget.SwitchCompat
    android:id="@+id/switchcompat"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Mode Tidur"
    android:textSize="15sp"
    android:textStyle="bold"
    tools:ignore="HardcodedText"
    android:theme="@style/TECHNOARTSwitch"/>

Demo:

Sekian dari saya, mohon maaf bila ada kesalahan, jika ada yang ingin ditanyaka, silakan isi kolom komentar dibawah ini.

Wassalamualaikum Warahmatullahi Wabarakatuh.