UI Controls Tutorial: Toast, Button, Text and Radio

PrevMain 

Toast

The above example used Toast as a means to display a message to the user. A Toast is a view that contains a message and appears briefly on the screen. A toast never receives focus and is typically used to notify user using a view that shows up briefly and then disappears.

As in the above example, a Toast is typically shown by calling the makeText() method.

Toast.makeText(this, "You clicked " + getResources().getString(R.string.first) + " menu option",
            		Toast.LENGTH_SHORT).show();

The first argument is a Context object and typically contains a reference to the activity. The second argument is the message which appears on screen and the last argument is the duration for which the toast message is visible on the screen.

EditText

EditText is the basic text input control for Android. It can be considered as an editable TextView. Let’s create a new Android project named EditTextTest and modify the main.xml file to include an EditText field as shown below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/hello"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
    </EditText>

</LinearLayout>

Running the EditTextTest project on the simulator would show the EditText control on the user interface.

EditTextTest project

We can then enter any text in the EditText control as shown below.

enter any text in the EditText control

The data type of EditText can be controlled using the inputType tag. For example, let’s set the input type to phone as shown below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/hello"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
    </EditText>

</LinearLayout>

This restricts the user to enter only numbers in the EditText field.

EditText field

The value of an EditText field can be retrieved programmatically using the findViewById() method as shown below.

final EditText simpleEditText = (EditText) findViewById(R.id.hello);

Developers can set hints on an EditText using the hint attribute as shown below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/hello"
        android:inputType="phone"
        android:hint="@string/hint"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
    </EditText>

</LinearLayout>

Running the EditTextTest project on the simulator would show the hint as shown below.

the hint

CheckBox

A checkbox UI control is used when you want the user to select one or more options. A checkbox has 2 states – either checked (also called selected) and unchecked (unselected).

Let’s create a new project called CheckBoxTest to see how checkbox works. Let’s modify the main.xml file to add two checkboxes and a button as shown below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <CheckBox android:id="@+id/check1"
        android:layout_width="100px"
        android:layout_height="wrap_content"
        android:text="Android" />

    <CheckBox android:id="@+id/check2"
        android:layout_width="100px"
        android:layout_height="wrap_content"
        android:text="iPhone" />

    <Button android:id="@+id/clickMe"
         android:layout_width="100px"
         android:layout_height="wrap_content"
         android:text="Check" />
   
</LinearLayout>

In our CheckBoxTestActivity, let’s create 2 checkbox and 1 button variables as shown below.

package com.learncomputer;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;

public class CheckBoxTestActivity extends Activity {
	
	CheckBox checkbox1, checkbox2;
	Button clickMe;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		checkbox1 = (CheckBox) findViewById(R.id.checkbox1);
		checkbox2 = (CheckBox) findViewById(R.id.checkbox2);
		clickMe = (Button) findViewById(R.id.clickMe);
		clickMe.setOnClickListener(new View.OnClickListener() {
			public void onClick(View arg0) {
				// add handling here
			}
		});
    }
   
}

Running the CheckBoxTest project on the simulator shows the following output

Running the CheckBoxTest project

Each checkbox can be checked/ unchecked by the user as shown below.

Each checkbox can be checked/ unchecked

Button

Since the CheckBoxTest example used a Button control, it’s a good time to cover it now. A button is a push-button widget which the user would click in order to perform certain action.

The behavior on clicking a button is determined by the onClick() method. We’d left this method empty in the earlier section. Let’s add code in this method to return the state of each checkbox as shown below.

package com.learncomputer;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.Toast;

public class CheckBoxTestActivity extends Activity {
	
	CheckBox checkbox1, checkbox2;
	Button clickMe;
	Toast msg;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		checkbox1 = (CheckBox) findViewById(R.id.checkbox1);
		checkbox2 = (CheckBox) findViewById(R.id.checkbox2);
		clickMe = (Button) findViewById(R.id.clickMe);
		clickMe.setOnClickListener(new View.OnClickListener() {
			public void onClick(View arg0) {
	if (checkbox1.isChecked() == true && checkbox2.isChecked() == true) {
	    msg = Toast.makeText(CheckBoxTestActivity.this, "Both are checked", Toast.LENGTH_SHORT);
	    msg.show();
	} else if (checkbox1.isChecked() == true && checkbox2.isChecked() == false) {
	    msg = Toast.makeText(CheckBoxTestActivity.this,
			"1 is checked, 2 is unchecked", Toast.LENGTH_SHORT);
	    msg.show();
	} else if (checkbox1.isChecked() == false && checkbox2.isChecked() == true) {
	    msg = Toast.makeText(CheckBoxTestActivity.this,
			"1 is unchecked, 2 is checked", Toast.LENGTH_SHORT);
	    msg.show();
	} else if (checkbox1.isChecked() == false && checkbox2.isChecked() == false) {
	    msg = Toast.makeText(CheckBoxTestActivity.this,
			"Both are unchecked", Toast.LENGTH_SHORT);
	    msg.show();
	}	          
     }
   });
 }

Running the CheckBoxTest project on the simulator and clicking the button produces the appropriate message based on the state of the two checkbox controls.

the CheckBoxTest project on the simulator

RadioButton and RadioGroup

A RadioButton is a toggle button which can either be checked or unchecked. A RadioGroup is a collection of multiple RadioButton controls only of which can be checked at a time.

Let’s create a project RadioButtonTest to see how these UI controls work. There are 2 ways to create RadioButton and RadioGroup. We can do it using the XML configuration file as shown below.

	<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/rad1"
        android:textStyle="bold" android:textSize="22sp"/>

    <RadioGroup
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/radio_group1">
        <RadioButton
            android:id="@+id/radio1 "
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/rad1"
            android:onClick="onRadioButtonClick"
            android:checked="true"/>
        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/rad2"
            android:onClick="onRadioButtonClick"/>
        <RadioButton
            android:id="@+id/radio3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/rad3"
            android:onClick="onRadioButtonClick"/>
    </RadioGroup>

</LinearLayout>

Alternatively, it can be done in the Activity as shown below.

package com.learncomputer;

import android.app.Activity;
import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

public class RadioButtonTestActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        RadioGroup rGroup1 = (RadioGroup) findViewById(R.id.radio_group1);
        OnClickListener radio_listener = new OnClickListener() {
		public void onClick(View v) {
			onRadioButtonClick(v);
		}

		@Override
		public void onClick(DialogInterface dialog, int which) {
			// TODO Auto-generated method stub
				
		}
        };
        
        RadioButton button1 = new RadioButton(this);
        button1.setText(R.string.rad1);
        button1.setTextColor(Color.RED);
        rGroup1.addView(button1);

        RadioButton button2 = new RadioButton(this);
        button2.setText(R.string.rad2);
        button2.setTextColor(Color.GREEN);
        rGroup1.addView(button2);
        
        RadioButton button3 = new RadioButton(this);
        button3.setText(R.string.rad3);
        button3.setTextColor(Color.BLUE);
        rGroup1.addView(button3);
        
        rGroup1.check(button1.getId());
    }

    public void onRadioButtonClick(View v) {             
    	RadioButton button = (RadioButton) v;   
    	Toast.makeText(RadioButtonTestActivity.this, button.getText() + " was chosen.", Toast.LENGTH_SHORT).show();  
    }
}

The onRadioButtonClick() method gets triggered when any of the radio buttons is clicked. In this method, we use a toast to show which radio button was selected in the radio group.

Running the RadioButtonTest project on the simulator and checking any radio button in the radio group produces the appropriate message as shown below.

RadioButtonTest project

In this module, we covered the following UI controls – Menus, EditText, CheckBox, RadioButton, RadioGroup and Toast. In the next module, we will talk about various types of dialogs, StateListDrawable and WebViews.

Till then, Happy Coding!

PrevMain