Android User Interface Overview · User Interface Events • User's interaction with views/widgets...

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


What is Widgets?

• In Android, UI components are shown in a form of widgets

• Examples of widgets are buttons, labels, text boxes, etc…


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


GUI, Intelligent and Data Layers


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


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(), onFocusChange(), onKey(), onTouch(), onCreateContextMenu()


Event Listeners

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


http://developer.android.com/reference/android/view/View.OnClickListener.html

http://developer.android.com/reference/android/view/View.OnLongClickListener.html

http://developer.android.com/reference/android/view/View.OnFocusChangeListener.html

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.


http://developer.android.com/reference/android/view/View.OnKeyListener.html

http://developer.android.com/reference/android/view/View.OnTouchListener.html

http://developer.android.com/reference/android/view/View.OnCreateContextMenuListener.html

http://developer.android.com/guide/topics/ui/menus.html

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


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.






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.




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

– onTouchEvent(MotionEvent) - Called when a touch screen motion event occurs.

– onFocusChanged(boolean, int, Rect) - Called when the view gains or loses focus.


http://developer.android.com/reference/android/view/View.html




























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’


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


View, Viewgroup, View Hierarchy

View, Viewgroup, View Hierarchy

• User interface built using views and viewgroup objects

• View – Base class for widgets – Textboxes, EditText boxes,

buttons, …

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

• View Hierarchy – Hierarchy of views and

viewgroups


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


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


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



• 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


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 on 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


A Game Example Which Has Many Views



• 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


Android User Interface Overview · User Interface Events • User's interaction with views/widgets...

Documents

Transcript of Android User Interface Overview · User Interface Events • User's interaction with views/widgets...