Overview What is GUI? A graphical user interface (GUI) is a set of - - PowerPoint PPT Presentation

Android User Interface Overview

What is GUI?

• A graphical user interface (GUI) is a set of

visual elements that allows a user to interact with the application

• For Android, some of the GUI elements

you can use are shown on the next slide

COMP 355 (Muppala) Android UI Overview 2

Examples of GUI Components

COMP 355 (Muppala) Android UI Overview 3

What is Widgets?

• In Android, UI components are

shown in a form of widgets

• Examples of widgets are buttons,

labels, text boxes, etc…

COMP 355 (Muppala) Android UI Overview 4

What is a View?

• An Android view is a

place that has some UI components on the screen

• Here is an example of

a view that has two buttons and a text box

COMP 355 (Muppala) Android UI Overview 5

GUI, Intelligent and Data Layers

COMP 355 (Muppala) Android UI Overview 6

Data Layer Intelligence Layer GUI Layer

User

Data JAVA Code User Interface

Android Events

• An event is typically generated when a user

interacts with objects in an application, such as an app

• Below are some example events generated

in Excel:

– Clicking a button (Click event) – Touching the screen (Touch event) – Scaling an image with two fingers (Multi-touch event)

• A user interacts with GUI components and

creates events

• The event runs some code which we call

the event handler code

Overview

Developer completes event handler code Developer

Developer designs the GUI User GUI Design using widgets and views User interacts with the app

Java code

Example GUI

The event handler code

User Interface Events

• User's interaction with views/widgets generate events,

requiring you to perform actions in response to the events

• To be informed of UI events, you need to do one of two

things:

– Define an event listener and register it with the View

• More often than not, this is how you'll listen for events
• The View class contains a collection of nested interfaces named

On<something>Listener, each with a callback method called On<something>(). E.g., OnClickListener(), OnKeyListener(), …

– Override an existing callback method for the View

• This is what you should do when you've implemented your own View

class and want to listen for specific events that occur within it

COMP 355 (Muppala) Android UI Overview 9

Event Listeners

• Interface in the View class that contains a single callback

method

• 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

• Several callback methods available: onClick(), onLongClick(),
• nFocusChange(), onKey(), onTouch(),
• nCreateContextMenu()

COMP 355 (Muppala) Android UI Overview 10

Event Listeners

• nClick()

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

• nLongClick()

– 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).

• nFocusChange()

– From View.OnFocusChangeListener. This is called when the user navigates

• nto or away from the item, using the navigation-keys or trackball.

COMP 355 (Muppala) Android UI Overview 11

Event Listeners

• onKey()

– From View.OnKeyListener. This is called when the user is focused on the item and presses or releases a 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 Creating Menus for more information.

COMP 355 (Muppala) Android UI Overview 12

Event Listeners 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 } ... }

COMP 355 (Muppala) Android UI Overview 13

Event Listeners

• Depending on the event, some event listener methods must

return a (boolean) value to indicate whether they have consumed the event and the event should not be carried further.

– onLongClick()

• Return true to indicate that it has handled the event and it should stop

here; return false if it hasnot handled it and/or the event should continue to any other on-click listeners.

– onKey()

• Return true to indicate that it has handled the event and it should stop

here; return false if it has not handled it and/or the event should continue to any other on-key listeners.

COMP 355 (Muppala) Android UI Overview 14

Event Listeners

– onTouch()

• This event can have multiple actions that follow each other. So, if you

return false when the down action event is received, you indicate that you have not consumed the event and are also not interested in subsequent actions from this event. Thus, you will not be called for any other actions within the event, such as a finger gesture, or the eventual up action event.

• Android will call event handlers first and then the appropriate

default handlers from the class definition second. As such, returning true from these event listeners will stop the propagation of the event to other event listeners and will also block the callback to the default event handler in the View. So be certain that you want to terminate the event when you return true.

COMP 355 (Muppala) Android UI Overview 15

Event Handlers

• Android allows users to create their own custom view

subclasses if the standard widgets are not sufficient.

• For custom view components created by users, events are

handled using event handlers:

– 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

• ccurs.

– onTouchEvent(MotionEvent) - Called when a touch screen motion event occurs. – onFocusChanged(boolean, int, Rect) - Called when the view gains or loses focus.

COMP 355 (Muppala) Android UI Overview 16

Hands-on Exercise ButtonFun Example

Session 1.4 - http://www.cse.ust.hk/~csclchan/AADC/lab/session1/index.html

ButtonFun Example

• ButtonFun app consists of two

buttons and a text view

• When the user taps the left

button, the text of label changes as `Left button is pressed’

• When the user taps the right

button, the text of label changes `Right button is pressed’

COMP 355 (Muppala) Android UI Overview 18

After This Exercise…

• You have learnt several items:

– Use the Eclipse Graphical Layout Builder to build your user interface by drag-and-drop actions – Use the Eclipse smart code sheet to help you import some code snippet – Write some code to add an handler in onCreate() method – Write some code in onClick() method to handle two button events

COMP 355 (Muppala) Android UI Overview 19

View, Viewgroup, View Hierarchy

View, Viewgroup, View Hierarchy

• User interface built using

views and viewgroup

• bjects
• View

– Base class for widgets – Textboxes, EditText boxes, buttons, …

• Viewgroup

– Base class for layouts – Linear, Relative, Tabular, …

• View Hierarchy

– Hierarchy of views and viewgroups

COMP 355 (Muppala) Android UI Overview 21 viewgroup viewgroup view view view view view

Last Example – View Hierarchy

• The vertical linear

layout is the root element and contains a text view and a horizontal linear layout which consists of two buttons

COMP 355 (Muppala) Android UI Overview 22

Many Views …

• Sometimes, only one view is not enough to

show all the parts in an application

• For example, if you want to design a game,

you may have a welcome view to show the game instructions, a play view to interact with the user and a result view to show the result of a game

COMP 355 (Muppala) Android UI Overview 23

Hands-on Exercise Touch Example Part I

Session 2.1, 2.2 - http://www.cse.ust.hk/~csclchan/AADC/lab/session2/index.html

Touch Example I

• This app consists of a Funny

bird image view and a text view

• When the user taps on the

funny bird image, it will animate and become bigger;

• When the user releases the

touch and it will shrink back to the original size

• The user can also drag the

funny bird image

• Corresponding message will

shown in the text view

COMP 355 (Muppala) Android UI Overview 25

After This Exercise…

• You have learnt several items:

– Use an image view to show the FunnyBird image – Handle onTouch() events such as, ACTION_DOWN, ACTION_MOVE, ACTION_UP – Detect whether the user touches FunnyBird image view and perform corresponding animations and dragging actions

COMP 355 (Muppala) Android UI Overview 26

Hands-on Exercise Touch Example Part II

Session 2.3 - http://www.cse.ust.hk/~csclchan/AADC/lab/session2/index.html

Touch Example II

• There are two views in this example
• In the first view, the user needs to tap
• n the funny bird exactly 15 trials

within 5 seconds – If the number of trials is not matched, the user loses the game

• The second view will display the result

message with a retry button automatically – If the user presses the retry button, it will restart the game. – Otherwise, the user wins the game and the app displays the second view with the success message

COMP 355 (Muppala) Android UI Overview 28

A Game Example Which Has Many Views

COMP 355 (Muppala) Android UI Overview 29

After This Exercise…

• You have learnt several items:

–Shift views by calling StartActivity(); –Create a result view and receive the number of counts from the game mode –Pass data from the game to the result view

COMP 355 (Muppala) Android UI Overview 30