DM461 Mobile Applications

Lecture 3 –
User Interface
Part(I)

Dr. Amira Sayed A. Aziz

Faculty of Computers and Information Technology
Agenda

 Activity Lifecycle
 UI Layouts
 Types
 Attributes
 Objects Identification
 UI Controls
 UI Elements
 Creation
Activity
Lifecycle
UI Layouts

 The basic building block for user interface is a View object.

 A View occupies a rectangular area on the screen and is responsible for
drawing and event handling.
 View is the base class for widgets, which are used to create interactive UI
components like buttons, text fields, etc.
 The ViewGroup is a subclass of View and provides invisible container that
hold other Views or other ViewGroups and define their layout properties.
 At third level we have different layouts which are subclasses of ViewGroup
class and a typical layout defines the visual structure for an Android user
interface.
UI Layouts
 A layout may contain any type of widgets such as buttons,
labels, textboxes, and so on.

UI Layouts
Android Layout Types

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. This can also be done using Android Studio's
Layout Editor to build your XML layout using a drag-and-drop interface.
 Instantiate layout elements at runtime. Your app can create View and
ViewGroup objects (and manipulate their properties) programmatically.
 The Android framework gives you the flexibility to use either or both of these
methods to build your app's UI. For example, you can declare your app's
default layouts in XML, and then modify the layout at runtime.
Android Layout Types

 Linear Layout – a view group that aligns all children in a single direction,
vertically or horizontally.
 Relative Layout – a view group that displays child views in relative positions.
 Table Layout – a view that groups views into rows and columns.
 Absolute Layout – enables you to specify the exact location of its children.
 Frame Layout – a placeholder on screen that you can use to display a
single view.
 List View – a view group that displays a list of scrollable items.
 Grid View – a ViewGroup that displays items in a two-dimensional, scrollable
grid.
 Web View – used to display online content in your activity.
Android Layout Attributes

 Each layout has a set of attributes which define the visual properties of that
layout.
 ID
 Width, height
 Margins top, bottom, left, right
 Wrap_content
 Match_parent
 X coordinate, y coordinate
 Padding top, bottom, left, right
 Linear Layout

 Linear layout in Android allow

us to arrange components
horizontally in a single column
or vertically in a single row,
depending on attribute
android: orientation.
Linear Layout – Attributes

• Id: Unique identifier of layout.

• Orientation: Attribute to set linear layout orientation as vertical or horizontal.
• Layout_Weight: This attribute assigns “importance” value at each
component.
• Gravity: This attribute shows object position in x-y plan such as center, right,
top, bottom and left.
• Weight_sum: This attribute defines the maximum weighted sum.
• Divider: draw able to use as a vertical divider between buttons.
Linear Layout
Relative Layout

 Relative layout as the name

suggests, shows position of
components relative to each
other. The position can be
specified with respect to
consecutive elements or to
the parent component.
Relative Layout – Attributes

 Id: Defines ID of layout

 Gravity: It specifies position of object in x-y plan.
 IgnoreGravity: It is added to ignore gravity on a specific component.
Relative Layout
List View

 It is a layout which displays items in a

vertical scroll-able list.

 Each item in the list is positioned

below to the previous item of the list.

 List items are stored in an array and

inserted to the list by using adapter
which pulls items from array.
List View – Attributes

 android: divider, it is used as a drawable or color to draw between list items.

 android: entries, it is used to reference an array resource to populate the list
view.
 android: headerDividersEnabled, used to draw divider after each header
views.
 android: footerDividersEanabled, used to draw divider before each footer
views.
List View
Grid View

 Grid view is a layout in android

which lets you arrange components
in a two-dimensional scrollable grid.

 Components in a GridView are not

necessarily static, it can be stored in
a ListAdapter
Grid View – Attributes

 android: gravity, represents gravity in each cell like center, bottom, top, left
etc.
 android: columnWidth, used to specify width of column for each cell.
 android: horizontalSpacing, specify horizontal space between columns of
grid.
 android: verticalSpacing, used to specify vertical space between rows of
grid.
 android: numColumns, specify number of columns to show.
Grid View
 UI Controls

 Input controls are the interactive components

in your app's user interface.

 A View is an object that draws something on

the screen that the user can interact with and
a ViewGroup is an object that holds other View
(and ViewGroup) objects in order to define the
layout of the user interface.
UI Controls

 TextView  ToggleButton
 EditText  ProgressBar
 Button  Spinner
 ImageButton  TimePicker
 Checkbox  DatePicker
 RadioButton
 RadioGroup
Object Identification

 The syntax for an ID, inside an XML tag is:

 a view object may have a unique ID assigned to it which will identify the
View uniquely within the tree.

 To create an instance of the Control object and capture it from the layout,
use the following: