Android SwitchCompat Example

Being an Android developer I always had a development oriented approach. But once you start exploring things from a learning perspective, discoveries are stupendous. I never realized the full potential of AppCompat library in Android, I always thought; it just increases the size of my APK. Jokes apart, in recent turn of events I stumbled upon a situation where I wanted to use an android switch button in my app, where I should be able to drag that switch to an “On” or an “Off” state. To my dismay even this small task created problems. As a standard Android switch which supports the drag animations is only available from SDK v14 and above. I believe many of you must have faced this issue. This inspired me to write this Android switch button example.

Recently in October 14, an update to AppCompat V7 was released, featuring version 21. This version majorly addressed the material design compatibility issues. But a great feature that missed out the spotlight was the Android SwitchCompat widget. This Android switch button not only acts like a standard android switch which can be dragged by holding, but also works fine in Android API 7 and above if AppCompat v7 r21 is included in your project:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.3'
}

In this example I would show how to make an Android switch button work in all Android API versions above 7.

Android SwitchCompat Example

In Android if you want to use a switch widget, which could be dragged into an “on” or “off” position with animation, you can use Android SwitchCompat widget. This widget can work perfectly with any Android 7+ SDK. It is supported through the AppCompat v7 library, which can be included in a project through gradle if you are using Android Studio or through a library project in Eclipse IDE. Lets have look at the Android SwitchCompat Example below:

<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"
                android:background="#FFFFFF"
                android:paddingBottom="@dimen/activity_vertical_margin"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                tools:context=".MainActivity">

    <android.support.v7.widget.SwitchCompat
        android:id="@ id/switch_compat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="50dp"
        android:layout_marginStart="50dp"
        android:layout_marginTop="25dp"
        android:checked="false"
        android:text="SwitchCompat (SDK v7 )"
        android:textOff="OFF"
        android:textOn="ON"
        app:showText="true"/>

    <android.support.v7.widget.SwitchCompat
        android:id="@ id/switch_compat2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@ id/switch_compat"
        android:layout_marginLeft="50dp"
        android:layout_marginStart="50dp"
        android:layout_marginTop="25dp"
        android:text="SwitchCompat (SDK v7 )"
        app:showText="false"/>

    <ImageView
        android:id="@ id/imageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@mipmap/truiton_short"/>

</RelativeLayout>

Android SwitchCompat example screen would look like the screen shot below:

An interesting feature in SwitchCompat button is that you can write text on its drawable thumb button. In the above XML I have shown two buttons, one with app:showText="true" and other without it. To use this property you may need to include xmlns:app="http://schemas.android.com/apk/res-auto" in the parent layout, as shown above. To make this Android switch button detect state change events you may need implement CompoundButton.OnCheckedChangeListener interface in your main activity:

package com.truiton.switchcompatexample;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.SwitchCompat;
import android.util.Log;
import android.widget.CompoundButton;


public class MainActivity extends ActionBarActivity implements
        CompoundButton.OnCheckedChangeListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        SwitchCompat switchCompat = (SwitchCompat) findViewById(R.id
                .switch_compat);
        switchCompat.setSwitchPadding(40);
        switchCompat.setOnCheckedChangeListener(this);

        SwitchCompat switchCompat2 = (SwitchCompat) findViewById(R.id
                .switch_compat2);
        switchCompat2.setSwitchPadding(40);
        switchCompat2.setOnCheckedChangeListener(this);
    }

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        switch (buttonView.getId()) {
            case R.id.switch_compat:
                Log.i("switch_compat", isChecked + "");
                break;
            case R.id.switch_compat2:
                Log.i("switch_compat2", isChecked + "");
                break;
        }

    }
}

There is not much to explain in the above code. MainActivity simply implements CompoundButton.OnCheckedChangeListener interface to detect the state changes of Android SwitchCompat button. An interesting fact that turned up while I was developing this was that, somehow SwitchCompat does not acknowledges the padding if it is set through the xml. To set padding in an Android SwitchCompat widget you may need to do it through code, as shown above.

Hope with this Android switch button example, I would see more apps in market where a switch button can be dragged. Connect with us through Facebook, Google+, and Twitter for more Android news.

Mohit Gupt

Born in New Delhi, India. A software engineer by profession, an android enthusiast and an evangelist. My motive here is to create a group of skilled developers, who can develop something new and good. Reason being programming is my passion, and also it feels good to make a device do something you want. In a very short span of time professionally I have worked with many tech firms. As of now too, I am employed as a senior engineer in a leading tech company. In total I may have worked on more than 20 projects professionally, and whenever I get spare time I share my thoughts here at Truiton.