Skip to content
Related Articles

Related Articles

How to add Cutsom Switch using IconSwitch Library in android?
  • Last Updated : 25 Jun, 2020

In this article, we will learn about how to add Custom Switch in 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 depends 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.

Approach:

  1. Add the support Library in build.gradle file and add dependency in the dependencies section. With the help of this we can directly use the widget in the layout.




    dependencies {         
          implementation 'com.polyak:icon-switch:1.0.0'      
    }         
  2. Add the following code in activity_main.xml file. Here we add the custom switch in our layout. In app:isw_icon_left and app:isw_icon_right, we add the icons from drawable for left and right switch respectively.

    activity_main.xml




    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 
        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>

  3. Now add the following code in the MainActivity.java file. Here we add setCheckChangedListener on our switch which will get invoked if the switch is changed. If left switch is turned on then case LEFT is executed and if right switch is turned on then case RIGHT is executed.

    MainActivity.java




    package org.geeksforgeeks.gfgCustomSwitch;
      
    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;
                        }
                    }
                });
        }
    }

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more,  please refer Complete Interview Preparation Course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :