Android Basic Training Course: SwitchCompat Example

    In Android, the "switch button" is the widget that get most updating through SDK levels. Starting with ToggleButton, turn to Switch, and now, form Android Support Libarary v21, we have this new style: SwitchCompat. This new switch button not only acts like a standard android switch which can be dragged by holding, but also works fine from Android API 7.

    In this post, I provide a simple example to explaining the way to use and custom it.

Some important attributes

    In xml, an android.support.v7.widget.SwitchCompat object has some important features we must take our attention:

• android:text: String value ("title") of the SwitchCompat.
• android:textOn: String value of "enable" status (for e.g: "ON").
• android:textOff: String value of "disabled" status (for e.g: "OFF").
• android:showText:  allows writing text on it's drawable thumb button or not (the most interesting it's own feature).

    And the activity layout:

activity_main.xml

<LinearLayout 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:orientation="vertical"
    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:text="Switch with status text"
        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_marginTop="25dp"
        android:text="Switch without status text"
        app:showText="false" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:contentDescription="@string/app_name"
        android:text="Example Button" />

</LinearLayout>

Handling Switch Event

    To make this switch button detect state change events you may need implement CompoundButton.OnCheckedChangeListener interface in your programmatically code (like another CompoundButton):

MainActivity.java

package info.devexchanges.switchcompatexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SwitchCompat;
import android.view.View;
import android.widget.CompoundButton;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private View button;

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

        SwitchCompat switchCompat2 = (SwitchCompat) findViewById(R.id.switch_compat2);
        switchCompat2.setOnCheckedChangeListener(onCheckedChanged());

        button = findViewById(R.id.button);
        switchCompat.setText("fdsfsd");
    }

    private CompoundButton.OnCheckedChangeListener onCheckedChanged() {
        return new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                switch (buttonView.getId()) {
                    case R.id.switch_compat:
                        setButtonState(isChecked);
                        break;
                    case R.id.switch_compat2:
                        setButtonState(isChecked);
                        break;
                }
            }
        };
    }

    private void setButtonState(boolean state) {
        if (state) {
            button.setEnabled(true);
            Toast.makeText(MainActivity.this, "Button enabled!", Toast.LENGTH_SHORT).show();
        } else {
            button.setEnabled(false);
            Toast.makeText(MainActivity.this, "Button disabled!", Toast.LENGTH_SHORT).show();
        }
    }
}

    After running this app, we have this result:

Conclusions

    This widget is easy to use like other CompoundButton (the button with two states, checked and unchecked). Hope with this example, readers may have once more option in the switch button to use in your own applications!

Previous Chapter

Table Of  Contents

Next Chapter

Author : Hong Thai

Share