ITEC-343

LEVEL 8

MOBILE APPLICATION
DEVELOPMENT

Course Coordinator
Ms. Shazia Ali
 CHAPTER 3
Getting To Know The Android
User Interface
TOPICS TO BE COVERED
• Components of Screen
• Views and ViewsGroup
• Frame Layout, Linear Layout, Table Layout, Relative Layout
• Units of Measurement
• Scroll View
• Orientation
• Anchoring Views
• Action Bar
 4

USER INTERFACE
• User interface in a mobile app refers to the visual and interactive elements that allow the user to interact with
the app
• It encompasses everything like layout, design, navigation, various input controls, images videos etc.
• The basic unit of an Android application is an activity, which displays the UI(User Interface) of your
application using Views and ViewGroups
• A view is a widget that has an appearance on screen
• Examples: buttons, labels, and text boxes
• A view derives from the base class android.view.View

• A ViewGroup (which is itself a special type of view) is to group views logically—such as a group of
buttons with a similar purpose
• Another type of ViewGroup is a Layout used to group and arrange views visually on the screen
• Also derives from android.view.ViewGroup
• FrameLayout, LinearLayout, TableLayout, GridLayout, RelativeLayout
 DIFFERENCE BETWEEN VIEW&
5

VIEW GROUP
VIEW VIEW GROUP
1. View is the basic building block of the UI in 1. ViewGroup is a subclass of View and acts as a container
Android. for other Views.
2. It represents a single UI element or widget, such as a 2. It provides a way to organize and manage multiple
button, text field, image, or any other interactive or Views within a single container.
non-interactive element. 3. ViewGroup defines the layout structure and positioning
3. Views are responsible for rendering content, of its child Views.
handling user input, and responding to events. 4. Examples of ViewGroup subclasses include
4. Each View occupies a rectangular area on the screen LinearLayout, RelativeLayout, FrameLayout,
and can have properties like width, height, visibility, ConstraintLayout, etc.
background color, and more. 5. ViewGroup can contain other ViewGroups, creating a
5. Examples of View subclasses include TextView, hierarchy of nested containers.
Button, ImageView, EditText, etc. 6. ViewGroup manages the layout and measurement of its
6. Views can be arranged and structured within a child Views, determining how they are positioned and
layout using ViewGroup. sized within its boundaries.
 LAYOUTS WITH VIEW & VIEWGROUP 6

Layouts are a type of View called a ViewGroup It’s not just the GUI
components that are a type of view. Under the hood, a layout is a special type
of view called a view group. All layouts are subclasses of the
android.view.ViewGroup class.
 FRAMELAYOUT
• The FrameLayout is the most basic of the
Android layouts.
• FrameLayouts are built to hold one View
• The FrameLayout is used to help you
control the stacking of single views as the
screen is resized (or screens with different
resolutions)
• FrameLayout is a type of ViewGroup in
Android that allows you to stack multiple
child views on top of each other, with
each child occupying the entire area of
the FrameLayout.
• It is a simple and lightweight layout
container that is often used for displaying
overlapping views
7
 HOW YOU DEFINE FRAMELAYOUT 8

You define a frame layout using the element like this:

<FrameLayout
xmlns:android=http://schemas.android.com/apk/res/android
android:layout_width="match_parent"
android:layout_height="match_parent" ...>

</FrameLayout>
FrameLayout

9
 LINEAR LAYOUT (VERTICAL & HORIZONTAL)

• The LinearLayout arranges views in a single

column or a single row.

• LinearLayout is a type of ViewGroup in Android

that arranges child views in a linear fashion either
vertically or horizontally. It is a simple and
versatile layout container that allows you to create
linear arrangements of views.

• LinearLayout is a flexible and widely used

layout container in Android that allows you to
create linear arrangements of views. It is
suitable for various UI layouts, such as vertical
or horizontal lists, form-like structures, and
more.
10
 SYNTAX TO DEFINE LINEAR LAYOUT 11

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
...
<EditText
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:hint="@string/to" />

<EditText
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:hint="@string/message" />
...
</LinearLayout>
COMMON ATTRIBUTES OF VIEWS &
VIEWGROUPS

12
 TABLE LAYOUT

• The TableLayout Layout groups

views into rows and columns
• Use the <TableRow> element to
designate a row in the table
• Each row can contain one or more
views. Each view you place within
a row forms a cell.
• The width of each column is
determined by the largest width of
each cell in that column
13
 SYNTAX TO DEFINE TABLE LAYOUT 14

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TextView
android:text="Time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />

</TableRow>

</TableLayout>
 RELATIVE LAYOUT
• The RelativeLayout enables you to
specify how child views are
positioned relative to each other
• RelativeLayout has attributes that
enable it to align with another view.
These attributes are as follows:
➤ layout_alignParentTop
➤ layout_alignParentStart
➤ layout_alignStart
➤ layout_alignEnd
➤ layout_below
➤ layout_centerHorizontal

15
 SYNTAX TO DEFINE RELATIVE LAYOUT 16

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/andr
oid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp" >

…………..

</RelativeLayout>
GRID LAYOUT
17

• GridLayout is a layout manager that

arranges the views in a grid
• In Android GridLayout, we can specify
the number of columns and rows that
the grid will have.
• We can customize the GridLayout
according to our requirements, like
setting the size, color or the margin for
the Layout.
 18

SYNTAX TO DEFINE GRID LAYOUT

<GridLayout
xmlns:android= “http://schemas.android.com/apk/res/android”
android: id= “@+id/GridLayout”
android: layout_width= “match_parent”
android: layout_height= “match_parent”
</GridLayout>
 SCROLL VIEW 19

• A ScrollView is a special type of

FrameLayout in that it enables
users to scroll through a list of
views that occupy more space
than the physical display
• The ScrollView can contain only
one child view or ViewGroup,
which normally is a
LinearLayout
 SYNTAX FOR SCROLL VIEW 20

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- Content within the ScrollView -->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<!-- Add your views here -->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a long text that will be scrollable." />

<!-- Add more views as needed -->

</LinearLayout>
 ADAPTING TO DISPLAY 21

ORIENTATION
One of the key features of modern smartphones is their ability to switch screen
orientation, and Android is no exception. Android supports two screen orientations:
portrait and landscape. In general, you can employ two techniques to handle changes
in screen orientation:
• Anchoring—The easiest way is to “anchor” your views to the four edges of the
screen. When the screen orientation changes, the views can anchor neatly to the
edges.
• Resizing and repositioning—Whereas anchoring and centralizing are simple
techniques to ensure that views can handle changes in screen orientation, the
ultimate technique is resizing each and every view according to the current screen
orientation.
 ANCHORING VIEWS 22

Anchoring can be easily achieved by using

RelativeLayout
• layout_alignParentStart—Aligns the
view to the left of the parent view
• layout_alignParentEnd—Aligns the
view to the right of the parent view
• layout_alignParentTop—Aligns the
view to the top of the parent view
• layout_alignParentBottom—Aligns the
view to the bottom of the parent view
• layout_centerVertical—Centers the
view vertically within its parent view
• layout_centerHorizontal—Centers the
view horizontally within its parent
view
 DISPLAY ORIENTATION 23

• When the screen orientation changes to landscape mode, the four

buttons are aligned to the four edges of the screen, and the center
button is centered in the middle of the screen with its width fully
stretched
•
• Following are two other values that you can specify in the
Orientation attribute:
• ➤ portrait—Portrait mode
• ➤ sensor—Based on the accelerometer (default)
LANDSCAPE DISPLAY
ORIENTATION

24
 UNITS OF MEASUREMENT

• Size of an element on an Android UI

• dp—Density-independent pixel. 1 dp is equivalent to one pixel on a
160 dpi screen
• sp—Scale-independent pixel. This is similar to dp and is recommended
for specifying font sizes
• pt—Point. A point is defined to be 1/72 of an inch, based on the
physical screen size
• px—Pixel. Corresponds to actual pixels on the screen. Using this unit is
not recommended

25
 ACTION BAR
■ Action Bar displays the application icon and
the activity title
■ The action bar is a component in Android
that provides a consistent user interface for
navigation, actions, and other options within
an application.
■ It typically appears at the top of the screen
and contains app branding, navigation icons,
and action items. The action bar is a crucial
part of the Material Design guidelines and
helps users understand and interact with the
app's functionality.

26
 27

REVIEW QUESTIONS
1. What is View? Give Examples.
2. Compare View and ViewGroup.
3. Discuss the different types of Layouts in ViewGroup.
4. Differentiate between dp unit and px unit of measurement.
5. What is scroll view?.
6. What are the techniques to handle screen orientation?
7. List and Explain common attributes of Views and Views Group.
8. Explain briefly Table Layout and frame layout with syntax.
9. Explain briefly Relative Layout and Linear layout with syntax.
10. Explain using of Anchoring Views.