Decorating Switch and ToggleButton in Android Android 16.06.2017

Switch button

In Android, Switch is a two-state toggle switch widget that can select between two options. It is used to display checked and unchecked state of a button providing slider control to user. Switch is a subclass of CompoundButton. It is basically an off/on button which indicate the current state of Switch. It is commonly used in selecting on/off in Sound, Bluetooth, WiFi etc. But standard Android Switch supports the drag animations is only available from SDK v14 and above.

AppCompat V7 bring new 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 'com.android.support:appcompat-v7:21.0.3'
}

Define in layout

<android.support.v7.widget.SwitchCompat
    android:id="@+id/swStatus"
    android:text="Status"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"/>

We can check the current state of a SwitchCompat programmatically by using isChecked() method. This method returns a Boolean value means true or false. If a SwitchCompat is checked then it returns true otherwise it returns false.

Below is an example code in which we checked the current state of a SwitchCompat.

SwitchCompat swStatus = (SwitchCompat) findViewById(R.id.swStatus);

// check current state of a SwitchCompat (true or false).
Boolean swStatusState = swStatus.isChecked();

We can set listener for click via setOnCheckedChangeListener.

SwitchCompat swStatus = (SwitchCompat)findViewById(R.id.swStatus);
swStatus.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if(isChecked) {
            Toast.makeText(MainActivity.this, "ON", Toast.LENGTH_SHORT).show();
        } else {
            Toast.makeText(MainActivity.this, "OFF", Toast.LENGTH_SHORT).show();
        }
    }
});

There are gravity attribute which is an optional attribute and is used to control the alignment of the text in Switch. We can set text left, right, center, top, bottom, center_vertical, center_horizontal.

android:gravity="left"

There are textOn and testOff attribute which is used for text display of SwitchCompat state. We can set the textOn in XML as well as in the Java class.

android:textOff="No"
android:textOn="Yes"
app:showText="true"

We can define SwitchCompat with custom thumb and track.

Define in layout

<android.support.v7.widget.SwitchCompat
    android:id="@+id/swStatusCustom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:thumb="@drawable/switch_custom_selector"
    app:track="@drawable/switch_custom_track"/>

Create switch_custom_selector.xml in drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape
            android:shape="rectangle"
            android:visible="true"
            android:dither="true"
            android:useLevel="false">
            <solid android:color="#FFFFFF"/>
            <corners
                android:radius="15dp"/>
            <size
                android:width="30dp"
                android:height="30dp" />
            <stroke
                android:width="2dp"
                android:color="#14000000"/>
        </shape>
    </item>

    <item android:state_checked="false">
        <shape
            android:shape="rectangle"
            android:visible="true"
            android:dither="true"
            android:useLevel="false">
            <solid android:color="#FFFFFF"/>
            <corners
                android:radius="15dp"/>
            <size
                android:width="30dp"
                android:height="30dp" />
            <stroke
                android:width="2dp"
                android:color="#14000000"/>
        </shape>
    </item>
</selector>

Create switch_custom_track.xml in drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle"
            android:visible="true"
            android:dither="true"
            android:useLevel="false">
                <solid android:color="#f24972"/>
                <corners
                    android:radius="15dp"/>
                <size
                    android:width="60dp"
                    android:height="30dp" />
        </shape>
    </item>

    <item android:state_checked="false">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle"
            android:visible="true"
            android:dither="true"
            android:useLevel="false">
            <solid android:color="@color/com_facebook_button_border_color_focused"/>
            <corners
                android:radius="15dp"/>
            <size
                android:width="60dp"
                android:height="30dp" />
        </shape>
    </item>
</selector>

Result

Also you can use SwitchButton which provides a convenient way to use and customise a SwitchButton widget in Android. With just resources changed and attrs set, you can create a lifelike SwitchButton of Android 5.0+, iOS, MIUI, or Flyme and so on.

Toggle button

In Android, ToggleButton is used to display checked and unchecked state of a button. ToggleButton basically an off/on button with a light indicator which indicate the current state of toggle button.

XML Attributes used to define a ToggleButton are described below:

• android:textOff. The text for the button when it is not checked.
• android:textOn. The text for the button when it is checked.

<ToggleButton
    android:id="@+id/tbStatus"
    android:text="Status"
    android:textOff="Off"
    android:textOn="On" />

To check current state of a toggle button programmatically we use isChecked() method. This method returns a Boolean value either true or false. If a toggle button is checked then it returns true otherwise it returns false. Below is the code which checks the current state of a toggle button.

ToggleButton tbStatus = (ToggleButton) findViewById(R.id.tbStatus);
Boolean tbStatusState = tbStatus.isChecked();

Below we set the current state of toggle button to checked:

ToggleButton tbStatus = (ToggleButton) findViewById(R.id.tbStatus);
tbStatus.setChecked(true);

There are drawableBottom, drawableTop, drawableRight and drawableLeft attributes that draw the drawable below, top, right and left of the text of ToggleButton.

Below we set the icon to the top of the text of a ToggleButton. In the similar way you can try for other three attribute yourself.

<ToggleButton
    android:id="@+id/tbStatus"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:textOff="Off"
    android:textOn="On"
    android:textColor="#000"
    android:drawableTop="@drawable/ic_launcher" />

Let's create custom ToggleButton.

<ToggleButton
    android:id="@+id/tbStatus"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/tb_custom"/>

Create res/drawable/tb_custom.xml file.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/tb_state_on"
        android:state_checked="true"/>
    <item
        android:drawable="@drawable/tb_state_off"
        android:state_checked="false"/>
</selector>

Create res/drawable/tb_state_on.xml file.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:color="#4c975d" android:width="5dp"/>
        </shape>
    </item>
    <item android:bottom="5dp">
        <shape android:shape="rectangle">
            <solid android:color="#6dd988"/>
        </shape>
    </item>
</layer-list>

Create res/drawable/tb_state_off.xml file.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:color="#b1113e" android:width="5dp" />
        </shape>
    </item>
    <item android:bottom="5dp">
        <shape android:shape="rectangle">
            <solid android:color="#f51354"/>
        </shape>
    </item>
</layer-list>

Result