Android Switch Button




















Today i put some Nice UI interface like as on and off switch.

In, Android we have ToggleButton.which functionality is same as on-off switch.And it displays checked/unchecked state using light with ON and OFF text.

But in Android 4.0+ have switch.And it allow user to change a settings between two stats.Suppose i have wi-fi option in my app then i used togglebutton or switch for  turn on or turn off  wifi.

you can check togglebutton state using onClickListener and also using OnCheckedChangeListener.i think OnCheckedChangeListener is right way to check state of togglebutton.

 here is OnCheckedChangeListener to check state of togglebutton.

tButton.setOnCheckedChangeListener(new OnCheckedChangeListener() {

@Override
public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {

if(isChecked){
tvStateofToggleButton.setText("ON");
}else{
tvStateofToggleButton.setText("OFF");
}

}
});

in onCheckedChanged method have two parameters.the second parameter is boolean.If isChecked is true then ToggleButton is ON state.And  isChecked is false then ToggleButton is OFF.

When you need customize togglebutton you have to set some attributes in togglebutton like as,

android:button="@null"
android:textOff=""
android:textOn=""

and here i add background for togglebutton for customize as per need.
 

android:background="@drawable/bgtoggle"

Here i put ToggleButton  in MainActivity.java.

MainActivity.java

package com.samir;

import android.app.Activity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.TextView;
import android.widget.ToggleButton;

public class MainActivity extends Activity {
ToggleButton tButton;
    TextView tvStateofToggleButton;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

tButton = (ToggleButton) findViewById(R.id.toggleButton1);
tvStateofToggleButton=(TextView)findViewById(R.id.tvstate);
tvStateofToggleButton.setText("OFF");
tButton.setOnCheckedChangeListener(new OnCheckedChangeListener() {

@Override
public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {

if(isChecked){
tvStateofToggleButton.setText("ON");
}else{
tvStateofToggleButton.setText("OFF");
}

}
});
}
}



main.xml



<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#bfbfbf"
    android:orientation="vertical" >

    <ToggleButton
        android:id="@+id/toggleButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/bgtoggle"
        android:button="@null"
        android:textOff=""
        android:textOn="" />

    <TextView
        android:id="@+id/tvstate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toggleButton1"
        android:layout_centerHorizontal="true" android:layout_marginTop="20dp"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/toggleButton1"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="34dp"
        android:text="My Switch Button"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

res/drawable/bgtoggle.xml


<?xml version="1.0" encoding="UTF-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">



    <item android:drawable="@drawable/on" android:state_checked="true"/>

    <item android:drawable="@drawable/off" android:state_checked="false"/>
    <item android:drawable="@drawable/off"></item>

</selector>

Image::