ZOFTINO.COM android and web dev tutorials

Android Toggle Button

Toggle button represents two states and state changes between on and off every time ToggleButton is clicked. Like CheckBox, it can be used to capture input for two state input fields.

In this post, I’ll show how to style toggle button, create custom styles for it, and customize toggle button by setting custom background and button.

Toggle Button Element

<ToggleButton
    android:id="@+id/coupon_opted"
    android:layout_width="114dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp" />

Toggle Button Default Style

Below screen shot shows toggle button in on and off state with default material style when application theme is set to material theme Theme.AppCompat.

android toggle button app compact style

Toggle Button Custom Style

You can customize appcompact material theme to change Toggle button colors. You can customize toggle button text color, toggle button on color, toggle button off color, toggle button normal color, toggle button highlight color by setting textColorPrimary, colorAccent, colorControlNormal, colorButtonNormal, and colorControlHighlight color attributes respectively in your custom theme. Apply the defined custom theme at application level by setting theme attribute of application element in manifest xml file.

android toggle button app compact material custom style
<style name="AppThemeToggle" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:textColorPrimary">#ff7043</item>
    <item name="colorAccent">#26a69a</item>
    <item name="android:colorControlNormal">#f9a825</item>
    <item name="android:colorControlHighlight">#c51162</item>
    <item name="android:colorButtonNormal">#b9f6ca</item>
</style>

Individual Toggle Button Custom Style

Above toggle button customization was done at application theme level. Customizing colors at application level impacts not only all toggle buttons but also other ui controls in your application.

If you want to customize particular toggle buttons, you can create custom style by inheriting toggle button material theme Widget.Material.Light.Button.Toggle and setting required properties as shown below.

<style name="MyToggle" parent="@android:style/Widget.Material.Light.Button.Toggle">
    <item name="android:textColorPrimary">#d84315</item>
    <item name="colorAccent">#0288d1</item>
    <item name="android:colorControlNormal">#f9a825</item>
    <item name="android:colorControlHighlight">#880e4f</item>
    <item name="android:colorButtonNormal">#b9f6ca</item>
</style>

Toggle Button Text

Toggle button text can be change by setting testOn and textOff attributes in xml or code. Below xml code and screenshot show textOn and textOff attribute setting and its output.

<ToggleButton
        android:id="@+id/my_toggle"
	. . .
        android:textOn="Coupons"
        android:textOff="Deals"/>
android toggle button text on and text off setting

Toggle Button Click Event Handling

Toggle button event can be handled by adding CompoundButton.OnCheckedChangeListener to it using setOnCheckedChangeListener method as shown below. Using isChecked parameter passed to onCheckedChanged method, you can get toggle state of toggle button.

ToggleButton couponOptedToggle = (ToggleButton) findViewById(R.id.coupon_opted);

couponOptedToggle.setOnCheckedChangeListener(
    new CompoundButton.OnCheckedChangeListener() {
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    	if (isChecked) {
    		Toast.makeText(ToggleButtonActivity.this,
    		"Opted for coupons", Toast.LENGTH_SHORT).show();
    	} else {

    	}
    }
});

Custom Toggle Button

You can create custom toggle button by defining xml drawable and using it as background of toggle button by setting background attribute to it. Since color of lines of toggle button need to change based on the check state, a selector is defined for it.

Custom toggle button drawable xml

 <?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="4dp"
    android:insetTop="4dp"
    android:insetRight="4dp"
    android:insetBottom="4dp">
    <layer-list android:paddingMode="stack">
        <item>
            <ripple android:color="?attr/android:colorControlHighlight">
                <item>
                    <shape android:shape="rectangle"
                        android:tint="?attr/android:colorButtonNormal">
                        <corners android:radius="8dp"/>
                        <solid android:color="@android:color/white" />
                        <padding android:left="8dp"
                            android:top="6dp"
                            android:right="8dp"
                            android:bottom="6dp" />
                    </shape>
                </item>
            </ripple>
        </item>
        <item android:gravity="left|fill_vertical">
            <shape android:shape="rectangle">
                <corners android:radius="4dp"/>
                <size android:width="8dp" />
                <solid android:color="@color/toggle_color" />
            </shape>
        </item>
        <item android:gravity="right|fill_vertical">
            <shape android:shape="rectangle">
                <corners android:radius="4dp"/>
                <size android:width="8dp" />
                <solid android:color="@color/toggle_color" />
            </shape>
        </item>
    </layer-list>
</inset>
 

Custom toggle button color selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false"
        android:alpha="0.9"
        android:color="?attr/android:colorControlNormal" />
    <item android:state_checked="true"
        android:color="?attr/android:colorControlActivated" />
    <item android:color="?attr/android:colorControlNormal" />
</selector>
 

Custom toggle button output

android custom toggle button

Toggle Button Image

You can customize toggle button by creating image selector drawable and setting it as button for ToggleButton.

To customize toggle button this way, you need to provide your own images for two states. In order for the custom button to appear properly, you need to provide different sizes of images for different screen sizes by saving them in the appropriate size specific drawable folders and also set ToggleButton layoutWidth and layoutHeight to match image size.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/toggle_on" />
    <item android:drawable="@drawable/toggle_off" />
</selector>
android toggle button image