Android Toggle Buttons

Android Widgets: 1 2 3 4 5 6 7 8 9

Another widget you can add to your apps is the Toggle button. This lets you have an on/off state. What we'll do is to add one to our layout for Terms and Conditions. If the Toggle button is off then the user doesn't agree with the Terms and Conditions. If the button is on, then they do agree with them. Let's see how they work. We'll also explore listeners.

Click on the Widgets category in your palette. Locate the ToggleButton item:

Android Studio palette showing the ToggleButton widget

Drag one on to your layout and position it under the checkboxes. Add constraints to the top of the toggle button to the bottom of the third checkbox. You can also add constraints to the left end right edges of the screen, and the bottom of the screen. Your layout should look something like this:

Android layout with a Toggle Button added

With the toggle button selected, have a look at the ID property on the right. It has a default ID of toggleButton. Change this to termsToggle:

Properties for a ToggleButton

Now open up your MainActivity.java file.

Previously, we set up methods to handle our button presses. We then pointed to the methods using the properties area. Another way to handle button presses and clicks is to set up something called a Listener. As the name suggests, these Listeners listen out for any button presses or clicks. They then call a method that activates your code. When you set up a Listener, you don't need to use the properties area to point to a method. A Listener is always alert and ready for action!

Listeners are usually set up in the onCreate method of your app. This way, they are initialised when the app starts up. This contrasts with the methods we set up before, where the method has to be initialised and called when a button is pressed or clicked.

In the onCreate method of your code, then, add the following line:

final ToggleButton myToggle = (ToggleButton) findViewById(R.id.termsToggle);

(If you get any red text, press ALT + Enter to add the android library for a ToggleButton. Or simply type import android.widget.ToggleButtton; to the top of your code.)

The line of code just sets up a ToggleButton with the variable name of myToggle. We use findViewById to reference the toggle button on the layout.

To set up the listener, you start with this rather complicated code:

myToggle.setOnCheckedChangeListener( new CompoundButton.OnCheckedChangeListener() {

});

Note where all the curly brackets and round brackets are. It's very easy to get these wrong! At the end, you need a curly bracket, a round bracket, and a semicolon.

You're not done setting up the listener yet, though. Add this method inside of the listener. It should get rid of any red lines you have:

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

}

The whole thing should look like this:

Java code setting up a listener

If you're missing any import statements at the top for this project, you should have these (the ones in bold are new for this tutorial):

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.ToggleButton;

The actual code for the listener is fairly simply. It's this:

TextView myText = (TextView) findViewById(R.id.displayArea);

if (isChecked) {

myText.setText("I agree with the Terms and Conditions");

} else {

myText.setText("I do NOT agree with the Terms and Conditions");

}

Again, we get a reference to our TextView called displayArea. Then we have an IF statement. The IF statement examines a boolean variable called isChecked. If this is true then we set some text; if it's false then we set some other text. But where is this Boolean variable isChecked coming from? Well, have a look at the method inside of the listener:

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

The onCheckedChanged method accepts a Boolean variable as one of its parameters. It's this Boolean variable, isChecked, that is used in our code.

Add the if statement to your own code and your onCreate method will look like this (the highlighted text is because we didn't set up a string resource, but simply entered text directly):

Java logic handling toggle buttons

Test out your app. When you run it on the Emulator or a real phone hit your toggle button. You should see this:

An Android app running in the Emulator and showing a ToggleButton

Hit the toggle button again and you'll see this:

An Android app showing a ToggleButton in the OFF state

So we're toggling from ON to OFF, with a different message being displayed, depending on which state the toggle button is in.

That text on the toggle button that says ON and OFF can be changed to something of your choosing. Stop the app from running. In Android Studio, click back on the activity_main.xml file. Make sure you are in Design view and not Text view for the layout. With your toggle button selected, look at the properties area on the right. Locate the textOff and textOn properties:

The textOn and textOff properties of a ToggleButton

Change these to anything you like (again, we're entering direct text rather than setting up a string resource):

Setting new values for textOn and textOff

Now run your app again. You should see this for the toggle button off state when the app first loads:

The toggleOff state changed in a running app

And this for the ON state:

The toggleOn state changed in a running app

You can even set these values with code, if you want to. Like this:

final ToggleButton myToggle = (ToggleButton) findViewById(R.id.termsToggle);

myToggle.setTextOn("AGREE");

myToggle.setTextOff("DISAGREE");

The two method to use are setTextOn and setTextOff.

 

ToggleButton styles

If you don't like the style of your toggle button, you can choose one of the other presets quite easily. In Design Layout view, click on your toggle button to select it. In the properties area on the right, locate the style property and click the button to the right of the textbox:

Properties for styling a ToggleButton

Clicking the button brings up the Resources dialogue box. Type toggle in the search box at the top to see the following styles you can apply:

ToggleButton resources

Select one of the styles under the Android heading. In the image below, we've gone for Widget.Button.Toggle:

Selecting a ToggleButton style

When the app is run, the toggle button will look like this in the ON state:

A ToggleButton with a different style applied

Try some of the other styles, though, to see what they look like.

 

In the next lesson, you'll learn about the Android SeekBar. A SeekBar is one of those sliders you use to change the brightness or volume on your phone/tablet.