Introduction
Like any mature platform, Android offers an array of UI controls that developers can use in their applications. In this article, we will learn about the common input controls and how to use them in Android applications.
Input controls allow a user to provide input to the application. These inputs can be in the form of a text box, a button, seek bar, checkbox, radio button, toggle button, spinners, and pickers.
There is first-class platform support in Android for this. Let us dig deeper into each of the controls individually.
Input Control Basics
Button
This is the regular push-button that can be pressed. This is represented by the Button class. A button can be declared (i) with text, (ii) with icon, and (iii) with text and an icon.
Here is a simple declaration of a button in XML.
<Button android_layout_width="100dp" android_layout_height="120dp" android_text="@string/button_text" ... />
A button click event can be registered by tapping the onCLick event, as follows:
android:onClick="Methodname"
Text Field
This is an editable text field and is represented by EditText.
Becausee there are a number of inputs that are of the “text” type, Android offers a way to restrict the input by specifying the inputType attribute. Common inputType attribute values are:
- text: Represents normal text (no restrictions)
- textEmailAddress: Represents normal text plus the “@” symbol
- textUri: Represents normal text with a “/” symbol
- Number: Restricts keyboard to only numbers
- Phone: Restricts input to only valid phone number characters
- textPassword: “*” any input entered
The sample declaration is:
<EditText android_id="@+id/textPhonenumber" android_layout_width="fill_parent" android_layout_height="wrap_content" android_hint="@string/phone_number" android_inputType="phone" />
Checkbox
This represents a checkbox that can be toggled by the user and is represented by the CheckBox control. It allows users to select one or more options.
A sample declaration is:
<CheckBox android_id="@+id/checkbox_adult" android_layout_width="wrap_content" android_layout_height="wrap_content" android_text="@string/adult"/>
RadioButton
This allows users to select only one option from the available list. It is represented by the RadioButton control.
A radio Button declaration requires specifying a single Radiogroup that contains the available options as child items of type RadioButton.
A sample declaration is:
<RadioGroup xmlns_android="http://schemas. android.com/apk/res/android" android_layout_width="fill_parent" android_layout_height="wrap_content" android_orientation="vertical"> <RadioButton android_id="@+id/radioMale" android_layout_width="wrap_content" android_layout_height="wrap_content" android_text="@string/male"/> <RadioButton android_id="@+id/radioFemale" android_layout_width="wrap_content" android_layout_height="wrap_content" android_text="@string/female"/> </RadioGroup>
Toggle Button
This represents an on/off button with a light indicator and is represented by the ToggleButton control. This is very similar to Button control.
Hands On
Let us create a simple Android application that demonstrates working with these common UI controls. Fire up Android Studio and Start a new Android Studio Project.
Figure 1: Starting Android Studio
Provide InputControlsDemo as the Application Name and click Next.
Figure 2: Naming the application
On the next screen, leave the default values and click Next.
Figure 3: Leaving the default values in place
On the “Add an activity to Mobile” page, choose “Blank Activity”. This creates an application with a single activity.
Figure 4: Adding a blank activity
We then are prompted to customize the activity. We will leave the default values unchanged.
Figure 5: Again, leaving the default values in place
Click Finish to create the project files.
Once the Design view of the MainActivity is displayed, we will add various input controls to the UI. First, we delete the Hello World TextView and add controls, as follows:
- Three TextViews labelled: (1) Unrestricted Text, (2) Phone input, and (3) Password input
- Three EditText fields that go along with the TextViews above
- Check Box
- RadioGroup which has a couple of radio buttons, one for Male and other for Female
- Button
- Toggle Button
The code behind for the Mainactivity.xml file looks as shown:
<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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Unrestricted Text" android:id="@+id/textView" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/editTextUnrestrictedText" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Phone input" android:id="@+id/textView2" android:layout_below="@+id/editTextUnrestrictedText" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="phone" android:ems="10" android:id="@+id/editTextPhone" android:layout_below="@+id/editTextUnrestrictedText" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:layout_marginRight="60dp" android:layout_marginEnd="60dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Password input" android:id="@+id/textView3" android:layout_below="@+id/editTextPhone" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginTop="35dp" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="textPassword" android:ems="10" android:id="@+id/editTextPassword" android:layout_alignBottom="@+id/textView3" android:layout_centerHorizontal="true" /> <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="New CheckBox" android:id="@+id/checkBoxSelect" android:layout_below="@+id/textView3" android:layout_toLeftOf="@+id/editTextUnrestrictedText" android:layout_toStartOf="@+id/editTextUnrestrictedText" android:layout_marginTop="33dp" android:onClick="onClick" /> <RadioGroup android:id="@+id/radiogroup" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_below="@+id/checkBoxSelect"> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Male" android:id="@+id/radioButtonMale" android:layout_centerVertical="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:onClick="onClick" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Female" android:id="@+id/radioButtonFemale" android:layout_below="@+id/radioButtonMale" android:layout_alignRight="@+id/radioButtonMale" android:layout_alignEnd="@+id/radioButtonMale" android:onClick="onClick" /> </RadioGroup> <ToggleButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Click here to toggle" android:id="@+id/toggleButton" android:layout_below="@+id/radiogroup" android:layout_alignRight="@+id/checkBoxSelect" android:layout_alignEnd="@+id/checkBoxSelect" android:textOn="Started" android:textOff="Stopped" android:layout_marginTop="43dp" android:onClick="onClick" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="This is a button" android:id="@+id/button" android:layout_below="@+id/toggleButton" android:layout_alignRight="@+id/editTextUnrestrictedText" android:layout_alignEnd="@+id/editTextUnrestrictedText" android:onClick="onClick" /> </RelativeLayout>
We then update the MainActivity.java class to introduce member variables for the various input controls.
//Mainactivity.java public class MainActivity extends ActionBarActivity { ToggleButton toggleButton; Button button; EditText editTextUnrestrictedText, editTextPhone, editTextPassword; RadioGroup radioGroup; RadioButton radioButtonMale, radioButtonFemale; CheckBox checkbox; @Override protected void onCreate(Bundle savedInstanceState) {
In the OnCreate method, we initialize these member variables.
@Override protected voidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toggleButton = (ToggleButton)findViewById(R.id.toggleButton); button = (Button)findViewById(R.id.button); editTextUnrestrictedText = (EditText)findViewById(R.id.editTextUnrestrictedText); editTextPhone = (EditText)findViewById(R.id.editTextPhone); editTextPassword = (EditText)findViewById(R.id.editTextPassword); radioGroup = (RadioGroup)findViewById(R.id.radiogroup); radioButtonMale = (RadioButton)findViewById(R.id.radioButtonMale); radioButtonFemale= (RadioButton)findViewById(R.id.radioButtonFemale); checkbox = (CheckBox)findViewById(R.id.checkBoxSelect); }
Finally, we implement the generic onClick event handler method.
public void onClick(View v) { if (v.getId() == R.id.toggleButton) { if(toggleButton.isChecked()) Toast.makeText(getApplicationContext(), "Toggle - Started", Toast.LENGTH_SHORT).show(); else Toast.makeText(getApplicationContext(), "Toggle - Stopped", Toast.LENGTH_SHORT).show(); } if(v.getId() == R.id.checkBoxSelect) { if(checkbox.isChecked()) Toast.makeText(getApplicationContext(), "CheckBox - Checked", Toast.LENGTH_SHORT).show(); else Toast.makeText(getApplicationContext(), "CheckBox - Unchecked", Toast.LENGTH_SHORT).show(); } if(v.getId() == R.id.radioButtonFemale) { if(radioButtonFemale.isChecked()) Toast.makeText(getApplicationContext(), "RadioButton - Female", Toast.LENGTH_SHORT).show(); } if(v.getId() == R.id.radioButtonMale) { if(radioButtonMale.isChecked()) Toast.makeText(getApplicationContext(), "RadioButton - Male", Toast.LENGTH_SHORT).show(); } if(v.getId() == R.id.button) { Toast.makeText(getApplicationContext(), "Button - Clicked", Toast.LENGTH_SHORT).show(); } }
Our application is now complete. When we run our application, you will notice that the input keyboard changes the available keys when we enter text for the various EditText fields.
When the various checkbox, radio buttons, toggle buttons, and button controls are clicked, a toast is shown to the user indicating that there was interaction with the control.
Summary
In this article, we learned how to use common input controls in Android applications. I hope you have found this information useful. You can download the sample code from this download link.
About the Author
Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508.