Create custom Toggle Button in android with Button ON-OFF Images

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.

android-project-download-code-button

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

drawable hdpi folder

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

on_toggle_button

off_toggle_button

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:

Create custom Toggle Button in android with Button ON-OFF Images

 

off

Click here to download Create custom Toggle Button in android with Button ON-OFF Images project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *