ToggleButton

Working With ToggleButton – Android ToggleButton Example

ToggleButton is an Android widget used to change between two states.Here in this tutorial, we are going to glow bulb using ToggleButton.We will set ImageView to an image with a bulb on the image and toggle it alternatively.

Toggle Button
Toggle Button

Step 1: Drag and Drop ImageView and Toggle button from palette or code it in the XML with the code below.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.bytelogs.example.MainActivity">


    <ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ToggleButton"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="68dp" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="76dp"
        app:srcCompat="@drawable/images2"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

Step 2: Create an object of ImageView and ToggleButton and typecast it ImageView and Toggle with their id as shown below.

Step 3: Use object of ToggleButton and setOnCheckedChange Listener and use if-else statement to set ImageView to images with bulb-on and off images.

package com.bytelogs.example;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.ImageView;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ToggleButton  toggleButton = (ToggleButton)findViewById(R.id.toggleButton);
        final ImageView img = (ImageView)findViewById(R.id.imageView);
        toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean isChecked) {
                if(isChecked){
                    img.setImageResource(R.drawable.images);
                }else{
                    img.setImageResource(R.drawable.images2);
                }
            }
        });
    }
}

 

Note: Use two bulb image with on and off states and drop it in the drawable folder.

Decode The Code: We have created the object of ToggleButton and ImageView then we called onCheckedChanged listener to set ImageView to two Bulb images which toggles between using if-else tatements.