Belajar Membuat SwitchCompat di Android Material Design

Last Updated on 8 years by Mas Herdi

Hi all, melanjutkan tutorial series saya tentang Material Design di Android, kali ini kita akan belajar membuat salah satu komponen layout pada Android Material Design yaitu SwitchCompat menggunakan Android Studio. SwitchCompat, atau biasa disebut switch, atau switch button, adalah sebuah komponen layout yang mirip seperti tuas ON/OFF. Sama seperti Radio Button, maupun Toggle Button, Switch Compat mempunyai dua state yaitu ON dan OFF. Bedanya hanya pada desain switch compat yang lebih bagus, dan lebih mirip seperti tuas ‘toggle’ yang bisa digeser ke kanan dan ke kiri.

Membuat Switch Compat Material Design di Android dengan Android Studio

Sebelum lanjut ke coding, ada beberapa artikel pre-requisites yang sebaiknya dibaca terlebih dahulu :

• Mengenal Android Material Design
• Tutorial Lengkap Android Material Design
• Membuat Project Hello World dengan Android Studio
• Membuat Color Resources untuk Material Design Theme

Jika sudah, kita akan mulai dengan membuat sebuah project Android baru di Android Studio terlebih dahulu.

Setelah itu update dependencies pada file build.gradle kalian dengan mengimport support-appcompat-v7 library seperti di bawah ini :

dependencies {
    compile 'com.android.support:appcompat-v7:25.1.0'    
}

Pada saat artikel ini ditulis, versi terbaru dari appcompat library adalah 25.1.0, version number ini bisa diganti sesuai dengan keinginan kalian.

Kemudian, pada file activity_main.xml, kita akan membuat dua buah komponen SwitchCompat. SwitchCompat yang pertama menggunakan tema bawaan Material Design, dan SwitchCompat yang kedua akan kita style menggunakan tema buatan kita sendiri 🙂

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.SwitchCompat
        android:id="@+id/sw_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:text="Toggle Switch Default" />

    <android.support.v7.widget.SwitchCompat
        android:id="@+id/sw_button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:textColor="@color/cardview_light_background"
        android:text="Toggle Switch Custom"
        android:theme="@style/TWOHSwitch" />

</LinearLayout>

Untuk membuat tema SwitchCompat, kita bisa tambahkan kode berikut pada file res/values/styles.xml, yang ada di res/ folder pada project Android Studio :

    <style name="TWOHSwitch" parent="Theme.AppCompat.Light">
        <!-- active thumb & track color (30% transparency) -->
        <item name="colorControlActivated">#FFD500F9</item>

        <!-- inactive thumb color -->
        <item name="colorSwitchThumbNormal">#FF311B92</item>

        <!-- inactive track color (30% transparency) -->
        <item name="android:colorForeground">#FF757575</item>
    </style>

Kalian bisa mengaplikasikan tema yang sudah kalian buat dengan menambahkannya di atribut android:theme, pada element SwitchCompat, seperti contoh xml di atas.

Pada MainActivity.java, tambahkan kode berikut dan jangan lupa MainActivity dibuat meng-extends dari AppCompatActivity :

/**
 * Created by Hafizh Herdi on 1/4/2017.
 */

public class SwitchCompatActivity extends AppCompatActivity {

    private SwitchCompat switchCompat1;
    private SwitchCompat switchCompat2;
    private CompoundButton.OnCheckedChangeListener checkedChangeListener;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        setContentView(R.layout.activity_switch_view);
        switchCompat1 = (SwitchCompat) findViewById(R.id.sw_button);
        switchCompat2 = (SwitchCompat) findViewById(R.id.sw_button2);
        super.onCreate(savedInstanceState);

        checkedChangeListener = new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                Toast.makeText(SwitchCompatActivity.this,compoundButton.getText()+" is "+compoundButton.isChecked(),Toast.LENGTH_SHORT).show();
            }
        };

        switchCompat1.setOnCheckedChangeListener(checkedChangeListener);
        switchCompat2.setOnCheckedChangeListener(checkedChangeListener);
    }
}

Pada kode di atas, kita hanya menambahkan OnCheckedChangeListener, sehingga apabila state pada switch compat diubah (on/off) maka akan muncul Toast yang memberitahukan current state dari tombol switch tersebut.

Demo

Jika sudah, let’s all rock ‘n roll 🙂

Contoh SwitchCompat di Android

Bisa dilihat pada gambar di atas :). Bagian atas adalah Switch Compat yang memakai default theme, sedangkan di bagian bawah adalah yang memakai custom theme, ada perbedaan warna di sana. Dan kemudian ketika kita ubah state switch-nya, akan muncul Toast seperti di bawah.

That’s all ! Semoga membantu! Dan jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya ya, dengan terlebih dahulu follow dan star project tersebut. 🙂 Silahkan bertanya di bagian komentar jika ada yang kurang jelas. 😀