Skip to content
Related Articles

Related Articles

How to Add Custom Switch using IconSwitch Library in Android?

Improve Article
Save Article
  • Last Updated : 30 Aug, 2022
Improve Article
Save Article

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.

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 File

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

implementation 'com.polyak:icon-switch:1.0.0'

Step 3: Working with the XML Files

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.

XML




<?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"
    tools:context=".MainActivity">
  
    <com.polyak.iconswitch.IconSwitch
        android:id="@+id/icon_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        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" />
</RelativeLayout>

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. 

Java




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;
                }
            }
        });
    }
}

Kotlin




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)
          
        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()
                }
            }
        })
    }
}

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!