Mobile Programming

CHAPTER FOUR
ANDROID USER INTERFACE DESIGN
 Table of Content
2

User Interface Layouts

User Interface Controls
Android Event Handling
 The View Class 3
It represents the basic building block for user interface
components.
 A View occupies a rectangular area on the screen and
is responsible for drawing and event handling.
View is the base class for widgets, which are used to
create interactive UI components (buttons, textfields,
etc.)
The ViewGroup subclass is the base class for layouts,
which are invisible containers that hold other Views (or
other ViewGroups) and define their layout properties.
layout defines the visual structure for an Android user
interface and can be created either at run time or you
can declare your layout using simple XML
 example
4

Once your layout is defined, you can load the layout

resource from your application code, in
yourActivity.onCreate() callback implementation as shown
below:
5
 Linear Layout
6
Android LinarLayout is a view group that
aligns all children in a single direction,
vertically or horizontally.
 Relative Layout
7

 Android RelativeLayout enables you to specify how

child views are positioned relative to each other.
 The position of each view can be specified as relative to
sibling elements or relative to the parent.
 Using RelativeLayout, you can align two elements by
right border, or make one below another, centered
in the screen, centered left, and so on.
 By default, all child views are drawn at the top-left of
the layout, so you must define the position of each
view using the various layout properties available from
RelativeLayout.LayoutParams
 few of the important attributes
Attribute Description
android:layout_a Positions the bottom 8 edge of this view above the given
bove anchor view ID and must be a reference to another resource,
in the form "@[+][package:]type:nam"
android:layout_al Makes the bottom edge of this view match the bottom edge
ignBottom of the given anchor view ID and must be a reference to
another resource, in the form "@[+][package:]type:name".
android:layout_al Makes the left edge of this view match the left edge of the
ignLeft given anchor view ID and must be a reference to another
resource, in the form "@[+][package:]type:name".
android:layout_al If true, makes the bottom edge of this view match the bottom
ignParentBottom edge of the parent. Must be a boolean value, either "true" or
"false".
android:layout_al If true, makes the end edge of this view match the end edge
ignParentEnd of the parent. Must be a boolean value, either "true" or
"false".
android:layout_al If true, makes the left edge of this view match the left edge of
ignParentLeft the parent. Must be a boolean value, either "true" or "false".
 Table Layout
9

Android TableLayout groups views into rows

and columns.
You will use the <TableRow> element to build a
row in the table. Each row has zero or more
cells; each cell can hold one View object.
 Absolute10 Layout
 An Absolute Layout lets you specify exact locations (x/y
coordinates) of its children.
 Absolute layouts are less flexible and harder to maintain than
other types of layouts without absolute positioning.
AbsoluteLayout Attributes
attribute Description
android:id This is the ID which uniquely identifies the layout.

android:layout_x This specifies the x-coordinate of the view.

android:layout_y This specifies the y-coordinate of the view.
 Frame Layout
11

 Frame Layout is designed to block out an area on the screen to

display a single item.
 Generally, FrameLayout should be used to hold a single child
view, because it can be difficult to organize child views in a way
that's scalable to different screen sizes without the children
overlapping each other.
 You can, however, add multiple children to a FrameLayout and
control their position within the FrameLayout by assigning
gravity to each child, using the android:layout_gravity
attribute.
FrameLayout
12 Attributes
 List View
 Android ListView is a view which groups several items display them
in vertical scrollable list. 13
 The list items are automatically inserted to the list using an Adapter
that pulls content from a source such as an array or database.
 An adapter actually bridges between UI components and the data
source that fill data into UI Component. Adapter can be used to
supply the data to like spinner, list view, grid view etc.
 The ListView and GridView are subclasses of AdapterView and they
can be populated by binding them to an Adapter, which retrieves
data from an external source and creates a View that represents
each data entry.
 Android provides several subclasses of Adapter that are useful for
retrieving different kinds of data and building views for an
AdapterView ( ie. ListView or GridView).
 The two most common adapters are
1. ArrayAdapter
2. SimpleCursorAdapter.
14
 SimpleCursorAdapter
 You can use this adapter when your data source is a
15
database Cursor.
 When using SimpleCursorAdapter, you must specify a
layout to use for each row in the Cursor and which
columns in the Cursor should be inserted into which
views of the layout.
 For example, if you want to create a list of people's
names and phone numbers, you can perform a query
that returns a Cursor containing a row for each person
and columns for the names and numbers.
 You then create a string array specifying which columns
from the Cursor you want in the layout for each result
and an integer array specifying the corresponding views
that each column should be placed:
16
ListView Attributes 17
 GridView 18

 Android GridView shows items in two-dimensional scrolling grid (rows &

columns)
 the grid items are not necessarily predetermined but they automatically
inserted to the layout using a ListAdapter An adapter actually bridges between
UI components and the data source that fill data into UI Component.
 Adapter can be used to supply the data to like spinner, list view, grid view etc.
 The ListView and GridView are subclasses of AdapterView and they can be
populated by binding them to an Adapter, which retrieves data from an
external source and creates a View that represents each data entry.
 GridView Attributes
Attribute Description
android:id . This is the ID
19 which uniquely identifies the layout
android:columnWidth This specifies the fixed width for each column. This
could be in px, dp, sp, in, or mm
android:gravity . Specifies the gravity within each cell. Possible values
are top, bottom, left, right, center, center_vertical,
center_horizontal etc
android:horizontalSpacin Defines the default horizontal spacing between
g columns. This could be in px, dp, sp, in, or m
android:numColumns Defines how many columns to show. May be an
integer value, such as "100" or auto_fit which means
display as many columns as possible to fill the
available space.
android:stretchMode Defines how columns should stretch to fill the
available empty space, if any. This must be either of
the values:
 none: Stretching is disabled.
 spacingWidth: The spacing between each column
is stretched.
 columnWidth: Each column is stretched equally.
 UI Controls
20

 user interface is everything that the user can

see and interact with.
 A View is an object that draws something on
the screen and a ViewGroup is an object that
holds other View
21
 TextView
 displays text to the user
22
and optionally allows
them to edit it. It is a complete text editor,
however the basic class is configured to not
allow editing.
TextView Attributes
 few important attributes related to TextView
control.
 EditText
23

 It is an overlay over TextView that configures

itself to be editable.
 It is the predefined subclass of TextView that
includes rich editing capabilities.
 Cont...
24
 AutoCompleteTextView
25

 It is a view that is similar to EditText, except

that it shows a list of completion suggestions
automatically while the user is typing.
 The list of suggestions is displayed in drop
down menu.
 The user can choose an item from there to
replace the content of edit box with.
 Cont…
26
 Button
27

 It is a Push-button which can be pressed, or

clicked, by the user to perform an action.
 Cont…
28
 ImageButton
29

It is a 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.
 Cont…
30
 CheckBox
31

 It is an on/off switch that can be toggled by the

user. You should use check-boxes when
presenting users with a group of selectable
options that are not mutually exclusive.
 ToggleButton
32

 It displays checked/unchecked states as a

button. It is basically an on/off button with a
light indicator.
 RadioButton
33

 It has two states: either checked or unchecked.

 This allows the user to select one option from a
set.
 RadioGroup
34
 It is used for set of radio buttons. If we check
one radio button that belongs to a radio
group, it automatically unchecks any
previously checked radio button within the
same group.
 Create UI Controls
35

a view object may have a unique ID assigned to it

which will identify the View uniquely within the
tree. The syntax for an ID, inside an XML tag is:
To create a UI Control/View/Widget you will
have to define a view/widget in the layout file
and assign it a unique ID as follows:

Then finally create an instance of the Control

object and capture it from the layout, use the
following:
 36

Android Event Handling

 Event Handling

37

Events are a useful way to collect data about a

user's interaction with interactive components of
Applications like button presses or screen touch
etc.
the Android framework maintains an event
queue as FIFO basis.
Three important concepts related to Android
Event Management
 Cont…

38

 Event Listeners − it 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.
 Event Listeners Registration − it is the process by
which an Event Handler gets registered with an Event
Listener so that the handler is called when the Event
Listener fires the event.
 Event Handlers − When an event happens and we have
registered an event listener for the event, the event listener
calls the Event Handlers, which is the method that actually
handles the event.
 Some important Event Listeners
39

OnClickListener()
 This is called when the user either clicks or
touches or focuses upon any widget like button,
text, image etc. You will use onClick() event
handler to handle such event.
OnLongClickListener()
 This is called when the user either clicks or
touches or focuses upon any widget like button,
text, image etc. for one or more seconds. You will
use onLongClick() event handler to handle such
event.
 Cont…
40

OnFocusChangeListener()
 This is called when the widget looses its focus
ie. user goes away from the view item. You will
use onFocusChange() event handler to handle
such event.
 This is also called when the user is focused on
the item and presses or releases a hardware
key on the device. You will use onKey() event
handler to handle such event.
 Cont …
41

OnTouchListener()
 This is called when the user presses the key,
releases the key, or any movement gesture on
the screen. You will use onTouch() event
handler to handle such event.

OnMenuItemClickListener()
 This is called when the user selects a menu
item. You will use onMenuItemClick() event
handler to handle such event.
 Cont …
42

onCreateContextMenuItemListener()
 This is called when the context menu is being
built(as the result of a sustained "long click)
 There are many more event listeners available
as a part of View class like OnHoverListener,
OnDragListener etc. which may be needed for
your application. So I recommend to refer
official documentation for Android application
development in case you are going to develop a
sophisticated apps.
 Event Listeners Registration
43

 Event Registration is the process by which an

Event Handler gets registered with an Event
Listener so that the handler is called when the
Event Listener fires the event.
 Though there are several tricky ways to register
your event listener for any event, among them
the top 3 ways are:-
 Cont…
44

1. Using an Anonymous Inner Class

2. Activity class implements the Listener
interface.
3. Using Layout file activity_main.xml to specify
event handler directly.
 1. Using an Anonymous Inner Class
45

public class MainActivity extends Activity {

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button sButton = (Button) findViewById(R.id.button_s);

sButton.setOnClickListener(new OnClickListener() {
public void onClick(View v) {

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

txtView.setTextSize(14);
}
});

}}
 2. Activity class implements the Listener interface.
46
public class MainActivity extends Activity implements OnClickListener{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ex1);
Button sButton = (Button) findViewById(R.id.button_s);
sButton.setOnClickListener(this);
}
public void onClick(View v) {
if(v.getId() == R.id.button_s)
{
// --- find the text view --
TextView txtView = (TextView) findViewById(R.id.text_id);
// -- change text size --
txtView.setTextSize(14);
return;
}
 3. Using Layout file activity_main.xml
47
<?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" >
<Button
android:id="@+id/button_s"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="@string/button_small"
android:onClick="doSmall"/>
</LinearLayout>
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void doSmall(View v) {
TextView txtView = (TextView) findViewById(R.id.text_id);
txtView.setTextSize(14);
return;
}
 48

Thank You