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"?> 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.Bundleimport android.widget.Toastimport androidx.appcompat.app.AppCompatActivityimport 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() } } }) }} |
