Beginning Android Studio 7. ToggleButton and Switch

Introduction

Hi there, welcome to the seventh article of the Beginning Android Studio series. In the last tutorial, you learned about the ImageView. In this part you will learn how to program a ToggleButton. I will only focus on the ToggleButton in this article, even though the title says and Switch, because the Switch functions in the same way. Change the ToggleButton to a Switch in this example and it will work out fine. A ToggleButton let the user change the settings of two states. Maybe you want to let the user turn on/off the sound, vibration or notifications? This is what we will accomplish today (final at product 4:03):

 

Getting started

As you have probably guessed already, we will begin by adding the element ToggleButton to the layout. Do this by either find the element in the palette from the design view, or simply by the code:

        <ToggleButton
            android:id="@+id/toggleBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

We want something to happen when this button is toggled, otherwise it would be pretty pointless to add it to an application. Because I have no fantasy, a simple TextView will have to do for this article. I add it above the ToggleButton and change the text when the button is clicked. Here's the full activity_main.xml:

<?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=".MainActivity">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="40dp"
            android:layout_centerHorizontal="true"
            android:textSize="30sp"
            android:text="The button is off"/>

        <ToggleButton
            android:id="@+id/toggleBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            android:layout_centerHorizontal="true"
            android:layout_below="@id/textView"/>

    </RelativeLayout>

</RelativeLayout>

 

Java

It's very easy to handle the change of state of a ToggleButton. All you need is a listener that listens to changes. That listener has a boolean, isChecked, that holds the new state of the ToggleButton. If isChecked is true, I want my TextView to say "The button is on", and if it's off I want it to say "The button is off". Here's the full MainActivity.java class:

package com.hallucind.togglebutton;

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

public class MainActivity extends AppCompatActivity {

    TextView textView;
    ToggleButton toggleButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = findViewById(R.id.textView);
        toggleButton = findViewById(R.id.toggleBtn);

        toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

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

                if (isChecked) {
                    textView.setText("The button is on");
                } else {
                    textView.setText("The button is off");
                }
            }
        });
    }
}

 

Enjoyed this article? Give the teacher an apple.

cookie

0

Author

authors profile photo

Articles with similar tags

Comments