Custom Switch using IconSwitch in Android App

We have seen the custom switches in many apps such as Facebook, Telegram, YouTube, WhatsApp, Google, Gmail, etc. It is mainly used to allow the user to easily understand the function of the button, for example, a simple switch with 2 icons (Sun and a moon) we can easily understand that this switch is for dark and light mode. Another example is a switch with 2 icons (mute and sound) that is used to show the user that using this switch you can mute the audio or increase the volume.

A custom switch will make the UI of your Android app more beautiful and interactive and also help the user to quickly understand the use of any switch that you add to your App.

What is IconSwitch?

With the simple switch available in the android studio the above things are not possible so to do so we need some external library.

IconSwitch is a custom switch widget library for Android to create custom switches of different types and make our app more attractive and professional. You can learn more about icon switch from GitHub here.

So let's implement a simple IconSwitch in our android app.

Step 1: Create a new Project

1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to setup Android Studio and create your first Android project)

2. Choose "Empty Activity" from the project template window and click Next

3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial), and minimum SDK(we are using API 19: Android 4.4 (KitKat))

4. Next click on the Finish button after filling in the above details

5. Now, wait for the project to finish the building.

Step 2: Adding the IconSwitch dependency

To show the custom switch in our app we also have to implement the IconSwitch in our app, to do so follow the below steps.

Go to Gradle Scripts -> build.gradle (Module: app) section and import below dependencies and click the "sync Now" shown at the top:

dependencies {
    // Adding Icon Switch Library
    implementation 'com.polyak:icon-switch:1.0.0'
}

Step 3: Modify activity_main.xml

Before applying changes to the activity_main.xml file we need different images of icons to show in the switch, so you can download any 2 icon images and paste the icons in the app -> res -> drawable

Now go to app -> res -> layout -> activity_main.xml and add the IconSwitch as shown below:

<!-- Icon Switch -->
<com.polyak.iconswitch.IconSwitch
    android:layout_marginTop = "80dp"
    android:layout_alignParentTop = "true"
    app:isw_icon_left = "@drawable/light_mode"
    app:isw_icon_right = "@drawable/dark_mode"
    app:isw_background_color = "#2196F3"
    app:isw_thumb_color_left = "#FFC107"
    app:isw_thumb_color_right = "#0C0101"
    app:isw_inactive_tint_icon_left = "#FFEB3B"
    app:isw_inactive_tint_icon_right = "#100A0A"
    app:isw_active_tint_icon_left = "#FFFFFF"
    app:isw_active_tint_icon_right = "#FFFFFF"
    android:id = "@+id/iconSwitch"
    android:layout_width = "wrap_content"
    android:layout_height = "wrap_content"
    android:layout_centerHorizontal = "true"
    android:layout_centerVertical = "true"
    app:isw_default_selection = "left"
    app:isw_icon_size = "40dp" />

The complete code of activity_main.xml is show below:

<?xml version = "1.0" encoding =  "utf-8" ?>
<RelativeLayout
    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:layout_width = "match_parent"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity">

    <!-- Icon Switch -->
    <com.polyak.iconswitch.IconSwitch
        android:layout_marginTop = "80dp"
       android:layout_alignParentTop = "true"
        app:isw_icon_left = "@drawable/light_mode"
        app:isw_icon_right = "@drawable/dark_mode"
        app:isw_background_color = "#2196F3"
        app:isw_thumb_color_left = "#FFC107"
        app:isw_thumb_color_right = "#0C0101"
        app:isw_inactive_tint_icon_left = "#FFEB3B"
        app:isw_inactive_tint_icon_right = "#100A0A"
        app:isw_active_tint_icon_left = "#FFFFFF"
        app:isw_active_tint_icon_right = "#FFFFFF"
        android:id = "@+id/iconSwitch"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_centerHorizontal = "true"
        android:layout_centerVertical = "true"
        app:isw_default_selection = "left"
        app:isw_icon_size = "40dp" />

</RelativeLayout>

Android IconSwitch Attributes:

Following are the attributes available in the IconSwitch:

Step 4: MainActivity.java file

Now open the MainActivity.java file and import some basic classes as shown below:

//importing required classes
import android.widget.Toast;
import com.polyak.iconswitch.IconSwitch;

Next we create the object of IconSwitch object inside MainActivity class as shown below:

// creating object of  IconSwitch
private IconSwitch iconSwitch;

Now inside the onCreate method we initialize the IconSwitch and add the CheckedChangeListener and show a simple Android Toast message to the user according to the value as shown below:

// initializing the IconSwitch object
iconSwitch = (IconSwitch) findViewById(R.id.iconSwitch);

// IconSwitch  Checked Change Listener
iconSwitch.setCheckedChangeListener(new IconSwitch.CheckedChangeListener() 
{
    @Override
	public void onCheckChanged(IconSwitch.Checked current) {
		//simple witch case
		switch (current) {

		case LEFT:
			//showing simple toast message to the user
			Toast.makeText(MainActivity.this, "Light Mode", Toast.LENGTH_SHORT).show();
			break;

		case RIGHT:
			//showing simple toast message to the user
			Toast.makeText(MainActivity.this, "Dark Mode", Toast.LENGTH_SHORT).show();
			break;
		}
	}
});

The complete code of the MainActivity.java is shown below:

package com.studytonight.project;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

//importing required classes
import android.widget.Toast;
import com.polyak.iconswitch.IconSwitch;

public class MainActivity extends AppCompatActivity {

	// creating object of  IconSwitch
	private IconSwitch iconSwitch;

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

		// initializing the IconSwitch object
		iconSwitch = (IconSwitch) findViewById(R.id.iconSwitch);

		// IconSwitch  Checked Change Listener
		iconSwitch.setCheckedChangeListener(new IconSwitch.CheckedChangeListener() {@Override
			public void onCheckChanged(IconSwitch.Checked current) {
				//simple witch case
				switch (current) {

				case LEFT:
					//showing simple toast message to the user
					Toast.makeText(MainActivity.this, "Light Mode", Toast.LENGTH_SHORT).show();
					break;

				case RIGHT:
					//showing simple toast message to the user
					Toast.makeText(MainActivity.this, "Dark Mode", Toast.LENGTH_SHORT).show();
					break;
				}
			}
		});
	}
}

Output:

In the below snapshots, you can see how the IconSwitch will look in the android application.

When App is opened first time:

When switching to dark mode,

Conclusion:

In just 4 simple steps we have integrated and shown you the basic example for creating a Custom switch using Icon Switch in your android app. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.

You may also like:

• Menu in Android

• How to add a ScrollView in Android App

• Alert Dialog Using SweetAlert Dialog in Android App

• Gradient Drawable in Android - Create Gradient Backgrounds