Implementing Toggle Button

0
2049

Hello friends !!!In this tutorial we will be implementing toggle button.

  • All we will do in this tutorial is to handle and manage the onClick event on the toggle button property.
  • So follow the Steps :
    1. Create a new project and forexample name it as ToggleButton.
    2. Your MainActivity and activity_main files will be generated respectively.
    3. Now go to your activity_main.xml file and in your graphical Layout take two toggle button also take one ImageView on the layout .
    4. So now your activity_main.xml file graphical layout will as shown below :
    5. 1

    6. Now we want the image to be displayed on the click of the toggle button , hence set the visibility property of the ImageView as invisible.
    7. [code language=”xml”]android : visibility = “invisible”
      [/code]

    8. So now your image will not be displayed on the graphical layout as its property is set to invisible.
    9. Now set the onClick property of the toggle button 1 as “btnClicked”,by writing the statement as :
    10. [code langauage=”xml”]android : onClick = “btnClicked”
      [/code]

    11. On the second toggle button for On and Off set the text by adding the statement in the property of the second toggle button :
    12. [code language=”xml”]android:textOn = “@string/btnOnText”
      android:textOff = “@string/btnOffText”
      [/code]

    13. Now to add these values of textOn and textOff go to lefthand side in Package Explorer :
      res->values->strings.xml
    14. In this click on the Add button and select string and click on ok :
    15. You will get the following window :
    16. 2

    17. In the Name column write : btnOnText and in the
      value column write : Two (which will be displayed on toggling the button)
    18. Again click on the Add button and :
      Name column write : btnOffText
      value column write : One (which will be displayed on toggling the button) then click on save and close strings.xml file.
    19. So your activity_main.xml file code is given below :
    20. [code language=”xml”]<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=".MainActivity" >

      <ToggleButton
      android:id="@+id/toggleButton1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_alignParentTop="true"
      android:layout_marginLeft="51dp"
      android:layout_marginTop="53dp"
      android:onClick="btnClicked" />

      <ToggleButton
      android:id="@+id/toggleButton2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignLeft="@+id/toggleButton1"
      android:layout_below="@+id/toggleButton1"
      android:layout_marginTop="61dp"
      android:textOn="@string/btnOnText"
      android:textOff="@string/btnOffText"/>

      <ImageView
      android:id="@+id/imageView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"
      android:layout_alignTop="@+id/toggleButton1"
      android:layout_marginRight="69dp"
      android:visibility="invisible"
      android:src="@drawable/ic_launcher" />

      </RelativeLayout>

      [/code]

    21. Your window will look as shown below :
    22. 3
      4

    23. Now go to your MainActivity.Java file and write the code on the button click so that when you click on the toggle button in On state it should display the Image and in the Off state the image should not be seen .
    24. So write the following code on the onClick property as shown :
    25. [code language=”java”]public void btnClicked(View v)
      {
      //get the id of the ImageView :
      ImageView iView = (ImageView)findViewById(R.id.imageView1);

      //Pass view to the toggle button :
      ToggleButton toggle = (ToggleButton)v;

      if(toggle.isChecked())
      {
      //if the toggle button is set to On then view the image :
      iView.setVisibility(View.VISIBLE);
      }
      else
      {
      //If the toggle button is Off then set the image as invisible :
      iView.setVisibility(View.INVISIBLE);
      }
      }
      [/code]

    26. So your MainActivity.Java file will look as shown below :
    27. 5

    28. Now run your application and you will have following output :
    29. 6

    30. Now as the toggle state is OFF the image is not displayed as soon as we press the Toggle button and click it to the ON state the image will be displayed :
    31. 7

    32. Thus we have implemented Toggle Button Successfully .