UISmartphone Programming (CPE 490/590)

Michael T. Shrove

ANDROID

User Interface (UI) Overview• All user interface elements in an Android app are built

using View and ViewGroup objects. • A View is an object that draws something on the screen

that the user can interact with. • A ViewGroup is an object that holds other View (and

ViewGroup) objects in order to define the layout of the interface.

• Android provides a collection of both View and ViewGroup subclasses that offer you common input controls (such as buttons and text fields) and various layout models (such as a linear or relative layout).

User Interface (UI) Layout• The user interface for each component of your app is

defined using a hierarchy of View and ViewGroup objects.• Each view group is an invisible container that organizes

child views, while the child views may be input controls or other widgets that draw some part of the UI.

UI Layout• To declare your layout, you can instantiate View objects in

code and start building a tree, but the easiest and most effective way to define your layout is with an XML file.

• XML offers a human-readable structure for the layout, similar to HTML.

• The name of an XML element for a view is respective to the Android class it represents.

• So a <TextView> element creates a TextView widget in your UI, and a <LinearLayout> element creates a LinearLayout view group.

Example

Layouts (ViewGroups)• A layout defines the visual structure for a user interface,

such as the UI for an activity or app widget. You can declare a layout in two ways:

• Declare UI elements in XML: Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts.

• Instantiate layout elements at runtime: Your application can create View and ViewGroup objects (and manipulate their properties) programmatically.

Write the XML• Using Android's XML vocabulary, you can quickly design

UI layouts and the screen elements they contain, in the same way you create web pages in HTML — with a series of nested elements.

• Each layout file must contain EXACTLY one root element, which must be a View or ViewGroup object.

• Once you've defined the root element, you can add additional layout objects or widgets as child elements to gradually build a View hierarchy that defines your layout.

• After you've declared your layout in XML, save the file with the .xml extension, in your Android project's res/layout/ directory, so it will properly compile.

Example

Load XML Resource• When you compile your application, each XML layout file

is compiled into a View resource. • You should load the layout resource from your application

code, in your Activity.onCreate() callback implementation. • Do so by calling setContentView(), passing it the

reference to your layout resource in the form of: R.layout.layout_file_name

• The onCreate() callback method in your Activity is called by the Android framework when your Activity is launched

Example

main_layout.xml

Mainactivity.java

Types of Viewgroups

•LinearLayout•RelativeLayout•TableLayout•FrameLayout•ScrollView

Common Attributes

Linear Layout• A layout that organizes its children into a single horizontal

or vertical row. • It creates a scrollbar if the length of the window exceeds

the length of the screen.• You can specify the layout direction with the

android:orientation attribute.• All children of a LinearLayout are stacked one after the

other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high.

Ex. of LinearLayout OrientationHorizontal Orientation Vertical Orientation

Code Example

Relative Layout• RelativeLayout is a view group that displays child views in

relative positions. • The position of each view can be specified as relative to

sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).

• A RelativeLayout is a very powerful utility for designing a user interface because it can eliminate nested view groups and keep your layout hierarchy flat, which improves performance.

Positing Views in Relative Layout• RelativeLayout lets child views specify their position

relative to the parent view or to each other (specified by ID).

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

Layout Properties

Attribute Description

layout_alignParentTop If true, makes the top edge of this view match the top edge of the parent. 

layout_alignParentLeftIf true, makes the left edge of this view match the left edge of the parent.

layout_alignLeftMakes the left edge of this view match the left edge of the given anchor view ID.

layout_alignRightMakes the right edge of this view match the right edge of the given anchor view ID.

Layout_belowPositions the top edge of this view below the given anchor view ID.

layout_centerHorizontalIf true, centers this child horizontally within its parent.

Code Example

WebView• If you want to deliver a web application (or just a web

page) as a part of a client application, you can do it using WebView.

• The WebView class is an extension of Android's View class that allows you to display web pages as a part of your activity layout.

• It does not include any features of a fully developed web browser, such as navigation controls or an address bar.

• All that WebView does, by default, is show a web page.

Adding a WebView• To add a WebView to your Application, simply include the

<WebView> element in your activity layout. • For example, here's a layout file in which the WebView

fills the screen:

Load a webpage• To load a web page in the WebView, use loadUrl(). For

example:

• Before this will work, however, your application must have access to the Internet.

• To get Internet access, request the INTERNET permission in your manifest file. For example:

Input Controls• Input controls are the interactive components in your

app's user interface. • Android provides a wide variety of controls you can use in

your UI, such as: buttons, text fields, seek bars, checkboxes, zoom buttons, toggle buttons, and many more.

• Adding an input control to your UI is as simple as adding an XML element to your XML layout.

Common Controls

Button• A button consists of text or an icon (or both text and an

icon) that communicates what action occurs when the user touches it.

• Depending on whether you want a button with text, an icon, or both, you can create the button in your layout in three ways:• With text using button class• With icon using imagebutton class• With text and icon using button class with android:drawableLeft

attribute

(1)

(2)

(3)

Button Examples

(1)

(2)

(3)

Responding to Click Events• When the user clicks a button, the Button object receives

an on-click event.• To define the click event handler for a button, add the

android:onClick attribute to the <Button> element in your XML layout.

• The value for this attribute must be the name of the method you want to call in response to a click event.

Example

Using an OnClickListener• You can also declare the click event handler

programmatically rather than in an XML layout.• To declare the event handler programmatically, create an

View.OnClickListener object and assign it to the button by calling setOnClickListener(View.OnClickListener). For example:

TextField (EditText)• A text field allows the user to type text into your app. • It can be either single line or multi-line. • Touching a text field places the cursor and automatically

displays the keyboard. • In addition to typing, text fields allow for a variety of other

activities, such as text selection (cut, copy, paste) and data look-up via auto-completion.

• You can add a text field to you layout with the EditText object. You should usually do so in your XML layout with a <EditText> element.

Getting Text from EditText

activity_main.xml

MainActivity.java

IOS

About Controls• A control is a communication tool between a user and an

app. • Controls convey a particular action or intention to the app

through user interaction, and can be used to manipulate content, provide user input, navigate within an app, or execute other pre-defined actions.

• Controls are simple, straightforward, and familiar to users because the appear throughout many iOS apps.

• The UIControl class is the base class for all controls on iOS, and defines the functionality that is common to all controls

About Controls• Purpose: Controls allow users to:

• Interact with an app• Manipulate or edit app content• Convey user intent to the app in a straightforward way

• Implementation: Controls are implemented in the UIControl class and discussed in UIControl Class Reference.

• Configuration: Configure controls in Interface Builder, in the Control section of the Attributes Inspector. A few configurations cannot be made through the Attributes Inspector, so you must make them programmatically. You can set other configurations programmatically, too, if you prefer.

Content of Controls• Each subclass of UIControl has different content or

values that you can set. • To learn about setting content for a particular control, read

its corresponding chapter:• Buttons• Date Pickers• Page Controls• Segmented Controls• Text Fields• Sliders• Steppers• Switches

Behavior of Controls• A control state describes the current interactive state of a

control: normal, selected, enabled, or highlighted.• A control can have more than one state at a time, and

you can change a control’s state at any point. • For a full listing of control states, see UIControlState.• The fastest way to configure the initial state of a control is

by using the Attributes Inspector:

Control Events• A control event represents various physical gestures that

users can make on controls, such as lifting a finger from a control, dragging a finger into a control, and touching down within a text field.

• For a full listing of control events, see UIControlEvents.

Target Action Mechanism• The target-action mechanism is a model for configuring a

control to send an action message to a target object after a specific control event.

• For example, when a user interacts with a slider, it generates a UIControlEventValueChanged control event.

• You could use this event to update a label’s text to the current value of the slider.

• In this case, the sender is the slider, the control event is Value Changed, the action is updating the label’s text, and the target is the controller file containing the label as an IBOutlet.

Target-Action Mechanism• To create a relationship between the slider, the control

event, the target, and the action, you can do one of two things:1. Call the addTarget:action:forControlEvents: method within

your target file:

Target-Action Mechanism

2. Use the Connections Inspector in Interface Builder to Control-drag the slider’s Value Changed event to the action method in the target file.

Target-Action Mechanism

3. Control-click the slider in Interface Builder, and drag its Value Changed event to the target object in your Storyboard. Select the appropriate action from the list of actions available for the target.

AutoLayout• Auto Layout is a system that lets you lay out your app’s

user interface by creating a mathematical description of the relationships between the elements.

• You define these relationships in terms of constraints either on individual elements, or between sets of elements.

• Using Auto Layout, you can create a dynamic and versatile interface that responds appropriately to changes in screen size, device orientation, and localization.

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html

AutoLayout• Auto Layout is built into Interface

Builder in Xcode 5• Auto Layout is enabled by default

when you create a new project.• The typical workflow for creating

user interfaces starts by using Interface Builder to create, reposition, resize, and customize your views and controls.

• When you are satisfied with the positions and settings, you’re ready to start adding Auto Layout constraints so that your interface can react to changes in orientation, size, and localization.

Using AutoLayout• The auto layout system allows you to define layout

constraints for user interface elements, such as views and controls.

• Constraints represent relationships between user interface elements.

• You can create auto layout constraints by selecting the appropriate element or group of elements and selecting an option from the menu in the bottom right corner of Xcode’s Interface Builder.

Using AutoLayout with Controls• Auto layout contains two menus of constraints: pin and

align. • The Pin menu allows you to specify constraints that define

some relationship based on a particular value or range of values.

• Some apply to the control itself (width) while others define relationships between elements (horizontal spacing).

AutoLayout Contraint Groups

Buttons• Buttons let a user initiate behavior with a tap. • You communicate a button’s function through a textual

label or with an image. • Your app changes button appearance based upon user

touch interactions, using highlighting, changes in the label or image, color, and state to indicate the button action dynamically.

Button• Purpose: Buttons allow users to:

• Initiate behavior with a tap• Initiate an action in the app with a single simple gesture

• Implementation: Buttons are implemented in the UIButton class and discussed in the UIButton Class Reference.

• Configuration: Configure buttons in Interface Builder, in the Button section of the Attributes Inspector. A few configurations cannot be made through the Attributes Inspector, so you must make them programmatically. You can set other configurations programmatically, too, if you prefer.

Configure the Button

TextFields• Text fields allows the user to input a single line of text into

an app. • You typically use text fields to gather small amounts of

text from the user and perform some immediate action, such as a search operation, based on that text.

https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/UITextField.html#//apple_ref/doc/uid/TP40012857-UITextField-SW1

TextField• Purpose: Text fields allow users to:

• Enter text as input to an app

• Implementation: Text fields are implemented in the UITextField class and discussed in the UITextField Class Reference.

• Configuration: Configure text fields in Interface Builder, in the Text Field section of the Attributes Inspector.

• A few configurations cannot be made through the Attributes Inspector, so you must make them programmatically.

• You can set other configurations programmatically, too, if you prefer.

Configure TextField

Content of TextFields• Set the content of the text field using the Text (text) field. • You can select whether you want plain or attributed text. • The placeholder appears in place whenever a text field

has no characters (before a user begins typing, or if the user deletes everything in the text field).

EXAMPLES