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.
Step 1: Drag and Drop ImageView and Toggle button from palette or code it in the XML with the code below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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.
