Module 8: Android UI Controls: Gordon College

Republic of the Philippines
City of Olongapo
-o0o-
GORDON COLLEGE
Olongapo City Sports Complex, Donor St., East Tapinac, Olongapo City 2200
www.gordoncollege.edu.ph
Module 8: Android UI Controls

I. INTRODUCTION
Events that was discussed on Module 7 are essential in getting inputs from the user
of Android Applications, you can implement these events with the used of what we
called User Interface (UI) controls.
Module 8 will focus on the basic UI Controls that you can utilize in creating your
simple Android Mobile App and how the events can be implemented on some of
these controls.
II. LEARNING OBJECTIVES

After the completion of this module, the students are expected to;
• Understand the definition of Input Controls
• Determine what is View and ViewGroup
• Create a User Input Control Using Different Methods in Android Studio
• Implement Event Listeners on UI Control
III. TOPICS AND KEY CONCEPTS

A. What is Input Controls in Android Studio?
In android UI or input controls are the interactive or View components that are
used to design the user interface of an application. In android we have a wide
variety of UI or input controls available, those are TextView, EditText, Buttons,
Checkbox, Progressbar, Spinners, etc.
Following is the pictorial representation of user interface (UI) or input controls in

android application.
Generally, in android the user interface of an app is made with a collection of

View and ViewGroup objects.
IT Elective II (Lec) NOT FOR SALE, Exclusive for Gordon College Only!
Neil Marc R. Biron, Instructor (1st Semester, AY 2020-2021) | 1 of 11
City of Olongapo
-o0o-
GORDON COLLEGE
The View is a base class for all UI components in android and it is used to create
interactive UI components such as TextView, EditText, Checkbox, Radio Button,
etc. and it is responsible for event handling and drawing.
The ViewGroup is a subclass of View and it will act as a base class for layouts
and layout parameters. The ViewGroup will provide invisible containers to hold
other Views or ViewGroups and to define the layout properties.
In android, we can define a UI or input controls in two ways, those are

• Declare UI elements in XML
• Create UI elements at runtime
The android framework will allow us to use either or both of these methods to
define our application’s UI.
B. Android View and ViewGroups

View - The View is a base class for all UI components in android. For example,
the EditText class is used to accept the input from users in android apps, which
is a subclass of View.
Following are the some of common View subclasses that will be used in android
applications.
• TextView
• EditText
• Button
• CheckBox
• RadioButton
• ImageButton
• Progress Bar
• Spinner
There are so many other Views that you can utilize in android.
ViewGroup - The ViewGroup is a subclass of View and it will act as a base class
for layouts and layouts parameters. The ViewGroup will provide an invisible
containers to hold other Views or ViewGroups and to define the layout
properties.
For example, Linear Layout is the ViewGroup that contains a UI controls like
button, textview, etc. and other layouts also.
Following are the commonly used ViewGroup subclasses in android

applications.
• Linear Layout
• Relative Layout
• Table Layout
City of Olongapo
-o0o-
GORDON COLLEGE
• Frame Layout
• Web View
• List View
• Grid View
Both View and ViewGroup subclasses together will play a key role to create a
layouts in android applications.
C. Common Android UI Controls
UI Control & Description
1 TextView
This control is used to display text to the user.

2 EditText
EditText is a predefined subclass of TextView that includes rich editing capabilities.
3 AutoCompleteTextView
The AutoCompleteTextView is a view that is similar to EditText, except that it shows a list of
completion suggestions automatically while the user is typing.
4 Button
A push-button that can be pressed, or clicked, by the user to perform an action.
5 ImageButton
An ImageButton is an AbsoluteLayout which enables you to specify the exact location of its
children. This shows a button with an image (instead of text) that can be pressed or clicked
by the user.
6 CheckBox
An on/off switch that can be toggled by the user. You should use check box when presenting
users with a group of selectable options that are not mutually exclusive.
7 ToggleButton
An on/off button with a light indicator.
8 RadioButton
The RadioButton has two states: either checked or unchecked.
9 RadioGroup
A RadioGroup is used to group together one or more RadioButtons.
10 ProgressBar
The ProgressBar view provides visual feedback about some ongoing tasks, such as when you
are performing a task in the background.
11 Spinner
City of Olongapo
-o0o-
GORDON COLLEGE
A drop-down list that allows users to select one value from a set.
12 TimePicker
The TimePicker view enables users to select a time of the day, in either 24-hour mode or
AM/PM mode.
13 DatePicker
The DatePicker view enables users to select a date of the day.
D. Creating your UI Control in Android

User Interface controls can be defined in two-ways;
• Declaring it in UI elements in XML
• Creating UI elements at runtime
D.1. Declare UI Elements in XML

In android, we can create layouts same as web pages in HTML by using default
Views and ViewGroups in the XML file. The layout file must contain only one
root element, which must be a View or ViewGroup object. Once we define the
root element, then we can add additional layout objects or widgets as a child
elements to build View hierarchy that defines our layout.
Following is the example of defining UI controls (TextView, EditText, Button) in

the XML file (activity_main.xml) using LinearLayout.
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/re
s/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/fstTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter Name" />
<EditText
android:id="@+id/name"
android:ems="10"/>
<Button
android:id="@+id/getName"
City of Olongapo
-o0o-
GORDON COLLEGE
android:text="Get Name" />

</LinearLayout>
In android, each input control is having a specific set of events and these events
will be raised when the user performs particular action like, entering the text or
touches the button.
Remember that we need to create a user interface (UI) layout files in /res/layout
project directory, then only the layout files will compile properly.
Load XML Layout File from an Activity

Once we are done with the creation of layout with UI controls, we need to load
the XML layout resource from our activity onCreate() callback method like as
shown below.
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
If you observe above code we are calling our layout using setContentView
method in the form of R.layout.layout_file_name. Here our xml file name is
activity_main.xml so we used file name activity_main.
Generally, during the launch of our activity, onCreate() callback method will be
called by android framework to get the required layout for an activity.
D.2. Declare UI Elements in XML

If we want to create UI elements at runtime, we need to create our own custom
View and ViewGroup objects programmatically with required layouts.
Following is the example of creating UI elements (TextView, EditText, Button) in

LinearLayout using custom View and ViewGroup objects in an activity
programmatically.
public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView textView1 = new TextView(this);
textView1.setText("Name:");
EditText editText1 = new EditText(this);
editText1.setText("Enter Name");
Button button1 = new Button(this);
button1.setText("Add Name");
City of Olongapo
-o0o-
GORDON COLLEGE
LinearLayout linearLayout = new LinearLayout(this);

linearLayout.addView(textView1);
linearLayout.addView(editText1);
linearLayout.addView(button1);
setContentView(linearLayout);
}
}
By creating a custom View and ViewGroups programmatically, we can define UI

controls in layouts based on our requirements in android applications.
E. Width and Height of UI Controls

When we define a UI controls in a layout using an XML file, we need to set width
and height for every View and ViewGroup elements using layout_width and
layout_height attributes.
Following is the example of setting width and height for View and ViewGroup
elements in the XML layout file.
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/re
s/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/fstTxt"
android:text="Enter Name" />
</LinearLayout>
If you observe above example, we used different values to set layout_width and
layout_height, those are
• match_parent
• wrap_content
If we set value match_parent, then the View or ViewGroup will try to match
with parent width or height.
If we set value wrap_content, then the View or ViewGroup will try to adjust its
width or height based on the content.
City of Olongapo
-o0o-
GORDON COLLEGE
F. Implementing Event Listeners to a UI

As discussed on Module 7, an event listener is an interface in the View class
that contains a single callback method. These methods will be called by the
Android framework when the View to which the listener has been registered is
triggered by user interaction with the item in the UI.
Included in the event listener interfaces are the following callback methods:
• onClick() - From View.OnClickListener. This is called when the user

either touches the item (when in touch mode), or focuses upon the item
with the navigation-keys or trackball and presses the suitable "enter" key
or presses down on the trackball.
• onLongClick() - From View.OnLongClickListener. This is called when the

user either touches and holds the item (when in touch mode), or focuses
upon the item with the navigation-keys or trackball and presses and
holds the suitable "enter" key or presses and holds down on the trackball
(for one second).
• onFocusChange() - From View.OnFocusChangeListener. This is called

when the user navigates onto or away from the item, using the
navigation-keys or trackball.
• onKey() - From View.OnKeyListener. This is called when the user is

focused on the item and presses or releases a hardware key on the
device.
• onTouch() - From View.OnTouchListener. This is called when the user

performs an action qualified as a touch event, including a press, a
release, or any movement gesture on the screen (within the bounds of the
item).
• onCreateContextMenu() - From View.OnCreateContextMenuListener.

This is called when a Context Menu is being built (as the result of a
sustained "long click"). See the discussion on context menus in the
Menus developer guide.
These methods are the sole inhabitants of their respective interface. To define
one of these methods and handle your events, implement the nested interface in
your Activity or define it as an anonymous class. Then, pass an instance of your
implementation to the respective View.set...Listener() method. (E.g., call
setOnClickListener() and pass it your implementation of the OnClickListener.)
City of Olongapo
-o0o-
GORDON COLLEGE
The example below shows how to register an on-click listener for a Button;
// Create an anonymous implementation of OnClickListener

private OnClickListener corkyListener = new OnClickListener()
{
public void onClick(View v) {
// do something when the button is clicked
}
};
protected void onCreate(Bundle savedValues) {

...
// Capture our button from layout
Button button = (Button)findViewById(R.id.corky);
// Register the onClick listener with the implementation
above
button.setOnClickListener(corkyListener);
...
}
You may also find it more convenient to implement OnClickListener as a part of

your Activity. This will avoid the extra class load and object allocation. For
example:
public class ExampleActivity extends Activity implements

OnClickListener {
protected void onCreate(Bundle savedValues) {
...
Button button = (Button)findViewById(R.id.corky);
button.setOnClickListener(this);
}
// Implement the OnClickListener callback

public void onClick(View v) {
// do something when the button is clicked
}
...
}
City of Olongapo
-o0o-
GORDON COLLEGE
IV. TEACHING AND LEARNING MATERIALS RESOURCE

Materials are being taken from the following;
• Online Resources
City of Olongapo
-o0o-
GORDON COLLEGE
V. LEARNING TASK
Instruction: Answer the following questions briefly, your

answer will be evaluated using the following rubric.
Holistic Rubric
Exceeding Meeting Approaching Below None
(10) (8) (6) (2) (0)
Substantial,
Content Clarity
specific, and/or
The presence of ideas Sufficient
illustrative
developed through developed Limited content Superficial
content No content
facts, examples, content with with inadequate and/or
demonstrating or answer
illustrations, details, adequate elaboration or minimal
strong provided.
opinions, statistics, elaboration or explanation content
development and
reasons, and/or explanation.
sophisticated
explanations.
ideas.
1. Aside from the discussed common UI controls, what other controls do you
think should a new developer need to familiarize? Why?
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
2. Give two important events that can implement in a Spinner. How can we
register these events?
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
Score Sheet
Question 1 Question 2 Question 3 Total Score
City of Olongapo
-o0o-
GORDON COLLEGE
VI. REFERENCES
Online Resources
• https://www.tutlane.com/tutorial/android/android-input-events-event-
listeners-event-handling
• https://www.tutlane.com/tutorial/android/android-ui-controls-textview-
edittext-radio-button-checkbox
• https://www.tutlane.com/tutorial/android/android-view-and-viewgroup-
with-examples
• https://www.tutorialspoint.com/android/android_user_interface_controls.ht
m

Module 8: Android UI Controls: Gordon College

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

Module 8: Android UI Controls: Gordon College

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Module 8: Android UI Controls: Gordon College

Uploaded by

Copyright:

Available Formats

Republic of the Philippines

Module 8: Android UI Controls

II. LEARNING OBJECTIVES

III. TOPICS AND KEY CONCEPTS

Following is the pictorial representation of user interface (UI) or input controls in

Generally, in android the user interface of an app is made with a collection of

In android, we can define a UI or input controls in two ways, those are

B. Android View and ViewGroups

Following are the commonly used ViewGroup subclasses in android

C. Common Android UI Controls

UI Control & Description

This control is used to display text to the user.

D. Creating your UI Control in Android

D.1. Declare UI Elements in XML

Following is the example of defining UI controls (TextView, EditText, Button) in

<?xml version="1.0" encoding="utf-8"?>

android:text="Get Name" />

Load XML Layout File from an Activity

protected void onCreate(Bundle savedInstanceState) {

D.2. Declare UI Elements in XML

Following is the example of creating UI elements (TextView, EditText, Button) in

public class MainActivity extends AppCompatActivity {

LinearLayout linearLayout = new LinearLayout(this);

By creating a custom View and ViewGroups programmatically, we can define UI

E. Width and Height of UI Controls

<?xml version="1.0" encoding="utf-8"?>

F. Implementing Event Listeners to a UI

• onClick() - From View.OnClickListener. This is called when the user

• onLongClick() - From View.OnLongClickListener. This is called when the

• onFocusChange() - From View.OnFocusChangeListener. This is called

• onKey() - From View.OnKeyListener. This is called when the user is

• onTouch() - From View.OnTouchListener. This is called when the user

• onCreateContextMenu() - From View.OnCreateContextMenuListener.

// Create an anonymous implementation of OnClickListener

protected void onCreate(Bundle savedValues) {

You may also find it more convenient to implement OnClickListener as a part of

public class ExampleActivity extends Activity implements

// Implement the OnClickListener callback

IV. TEACHING AND LEARNING MATERIALS RESOURCE

Instruction: Answer the following questions briefly, your

You might also like