1. UI
Smartphone Programming (CPE 490/590)
Michael T. Shrove

2. ANDROID

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

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

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

6. Example

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

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

9. Example

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

11. Example
main_layout.xml
Mainactivity.java

12. Types of Viewgroups
•LinearLayout
•RelativeLayout
•TableLayout
•FrameLayout
•ScrollView

13. Common Attributes

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

15. Ex. of LinearLayout Orientation
Horizontal Orientation Vertical Orientation

16. Code Example

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

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

19. Layout Properties
Attribute Description
layout_alignParentTop
If true, makes the top edge of this view match the
top edge of the parent.
layout_alignParentLeft
If true, makes the left edge of this view match the
left edge of the parent.
layout_alignLeft
Makes the left edge of this view match the left
edge of the given anchor view ID.
layout_alignRight
Makes the right edge of this view match the right
edge of the given anchor view ID.
Layout_below
Positions the top edge of this view below the given
anchor view ID.
layout_centerHorizontal
If true, centers this child horizontally within its
parent.

20. Code Example

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

22. 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:

23. 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:

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

25. Common Controls

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

27. Button Examples
(1)
(2)
(3)

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

29. Example

30. 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:

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

32. Getting Text from EditText
activity_main.xml
MainActivity.java

33. IOS

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

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

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

37. 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:

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

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

40. 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:

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

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

43. 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/Con
ceptual/AutolayoutPG/Introduction/Introduction.html

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

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

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

47. AutoLayout Contraint Groups

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

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

50. Configure the Button

51. 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/UserExperien
ce/Conceptual/UIKitUICatalog/UITextField.html#//apple_ref/doc/uid/TP4001285
7-UITextField-SW1

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

53. Configure TextField

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

55. EXAMPLES