How to Add Custom Switch using IconSwitch Library in Android?

Last Updated : 10 Feb, 2025

In this article, we will learn about how to add Custom Switch to our project. As we know the Switch has only two states ON and OFF. In Custom Switch, we add icons that can be used for different purposes depending upon our requirements. With the help of this library IconSwitch, we can easily add a custom switch and it animates automatically when the user changes the state.

Note: This library is now deprecated and will not work in newer versions of Android Studio.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Adding Dependency to the build.gradle.kts File

Go to Module build.gradle.kts file and add this dependency and click on Sync Now button.

implementation ("com.polyak:icon-switch:1.0.0")

Step 3: Working with the Main XML Layout

Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

activity_main.xml:

XML

<androidx.constraintlayout.widget.ConstraintLayout 
    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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.polyak.iconswitch.IconSwitch
        android:id="@+id/icon_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:isw_default_selection="right"
        app:isw_icon_left="@drawable/ic_algorithm"
        app:isw_icon_right="@drawable/ic_online_course"
        app:isw_icon_size="25dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail. Here we add setCheckChangedListener on our switch which will get invoked if the switch is changed. If the left switch is turned on then case LEFT is executed and if the right switch is turned on then case RIGHT is executed.

MainActivity.java

package org.geeksforgeeks.demo;

import android.os.Bundle;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.polyak.iconswitch.IconSwitch;

public class MainActivity extends AppCompatActivity {

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

        IconSwitch iconSwitch = findViewById(R.id.icon_switch);
        iconSwitch.setCheckedChangeListener(new IconSwitch.CheckedChangeListener() {
            @Override
            public void onCheckChanged(IconSwitch.Checked current) {
                switch (current) {
                    case LEFT:
                        Toast.makeText(MainActivity.this, "Algorithms", Toast.LENGTH_SHORT).show();
                        break;
                    case RIGHT:
                        Toast.makeText(MainActivity.this, "Courses", Toast.LENGTH_SHORT).show();
                        break;
                }
            }
        });
    }
}

MainActivity.kt

package org.geeksforgeeks.demo

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.polyak.iconswitch.IconSwitch

class MainActivity : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val iconSwitch = findViewById<IconSwitch>(R.id.icon_switch)
        iconSwitch.setCheckedChangeListener(object : CheckedChangeListener() {
            fun onCheckChanged(current: IconSwitch.Checked?) {
                when (current) {
                    LEFT -> Toast.makeText(this@MainActivity, "Algorithms", Toast.LENGTH_SHORT)
                        .show()
                    RIGHT -> Toast.makeText(this@MainActivity, "Courses", Toast.LENGTH_SHORT).show()
                }
            }
        })
    }
}