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 Data Intelligence GUI Layer Layer Layer User Interface Data JAVA Code User COMP 355 (Muppala) Android UI Overview 6

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 GUI Design using widgets and views The event handler code Java code Example GUI Developer User interacts designs the GUI with the app Developer Developer User completes 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(), onFocusChange(), onKey(), onTouch(), onCreateContextMenu() COMP 355 (Muppala) Android UI Overview 10

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. 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 occurs. – 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 objects • View – Base class for widgets viewgroup – Textboxes, EditText boxes, buttons, … viewgroup view view • Viewgroup – Base class for layouts view view view – Linear, Relative, Tabular, … • View Hierarchy – Hierarchy of views and viewgroups COMP 355 (Muppala) Android UI Overview 21

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