Download Lecture 19 Introduction to Android User Interface (UI) By Shinping R. Wang

Lecture 19
Introduction to Android User Interface (UI)
By Shinping R. Wang
CSIE Dept. of Da‐yeh University
Note


A “what is” introduction
Avoids covering too much detail.
Reference

The following discussion is excerpted from
1.
Android Developer:
http://developer.android.com/guide/topics/ui/index.html
2.
Android Resources:
http://developer.android.com/resources/samples/ApiDemos/
src/com/example/android/apis/app/index.html#Activity
View & ViewGroup

View class/object


Is a data structure whose properties defined layout and
contents of a specific rectangular area in the screen.
handles its own measurement, layout, drawing, focus change,
scrolling, and key/gesture interactions of the user to itself.
View & ViewGroup

ViewGroup class serves as the


base for subclasses called "layouts“
kinds of layout:




Linear,
Tabular,
Relative, and
etc…
View Hierarchy

A UI is a tree like hierarchy of Views


View objects are leaves in the tree, ViewGroup objects are
branches in the tree
For Example

http://developer.android.com/images/viewgroup.png
Android design methodology

Logic and UI are designed separately,


Logic – using Java
UI - using xml
View Hierarchy

setContentView()

In order to attach the view hierarchy tree to the screen for
rendering, your Activity(logic) must call the setContentView()
method and pass a reference to the root node object.

http://developer.android.com/images/viewgroup.png
View Hierarchy

The Android system receives this reference and uses it to
invalidate, measure, and draw the tree.
View Hierarchy

The root node of the hierarchy requests that its child
nodes draw themselves — in turn, each view group node
is responsible for calling upon each of its own child views
to draw themselves.
Layout
<?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="Hello, I am a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
:
</LinearLayout>
</LinearLayout>
Layout

Pre-defined view groups offered by Android (called
layouts) include





LinearLayout,
RelativeLayout,
TableLayout,
GridLayout and
others.
Widgets

A widget


Is a View object that serves as an interface for interaction with
the user.
Can be pre-built





buttons,
checkboxes,
text-entry fields,
date picker, and more. See
http://developer.android.com/reference/android/widget/packagesummary.html
Input Events

There are two ways to sense and respond to user input
events,


Overriding defined event callback methods of class View a.k.a.
Event Handlers scheme
User defined callback methods using listener which is more
commonly use a.k.a. Event listeners scheme.
Input Events

(Event Handler) Overriding defined event callback
methods of class View


Adapted when you've implemented your own View class and
want to listen for specific events that occur within it.
For example





onKeyDown(int, KeyEvent) - Called when a new key event occurs.
onKeyUp(int, KeyEvent) - Called when a key up event occurs.
onTrackballEvent(MotionEvent) - Called when a trackball motion
event occurs.
onTouchEvent(MotionEvent) - Called when a touch screen motion
event occurs.
onFocusChanged(boolean, int, Rect) - Called when the view gains or
loses focus.
Input Events


Event Listeners
User defined callback methods using listener which is
more commonly use.



Implementing the pre-defined interface,
Defined the corresponding callback methods,
Register the callback methods to the interface.
Input Events

Event Listeners



In a view object, you need to do one of two things:
Define an event listener and register it with the View.
On<something>Listener and the corresponding callback
method On<something>()
Input Events

Event Listeners

For example:
The interface
the registration
the call back method
View.OnClickListener
setOnClickListener()
onClick()
View.OnTouchListener
setOnTouchListener()
onTouch()
View.OnKeyListener
setOnKeyListener()
onKey()
Advanced Topics
Adapters


AdapterView object is an implementation of ViewGroup
that determines its child views based on a given Adapter
object.
Adapter acts like a courier between your data source
(perhaps an array of external strings) and the
AdapterView
Building layouts with an adapter

Adapter and AdapterView


Adapter binds data to its layout where
layout is a subclass of the class AdapterView.
Building layouts with an adapter

Adapter and AdapterView


You use different Adapter for different AdapterView
For example, an ArrayAdapter[T] for Spinner
Advanced Topics
Styles and Themes

Style


is a set of one or more formatting attributes that you can apply
as a unit to individual elements in your layout.
theme

is a set of one or more formatting attributes that you can apply
as a unit to all activities in an application, or just a single
activity.