New Tutorials:   NUMPY    TKINTER    KOTLIN    JAVASCRIPT    SASS/SCSS    PL/SQL    Matplotlib    C++ Programs
CLOSE
   Android  IconSwitch  Android Switch  
   Technology    Programming

Custom Switch using IconSwitch in Android App

         
  DECEMBER 8, 2020   by onlyklohan

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.

custom icon switch in Android

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:

Attribute Description

app:isw_icon_left

It is used to set the left icon of the switch

app:isw_icon_right

It is used to set the right icon of the switch

app:isw_background_color

It is used to set the background color of the switch
app:isw_thumb_color_left It is used to set the left icon thumb color of the switch
app:isw_thumb_color_right It is used to set the right icon thumb color of the switch
app:isw_inactive_tint_icon_left It is used to set the left inactive icon thumb color of the switch
app:isw_inactive_tint_icon_right It is used to set the right inactive icon thumb color of the switch
app:isw_active_tint_icon_left It is used to set the active tint of left icon
app:isw_active_tint_icon_right It is used to set the active tint of right icon
app:isw_default_selection It is used to set the default selection either right or left
app:isw_icon_size It is used to set the icon size

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:

custom icon switch in Android

When switching to dark mode,

custom icon switch in Android

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.


RELATED POSTS



Subscribe and receive amazing posts directly in your inbox.