Android UI Controls

0
611

An application’s user interface becomes interactive by adding input controls to it. An Android application contains a number of UI controls in it. A few of the example of UI controls are text fields, drop-down list, checkbox, buttons, toggle buttons, and many others.

A View object displays components on the screen of the device through which a user can interact with the system. A ViewGroup object is a collection of other View and ViewGroup objects. This ViewGroup object is responsible for defining the layout of the user interface.

To define a layout for an application’s user interface, you need to write a human-readable XML code which will look similar to an HTML code. Take a look at the following example. Here, we have defined a user interface with a basic vertical layout. This layout carries a text view and a button.

<?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:id=”@+id/text”
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:text=”I am a TextView” />
      <Button android:id=”@+id/button”
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:text=”I am a Button” />
</LinearLayout>

Android User Interface (UI) Controls

Android offers you numerous UI controls to build an application that fulfills the expectation of an end user. A few of the UI controls are provided in the below table.

S.No. UI Control Description
1 TextView * This UI control is responsible for displaying a text field to the screen.
2 EditText * This UI component is a predefined subclass of TextView class.
* This interactive UI control owns several editable properties.
3 AutoCompleteTextView * This UI element is quite close to EditText component.
* Unlike EditText, this UI control works even while the user is typing. This component displays the list of all the completed suggestions on its own which makes it different from the EditText.
4 Button * This user interface element is used to perform an action whenever a user tries to interact with it.
* A button can be pressed or clicked.
5 ImageButton * This element belongs to the AbsoluteLayout.
* AbsoluteLayout enables its children to display their exact location.
* Unlike a regular button, the text on the button is replaced by an image (or an icon).
* An ImageButton can either be clicked or pressed.
6 CheckBox * This component possesses an on and off switch which can be used as a toggle by the end user.
* CheckBox can be used in an interface where the user can select multiple options from a given set of options.
* Make sure that these selectable options are not mutually exclusive to each other.
7 ToggleButton * This is a form of a button which can be used to switch on or off an activity with the help of a light indicator.
8 RadioButton * A RadioButton offers two states to a user. The two states of a RadioButton are checked and unchecked. A user can choose either of the options.
9 RadioGroup * This component is a combination of more than one RadioButtons.
10 ProgressBar * This UI element makes sure that the user gets to know about the progress of an activity.
* This component is very helpful for displaying the progress of a background activity.
11 Spinner * This UI control represents a drop-down list.
* This component provides a set of values from which an end user can select one.
12 TimePicker * This component provides an option to the user by which he/she can select a time of the day.
* This component is available in two modes, which are 24-hour mode and AM/PM mode.
13 DatePicker * This interactive UI element provides an option to the user to select a date.

 

Creation of User Interface (UI) Controls
An application can become interactive by the inclusion of UI controls (or input controls) in it. There is a wide range of these interactive components which can be used in building an Android application. A few of the examples of UI controls are zoom buttons, seek bars, toggle buttons, and many others.

As we have already mentioned in earlier chapters, a View object owns a unique ID provided to it. This ID helps in identifying the view uniquely from its tree. The following syntax is used to assign a unique ID to a View object. This is an XML format.

android:id=”@+id/text_id”

For the creation of a user interface (UI) control, you need to define a view in the layout file of the application. In this file, make sure that you assign a unique ID to the View object. Take a look at the following XML file to understand the creation of a UI control more clearly.

<?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:id=”@+id/text_id”
             android:layout_width=”wrap_content”
             android:layout_height=”wrap_content”
             android:text=”I am a TextView” />
</LinearLayout>

At the final stage, you are required to create an instance of the Control object. This instance is then required to be captured from the layout. To perform this operation include the following line of code in your Android application.

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