dcsimg
December 5, 2016
Hot Topics:

Working with the Android Picker Control to Select Date and Time

  • January 21, 2016
  • By Vipul Patel
  • Send Email »
  • More Articles »

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.

Input1
Figure 1: Starting Android Studio

Provide InputControlsDemo as the Application Name and click Next.

Input2
Figure 2: Naming the application

On the next screen, leave the default values and click Next.

Input3
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.

Input4
Figure 4: Adding a blank activity

We then are prompted to customize the activity. We will leave the default values unchanged.

Input5
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:

  1. Three TextViews labelled: (1) Unrestricted Text, (2) Phone input, and (3) Password input
  2. Three EditText fields that go along with the TextViews above
  3. Check Box
  4. RadioGroup which has a couple of radio buttons, one for Male and other for Female
  5. Button
  6. 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.


Tags: UI, user interface, XML, Android, android studio, Android Picker Control




Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel