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.
<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" />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.
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.
<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>
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 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"/>
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 {
}
}
});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.
<?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>
<?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>
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>
