ANDROID

DEVELOPMENT
 2

Hello!
I am Nayyab Saeed
I am here because I love to give presentations.
You can find me at [email protected]
 3

All user interface elements in an Android app are built

using View and ViewGroup objects.
USER
INTERFACE A View is an object that draws something on the screen
that the user can interact with (such as buttons and text
fields).

A ViewGroup is an object that holds other View (and

ViewGroup) objects in order to define the layout of the
interface (such as a linear or relative layout).

https://www.tutorialspoint.com/android/android_user_interface_layouts.htm
 4

Hierarchy Of View And Viewgroup Objects:

USER The user interface for each component of your app is
defined using a hierarchy of View and ViewGroup objects.
INTERFACE
 1.
LAYOUTS
Visual structure of
something
 6

A layout defines the visual structure for a user interface,

User such as the UI for an activity.

Interface You can declare a layout in two ways:

Layouts
○ Declare UI elements in XML. Android provides a
straightforward XML vocabulary that corresponds to
the View classes and subclasses.

○ Instantiate layout elements at runtime. Your

application can create View and ViewGroup objects
(and manipulate their properties) programmatically.

https://www.tutorialspoint.com/android/android_user_interface_layouts.htm
 7

Common ○ android:id This is the ID which uniquely identifies

the layout.
Layout
○ android:orientation This specifies the direction of
Attributes: arrangement and you will use "horizontal" for a row,
"vertical" for a column. The default is horizontal.
○ android:gravity This specifies how an object should
position its content, on both the X and Y axes.
Possible values are top, bottom, left, right, center,
center_vertical, center_horizontal etc.
 8

Common ○ android:layout_width This is the width of the

layout.
Layouts
○ android:layout_height This is the height of the
Attributes: layout
NOTE: width and height can be “match-parent”, “wrap-content” or
you can define it in numbers too.

○ android:layout_weight This specifies how much of

the extra space in the layout should be allocated to
the View.
 9

Common ○ android:paddingBottomThis is the bottom padding

filled for the layout
Layouts
○ android:paddingTop This is the top padding
Attributes:
filled for the layout.
○ android:paddingRight This is the right padding
filled for the layout.
○ android:paddingLeft This is the left padding
filled for the layout
 10

Common ○ android:layout_marginTop This is the extra space

on the top side of the layout.
Layouts
○ android:layout_marginBottom This is the extra
Attributes: space on the bottom side of the layout.
○ android:layout_marginLeft This is the extra space
on the left side of the layout
○ android:layout_marginRight This is the extra space
on the right side of the layout.
 11

TYPES OF UI
LINEAR RELATIVE
LAYOUTS LAYOUT LAYOUT

GRID
LAYOUT
LINEAR LAYOUT
 13

LinearLayout is a view group that displays all

children / elements in a linear fashion, either
LINEAR vertically or horizontally.
LAYOUT

https://www.tutorialspoint.com/android/android_linear_layout.htm
14
 15

LINEAR LAYOUT EXAMPLE 1

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout ...>
<EditText
android:layout_width="fill_parent"

android:layout_height="wrap_content"
android:hint="@string/to" />
<EditText
android:layout_width="fill_parent"

android:layout_height="wrap_content"
android:hint="@string/subject" />
</LinearLayout>
 16
LINEAR LAYOUT EXAMPLE 2

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout ...>
...
<EditText
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:hint="@string/message" />
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="@string/send" />
</LinearLayout>
 17
Create following UI by using Linear Layout:

PRACTICE
QUESTION:
RELATIVE
LAYOUT
 19

Android Relative Layout enables you

to specify how child views are
RELATIVE positioned relative to each other. The
position of each view can be specified
LAYOUT as relative to sibling elements or
relative to the parent.
The position of each view can be
specified as relative to sibling elements
(left-of or below another view) or in
positions relative to the parent (such
as aligned to the bottom, left of
center).

https://www.tutorialspoint.com/android/android_relative_layout.htm
 20

RELATIVE LAYOUT EXAMPLE

<?xml version="1.0" encoding="utf-8"?>

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

</RelativeLayout>
 21

○ A RelativeLayout is a very powerful utility for

designing a user interface because it can eliminate
nested view groups and keep your layout hierarchy
RELATIVE flat, which improves performance.
LAYOUT
○ RelativeLayout lets child views specify their position
relative to the parent view or to each other (specified
by ID).

○ 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 Relative Layout’s Layout Parameters.

https://www.tutorialspoint.com/android/android_relative_layout.htm
 22
Some of the many layout properties available to views:

android:layout_alignParentTop If "true", makes the top

RELATIVE edge of this view match the top edge of the parent.
LAYOUT
PARAMETER android:layout_centerVertical If "true", centers this child
vertically within its parent.

android:layout_below Positions the top edge of this view

below the view specified with a resource ID.

android:layout_toRightOf Positions the left edge of this

view to the right of the view specified with a resource ID.
 23

○ The value for each layout property is either a boolean

to enable a layout position relative to the parent or an
RELATIVE ID that references another view in the layout against
LAYOUT which the view should be positioned.

PARAMETER ○ In your XML layout, dependencies against other views

in the layout can be declared in any order.

○ For example, you can declare that "view1" be

positioned below "view2" even if "view2" is the last
view declared in the hierarchy.
 24
○ android:layout_alignParentTop: Aligns view’s top with the
top of the parent
○ android:layout_alignParentBottom: Aligns view’s bottom
Positions with the bottom of the parent
Relative to ○ android:layout_alignParentLeft: Aligns view’s left side with
Parent the left side of the parent
○ android:layout_alignParentRight: Aligns view’s right side
with the right side of the parent
○ android:layout_centerHorizontal: Positions view
horizontally at the center of the parent
○ android:layout_centerVertical: Positions view vertically at
the center of the parent
○ android:layout_centerInParent: Positions view both
horizontally and vertically at the center of the parent
 25

○ android:layout_above: Indicates that view should be

placed above the view referenced in the property
Positions ○ android:layout_below: Indicates that view should be
Relative to placed below the view referenced in the property
other views ○ android:layout_toLeftOf: Indicates that view should be
placed to the left of the view referenced in the property
○ android:layout_toRightOf: Indicates that view should be
placed to the right of the view referenced in the property
 26

○ android:layout_alignTop: Indicates that view’s top edge

should be aligned with the top edge of the view referenced
Positions in the property

Relative to ○ android:layout_alignBottom: Indicates that view’s bottom

edge should be aligned with the bottom edge of the
other views viewreferenced in the property
○ android:layout_alignLeft: Indicates that view’s left edge
should be aligned with the left edge of the view referenced
in the property
○ android:layout_alignRight: Indicates that view’s right edge
should be aligned with the right edge of the view
referenced in the property
 27
Relative LAYOUT EXAMPLE 1

<?xml version="1.0" encoding="utf-8"?>

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

<EditText
android:id="@+id/name“
android:layout_width="fill_parent“
android:layout_height="wrap_content“
android:hint="@string/reminder" />
<EditText 28
android:id="@+id/dates“
android:layout_width="wrap_content“
android:layout_height="wrap_content“
android:layout_below="@id/name“
android:layout_alignParentLeft="true“/>
<EditText
android:id="@id/times“
android:layout_width="96dp“
android:layout_height="wrap_content“
android:layout_below="@id/name“
android:layout_alignParentRight="true" />
<Button
android:layout_width="96dp“
android:layout_height="wrap_content“
android:layout_below="@id/times“
android:layout_alignParentRight="true“
android:text="@string/done" />
</RelativeLayout>
 29
Create following UI by using Relative Layout:

PRACTICE
QUESTION:
 GRID
LAYOUT
 31
○ GridLayout is a layout that divides its view space into
rows, columns, and cells.

GRID ○ GridLayout places views in it automatically, but it is

also possible to define the column and row index to
LAYOUT place a view into GridLayout.

○ With the span property of cells, it is possible to make

a view span multiple rows or columns.

○ GridLayout has been available since API Level 14, so

the minimum SDK property should be set to 14 or
greater
 RELATIVE LAYOUT EXAMPLE 1 32
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android
"
android:layout_width="fill_parent“ A B C
android:layout_height="fill_parent“ D E F
android:columnCount="3"
android:rowCount=“3" G H I
android:orientation="horizontal" >
<TextView android:text=“A" />
<TextView android:text=“B" />
<TextView android:text=“C" />
<TextView android:text=“D" />
<TextView android:text=“E" />
<TextView android:text=“F" />
<TextView android:text=“G" />
<TextView android:text=“H" />
<TextView android:text=“I" />
</GridLayout>
 RELATIVE LAYOUT EXAMPLE 2
33
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent“
android:layout_height="fill_parent“ A B
android:columnCount="3"
android:rowCount=“3"
android:orientation="horizontal" > C D E
<TextView android:text=“A“ />
<TextView android:text=“B" F G
android:layout_columnspan="2"
android:layout_gravity="fill"
android:gravity="center” />
<TextView android:text=“C" />
<TextView android:text=“D" />
<TextView android:text=“E"
android:layout_rowSpan="2"
android:layout_gravity="fill“ />
<TextView android:text=“F” />
<TextView android:text=“G" />
</GridLayout>
 34
Create following UI by using Grid Layout:

PRACTICE
QUESTION
 35

Thanks!
Any questions?