How to customize android Toggle button and change style of toggle buttons.

In this tutorial we are creating whole custom toggle button with two different on-off images. So we are showing images at the place of toggle button using custom xml files. So here is the complete step by step tutorial for Create custom Toggle Button in android with Button ON-OFF Images.

Note: Please download both on,off button icons from below and put inside drawable-hdpi folder.

Download below icons and copy them into drawable-hdpi folder.

How to Create custom Toggle Button in android with Button ON-OFF Images.

Code for MainActivity.java file.

 package com.customtogglebutton_android_examples.com;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MainActivity extends Activity {

 ToggleButton tbutton;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 tbutton = (ToggleButton)findViewById(R.id.toggleButton1);
 
 tbutton.setOnClickListener(new View.OnClickListener() {
 
 @Override
 public void onClick(View v) {
 
 if(tbutton.isChecked())
 {
 Toast.makeText(MainActivity.this, "Toggle button is on", Toast.LENGTH_LONG).show();
 }
 else {
 Toast.makeText(MainActivity.this, "Toggle button is Off", Toast.LENGTH_LONG).show();
 }
 }
 });
 }
}

Code for activity_main.xml layout file.

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 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="com.customtogglebutton_android_examples.com.MainActivity" >

 <ToggleButton
 android:id="@+id/toggleButton1"
 android:textOff=""
 android:textOn=""
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:layout_centerVertical="true"
 android:background="@layout/toggle_button_background"
 />

</RelativeLayout>

Code for toggle_button_background.xml file.

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

Screenshots: