Using Buttons, Check Boxes, and Radio Groups Android

Another common user interface element is the button. In this section, you learn about different kinds of buttons provided by the Android SDK. These include the basic Button, ToggleButton, CheckBox, and RadioButton. You can find examples of each button type in Figure.

A basic Button is often used to perform some sort of action, such as submitting a form or confirming a selection. A basic Button control can contain a text or image label.

A CheckBox is a button with two states—checked or unchecked. You often use CheckBox controls to turn a feature on or off or to pick multiple items from a list.

A ToggleButton is similar to a CheckBox, but you use it to visually show the state. The default behavior of a toggle is like that of a power on/off button.

A RadioButton provides selection of an item. Grouping RadioButton controls together in a container called a RadioGroup enables the developer to enforce that only one RadioButton is selected at a time.

Using Basic Buttons

The android.widget.Button class provides a basic button implementation in the Android SDK. Within the XML layout resources, buttons are specified using the Button element. The primary attribute for a basic button is the text field. This is the label that appears on the middle of the button’s face. You often use basic Button controls for buttons with text such as “Ok,”“Cancel,” or “Submit.”

Various types of button controls.

Various types of button controls

The following XML layout resource file shows a typical Button control definition:

A button won’t do anything, other than animate, without some code to handle the click event. Here is an example of some code that handles a click for a basic button and displays a Toast message on the screen:

To handle the click event for when a button is pressed,we first get a reference to the Button by its resource identifier. Next, the setOnClickListener() method is called. It requires a valid instance of the class View.OnClickListener.A simple way to provide this is to define the instance right in the method call.This requires implementing the onClick() method.Within the onClick() method, you are free to carry out whatever actions you need. Here,we simply display a message to the users telling them that the button was, in fact, clicked.

A button with its primary label as an image is an ImageButton.An ImageButton is, for most purposes, almost exactly like a basic button. Click actions are handled in the same way. The primary difference is that you can set its src attribute to be an image. Here is an example of an ImageButton definition in an XML layout resource file:

In this case, a small drawable resource is referenced.

Using Check Boxes and Toggle Buttons

The check box button is often used in lists of items where the user can select multiple items. The Android check box contains a text attribute that appears to the side of the check box. This is used in a similar way to the label of a basic button. In fact, it’s basically a TextView next to the button.

Here’s an XML layout resource definition for a CheckBox control:

You can see how this CheckBox is displayed in Figure.

The following example shows how to check for the state of the button programmatically and change the text label to reflect the change:

This is similar to the basic button.A check box automatically shows the check as enabled or disabled. This enables us to deal with behavior in our application rather than worrying about how the button should behave. The layout shows that the text starts out one way but, after the user presses the button, the text changes to one of two different things depending on the checked state. As the code shows, the CheckBox is also a TextView.

A Toggle Button is similar to a check box in behavior but is usually used to show or alter the on or off state of something. Like the CheckBox, it has a state (checked or not). Also like the check box, the act of changing what displays on the button is handled for us. Unlike the CheckBox, it does not show text next to it. Instead, it has two text fields. The first attribute is textOn, which is the text that displays on the button when its checked state is on. The second attribute is textOff, which is the text that displays on the button when its checked state is off. The default text for these is “ON” and “OFF,” respectively.

The following layout code shows a definition for a toggle button that shows “Enabled” or “Disabled” based on the state of the button:

This type of button does not actually display the value for the text attribute, even though it’s a valid attribute to set. Here, the only purpose it serves is to demonstrate that it doesn’t display.You can see what this ToggleButton looks like in Figure.

Using RadioGroups and RadioButtons

You often use radio buttons when a user should be allowed to only select one item from a small group of items. For instance, a question asking for gender can give three options: male, female, and unspecified. Only one of these options should be checked at a time. The RadioButton objects are similar to CheckBox objects. They have a text label next to them, set via the text attribute, and they have a state (checked or unchecked). However, you can group RadioButton objects inside a RadioGroup that handles enforcing their combined states so that only one RadioButton can be checked at a time. If the user selects a RadioButton that is already checked, it does not become unchecked. However, you can provide the user with an action to clear the state of the entire RadioGroup so that none of the buttons are checked.

Here we have an XML layout resource with a RadioGroup containing four RadioButton objects.The RadioButton objects have text labels,“Option 1,” and so on.The XML layout resource definition is shown here:

You handle actions on these RadioButton objects through the RadioGroup object.The following example shows registering for clicks on the RadioButton objects within the RadioGroup:

As this layout example demonstrates, there is nothing special that you need to do to make the RadioGroup and internal RadioButton objects work properly.The preceding code illustrates how to register to receive a notification whenever the RadioButton selection changes.

The code demonstrates that the notification contains the resource identifier for the specific RadioButton that the user chose, as assigned in the layout file. To do something interesting with this, you need to provide a mapping between this resource identifier (or the text label) to the corresponding functionality in your code. In the example, we query for the button that was selected, get its text, and assign its text to another TextView control that we have on the screen.

As mentioned, the entire RadioGroup can be cleared so that none of the RadioButton objects are selected. The following example demonstrates how to do this in response to a button click outside of the RadioGroup:

The action of calling the clearCheck() method triggers a call to the on Checked Changed Listener()callback method.This is why we have to make sure that the resource identifier we received is valid. Right after a call to the clearCheck() method, it is not a valid identifier but instead is set to the value -1 to indicate that no Radio Button is currently checked.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Android Topics