Chapter 3

Components of Screen
• Activity
• Layout
• Views
• ViewGroup
• Activity
• An activity represents a single screen with a user
interface,in-short Activity performs actions on the screen.

• All Activities interact with the user so Activity class takes

care of creating a window in which user can place UI.

• In Android UI is defined by XML file.

• UI is processed by onCreate() event handler in Activity class

using
setContentView() method of Activity class
 Layout
• It is type of View class to organize other controls.

• It is type of resource which gives definition of what is

drawn on screen or how elements are placed on device’s
screen .

• It is stored as XML files in the/res/layout resource directory

for the application
Views
• A View usually draws something the user can see
and interact with.

• A View is a widget that has an appearance on

screen

• Ex. Buttons,labels,textbox etc

ViewGroup
• ViewGroup is an invisible container of other views (child
views) and other ViewGroup.

• ViewGroup is a special kind of view that is extended from

View as its base class.

• ViewGroup is the base class for layouts

• The group of Views is the ViewGroup.

• Eg: LinearLayout is a ViewGroup that can contain other

views in it. .
 View ViewGroup
simple rectangle box that responds ViewGroup is the invisible container
er’s actions. View and ViewGroup

ViewGroup is a collection of Views(T

he SuperClass of All component like
EditText, ListView, etc..), somewhat
EditText, ListView, etc
container.

bject is a component of the user A ViewGroup object is a layout, that

(UI) like a button or a text box, and container of other ViewGroup objec
alled a widget. (layouts) and View objects (widgets

ViewGroup refers to the

rs to the android.view.View class
android.view.ViewGroup class

iew.View which is the base class of all

ViewGroup is the base class for Layo
s.
Fundamentals UI Design
• Layout/ViewGroup
• View
• Activities
• Fragments
• Notification Overview
• App Bar/Action Bar
• View Pager
• Swipe to refresh
• Toast messages
• Snackbar
• Dialog box
• Menus
• Search
• Controllling System UI visibility
Fragment
• Android Fragment is the part of activity, it is also known as
sub-activity. There can be more than one fragment in an
activity. Fragments represent multiple screen inside one
activity.
• Android fragment lifecycle is affected by activity lifecycle
because fragments are included in activity.
• Each fragment has its own life cycle methods that is affected
by activity life cycle because fragments are embedded in
activity.
• The FragmentManager class is responsible to make
interaction between fragment objects.
Notification Overview
• A notification is a message
that Android displays
outside your app's UI to
provide the user with
reminders, communication
from other people, or other
timely information from your
app.
• Users can tap the
notification to open your app
or take an action directly
from the notification.
App Bar/Action Bar
• In Android applications, Act
ionBar is the element
present at the top of
the activity screen.
• It is a salient feature of a
mobile application that has
a consistent presence over
all its activities.
• It provides a visual
structure to the app and
contains some of the
frequently used elements
for the users.
 View Pager
ViewPager in Android is
a class that allows the
user to flip left and
right through pages of
data.
This class provides the
functionality to flip
pages in app. It is a
widget found in the
support library.
 Swipe to refresh
• Android provides a widget
that implements the
swipe-to-refresh design
pattern, which allows the
user to trigger an update
with a vertical swipe.
• This is implemented by
the SwipeRefreshLayout
widget, which detects the
vertical swipe, displays a
distinctive progress bar,
and triggers callback
methods in your app.
Toast messages
Andorid Toast can
be used to display
information for the
short period of time.

A toast contains
message to be
displayed quickly
and disappears after
sometime.
Snackbar
• Snackbar in android is a new
widget introduced with the
Material Design library as a
replacement of a Toast.
• Android Snackbar is light-
weight widget and they are
used to show messages in
the bottom of the application
with swiping enabled.
• Snackbar android widget may
contain an optional action
button.
 Dialog Boxes
• A dialog is a small
window that prompts the
user to make a decision
or enter additional
information.
• A dialog does not fill the
screen and is normally
used for modal events
that require users to take
an action before they can
proceed.
Menus
Menus are a common
user interface
component in many
types of applications. To
provide a familiar and
consistent user
experience, you should
use the Menu
APIs to present user
actions and other options
in your activities.
 Controllling System UI visibility

System UI is a type of user

interface that enables users
to control and customize their
displays independent of an
app.
System UI is an Android
application that enables display
customization independent of
third-party apps.
In even simpler terms,
everything you see on Android
that is not an app is System UI.
 Search
• In Android, SearchView widget
provide search user interface
where users can enter a
search query and then submit
a request to search provider.
• It shows a list of query
suggestions or results if
available and allow the users
to pick a suggestion or result
to launch into.
 Layout
layout are containers which are used for laying all
other elements within them
• A layout defines the structure for a user interface in your
app, such as in an activity.

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.You can also use 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.
Layout attributes
Each layout has a set of attributes which define the visual properties of that layout.
There are few common attributes among all the layouts and their are other attributes
which are specific to that layout.
Following are common attributes and will be applied to all the layouts:
1 android:id
This is the ID which uniquely identifies the view
2 android:layout_width
This is the width of the layout.
3 android:layout_height
This is the height of the layout
4 android:layout_marginTop
This is the extra space on the top side of the layout.
5 android:layout_marginBottom
This is the extra space on the bottom side of the layout.
6 android:layout_marginLeft
This is the extra space on the left side of the layout.
7 android:layout_marginRight
This is the extra space on the right side of the layout.
8 android:layout_gravity
This specifies how child Views are positioned.
9 android:layout_weight
This specifies how much of the extra space in the layout should be allocated to the View.

10 android:layout_x
This specifies the x-coordinate of the layout.
11 android:layout_y
This specifies the y-coordinate of the layout.
12 android:layout_width
This is the width of the layout.
13 android:paddingLeft
This is the left padding filled for the layout.
14 android:paddingRight
This is the right padding filled for the layout.
15 android:paddingTop
This is the top padding filled for the layout.
16 android:paddingBottom
This is the bottom padding filled for the layout.
LinearLayout
• Linear layout is a simple layout used in android for layout
designing.
• In the Linear layout all the elements are displayed in
linear fashion means all the childs/elements of a linear
layout are displayed according to its orientation.
• The value for orientation property can be either
horizontal or vertical.
Vertical Orientation
In this all the child are arranged vertically in a line one after the other.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:id="@+id/button"
android:background="#358a32" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:id="@+id/button2"
android:background="#358a32" />
</LinearLayout>
Horizontal Orientation
In this all the child are arranged horizontally in a line one after the other.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation=“horizontal">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:id="@+id/button"
android:background="#358a32" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:id="@+id/button2"
android:background="#358a32" />
</LinearLayout>
gravity:
The gravity attribute is an optional attribute which is used to control the
alignment of the layout like left, right, center, top, bottom etc.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation=“horizontal“
android:gravity=“right“>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:id="@+id/button"
android:background="#358a32" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:id="@+id/button2"
android:background="#358a32" />
</LinearLayout>
layout_weight: The layout weight attribute specify each child
control’s relative importance within the parent linear layout.
• <?xml version="1.0" encoding="utf-8"?>
• <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/a
ndroid"
• android:layout_width="match_parent"
• android:layout_height="match_parent"
• android:orientation="horizontal">
• <Button
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:text="Weight 2"
• android:background="#761212"
• android:layout_margin="5dp"
• android:id="@+id/button"
• <Button
•
android:layout_width="wrap_content"
•
android:layout_height="wrap_content"
• android:background="#761212"
• android:layout_margin="5dp"
• android:layout_weight="1"
• android:text="Weight 1" />
• </LinearLayout>
 Absolute Layout
In Android, an Absolute Layout is a layout used to design the custom layouts. In
this layout you can specify the exact location of its children by using x and y
coordinates.

• id: In android id is a attribute used to uniquely identify a

Absolute Layout.
• <AbsoluteLayout
• android:id="@+id/absoluteLayout"
• android:layout_width="fill_parent"
• android:layout_height="fill_parent"/>
• layout_x: In Absolute Layout layout_x attribute is used to specify
the x- coordinate of the view(TextView or any other view). The
possible value for this is in dp or px.

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AbhiAndroid"
android:textSize="25sp"
android:layout_x="200px"/>
layout_y:
In AbsoluteLayout layout_y attribute is used to specify the y- coordinate of the
view(TextView or any other view). The possible value for this is in dp or px.

• <TextView
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:text="AbhiAndroid"
• android:textSize="25sp"
• android:layout_y="200px"/>
Table Layout
In Android, Table Layout is used to arrange the group of views into rows and columns.

Table Layout containers do not display a border line for their columns, rows or cells.

A Table will have as many columns as the row with the most cells.
• <TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
• android:layout_width="match_parent"
• android:layout_height="match_parent"
• android:collapseColumns="0"> <!-- collapse the first column
of the table row-->
• <!-- first row of the table layout-->
• <TableRow
• android:id="@+id/row1"
• android:layout_width="fill_parent"
• android:layout_height="wrap_content">

• <!-- Add elements/columns in the first row-->

• </TableRow>
• </TableLayout>
Attributes of TableLayout
• id: id attribute is used to uniquely identify a Table Layout.

• stretchColumns: Stretch column attribute is used in Table Layout

to change the default width of a column which is set equal to the
width of the widest column but we can also stretch the columns
to take up available free space by using this attribute.
•
• The value that assigned to this attribute can be a single column
number or a comma delimited list of column numbers (1, 2,
3…n).

• If the value is 1 then the second column is stretched to take up

any available space in the row, because of the column numbers
are started from 0.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/simpleTableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
• shrinkColumns: Shrink column attribute is used to shrink or
reduce the width of the column‘s.
• We can specify either a single column or a comma
delimited list of column numbers for this attribute.
• The content in the specified columns word-wraps to reduce
their width.
• If the value is 0 then the first column’s width shrinks or
reduces by word wrapping its content.
• If the value is 0,1 then both first and second columns are
shrinks or reduced by word wrapping its content.
• If the value is ‘*’ then the content of all columns is word
wrapped to shrink their widths.
• <TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
• android:layout_width="match_parent"
• android:layout_height="match_parent"
• android:shrinkColumns="0">
• collapseColumns: collapse columns attribute is used to
collapse or invisible the column’s of a table layout.
• These columns are the part of the table information but
are invisible.
• If the values is 0 then the first column appears collapsed,
i.e it is the part of table but it is invisible.
• <?xml version="1.0" encoding="utf-8"?>
• <TableLayout <!-- second element of the row that is shown
xmlns:android="http://schemas.android.com/apk/res/a
ndroid" in the screenshot-->
<TextView
• android:layout_width="match_parent"
android:layout_width="wrap_content"
• android:layout_height="match_parent"
android:layout_height="wrap_content"
• android:collapseColumns="0"> <!-- collapse the first android:background="#b0b0b0"
column of the table row-->
android:padding="18dip"
<!-- first row of the table layout-->
android:text="Columns 2"
• <TableRow android:textColor="#000"
• android:id="@+id/simpleTableLayout" android:textSize="18dp" />
• android:layout_width="fill_parent" </TableRow>
• android:layout_height="wrap_content"> </TableLayout>
• <!-- first element of the row that is the part of table
but it is invisible-->
• <TextView
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:background="#b0b0b0"
• android:padding="18dip"
• android:text="Columns 1"
• android:textColor="#000"
• android:textSize="18dp" />
Frame Layout
• Frame Layout is one of the simplest layout to organize view
controls.
• They are designed to block an area on the screen to display
single item.
• Frame Layout should be used to hold child view, because it
can be difficult to display single views at a specific area on
the screen without overlapping each other.

• We can add multiple children to a FrameLayout and control

their position by assigning gravity to each child, using
the android:layout_gravity attribute.
• FrameLayout is designed to display a single item at a
time. You can have multiple elements within a
FrameLayout but each element will be positioned
based on the top left of the screen.
• Elements that overlap will be displayed overlapping.
Attributes
• android:id
• This is the unique id which identifies the layout in the R.java file.
• android:foreground
Foreground defines the drawable to draw over the content and this may
be a color value.

• On applying android:foregroud feature, all the views taken in

the framelayout will goes to the background and the framelayout comes
in the foreground i.e.
• over the views. We can set the @drawable/image_name or the color in
the foreground.
•

•
• android:foregroundGravity
• This defines the gravity to apply to the foreground
drawable. Default value of gravity is fill. We can set values
in the form of “top”, ”center_vertical” , ”fill_vertical”,
”center_horizontal”, ”fill_horizontal”, ”center”, ”fill”,
”clip_vertical”, ”clip_horizontal”, ”bottom”, ”left” or
”right” .
•
android:visibility
• This determine whether to make the view visible,
invisible or gone.
• visible – the view is present and also visible
• invisible – The view is present but not visible
• gone – The view is neither present nor visible
• <FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
• android:layout_width="match_parent"
• android:layout_height="match_parent"
• android:orientation="vertical"
• android:padding="5dp">
• <ImageView
• android:id="@+id/imgvw1"
• android:layout_width="match_parent"
• android:layout_height="match_parent"
• android:scaleType="centerCrop"
• android:src="@drawable/img" />
• <TextView
• android:id="@+id/txtvw1"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:layout_marginTop="10dp"
• android:background="#286F24"
• android:padding="10dp"
• android:text="Login Details"
• android:textColor="#FFFFFF"
• android:textSize="20sp"
• android:layout_marginLeft="100dp"/>
• <EditText
• android:id="@+id/editText1"
• android:layout_width="match_parent"
• android:layout_height="wrap_content"
• android:layout_centerHorizontal="true"
• android:layout_marginTop="80dp"
• android:background="#ECEEE8"
• android:padding="10dp"
• android:hint="Enter your email" />
• <EditText
• android:id="@+id/editText2"
• android:layout_width="match_parent"
• android:layout_height="wrap_content"
• android:layout_centerHorizontal="true"
• android:layout_marginTop="150dp"
• android:background="#ECEEE8"
• android:padding="10dp"
• android:hint="Enter password"/>
• <TextView
• android:id="@+id/txtvw1"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:layout_marginTop="10dp"
• android:background="#286F24"
• android:padding="10dp"
• android:text="Login Details"
• android:textColor="#FFFFFF"
• android:textSize="20sp"
• android:layout_marginLeft="100dp"/>
• <Button
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:text= "Submit"
• android:layout_marginTop="240dp"
• android:layout_marginLeft="110dp"/>
•
• </FrameLayout>
RelativeLayout
• The Relative Layout is very flexible layout used in android
for custom layout designing.
• It gives us the flexibility to position our component/view
based on the relative or sibling component’s position.

• It allow its child view to position relative to each other or

relative to the container or another container.

• In Relative Layout, you can use “above, below, left and

right” to arrange the component’s position in relation to
other component.
Attributes of Relative layout

• 1.above:
• Position the bottom edge of the view above the given
anchor view ID and must be a reference of the another
resource in the form of id.
• Example, android:layout_above=”@+id/textView” .
<!-- textView2 is placed above textView--
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/te
xtAppearanceLarge" android:text="Text2"
android:id="@+id/textView2"
android:layout_above="@+id/textView"
android:layout_marginBottom="100dp"
android:layout_centerHorizontal="true"/>
• alignBottom:
• alignBottom is used to makes the bottom edge of the view
match the bottom edge of the given anchor view ID and it
must be a reference to another resource, in the form of id.
Example: android:layout_ alignBottom =”@+id/button1″
<!-- textView2 alignBottom of textView -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:id="@+id/textView2"

android:layout_alignBottom="@+id/textView"
android:text="Text2 alignBottom of Text1"
android:layout_marginBottom="90dp"
/>
 • alignLeft: alignLeft is used to make the left edge of the
view match the left edge of the given anchor view ID and
must be a reference to another resource, in the form of
Example: android:layout_ alignLeft =”@+id/button1″.

<!-- textView2 alignLeft of textView -->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView2"
android:layout_alignLeft="@+id/textView"
android:text="Text2 alignLeft of Text1"
android:layout_below="@+id/textView"
android:layout_marginTop="20dp"/>
• alignRight: alignRight property is used to make the right
edge of this view match the right edge of the given
anchor view ID and must be a reference to another
resource, in the form like this example:
android:layout_alignRight=”@+id/button1″

<!-- textView2 alignRight of textView-->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:textAppearance="?android:attr/textAp
pearanceLarge"
android:id="@+id/textView2"
android:layout_alignRight="@+id/textView"
android:text="Text2 alignRight of Text1"
android:layout_below="@+id/textView"
android:layout_marginTop="20dp"/>
• alignStart: alignStart property is used to makes the start
edge of this view match the start edge of the given anchor
view ID and must be a reference to another resource, in
the form of like this example:
android:layout_alignStart=”@+id/button1″
<!-- Text2 alignStart-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:textAppearance="?android:attr/textA
ppearanceLarge"
android:id="@+id/textView2"
android:text="Text2 align start of Text1"
android:layout_alignStart="@+id/textView"
/>
 • alignTop: alignTop property is used to makes the top
edge of this view match the top edge of the given
anchor view ID and must be a reference to another
resource, in the form like this example:
android:layout_alignTop=”@+id/button1″.
<!--text is align top on Image-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:textAppearance="?android:attr/textAppea
ranceLarge"
android:id="@+id/textView"
android:layout_alignTop="@+id/imageView"
android:text="Text Here is AlignTop on Image"
/>
• alignParentBottom: If alignParentBottom property is
true, makes the bottom edge of this view match the
bottom edge of the parent. The value of align parent
bottom is either true or false.
• Example: android:layout_alignParentBottom=”true”
<!-- textView is alignParentBottom -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="@+id/textView"
android:text="Text Here is AlignParentBottom with bottom margin
of 120dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="120dp" />
• alignParentEnd: If alignParentEnd property is true, then it
makes the end edge of this view match the end edge of the
parent. The value of align parent End is either true or false.
Example: android:layout_alignParentEnd=”true”.
<!-- Text displayed in the end of parent image-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:textAppearance="?android:attr/textApp
earanceLarge"
android:id="@+id/textView"
android:text="Text in Parent End"

android:layout_alignBottom="@+id/imageView"
android:layout_alignParentEnd="true"
/>
• alignParentLeft: If alignParentLeft property is true, makes
the left edge of this view match the left edge of the parent.
• The value of align parent left is either true or false.
Example: android:layout_alignParentLeft=”true”.
<!-- align parent left in Android -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:textAppearance="?android:attr/t
extAppearanceLarge"
android:id="@+id/textView"
android:text="Text in Parent Left"

android:layout_alignBottom="@+id/imag
eView"
android:layout_alignParentLeft="true"
/>
• alignParentRight: If alignParentRight property is true, then
it makes the right edge of this view match the right edge of
the parent. The value of align parent right is either true or
false. Example: android:layout_alignParentRight=”true”.
<!-- alignRightParent Example -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:textAppearance="?android:attr/textA
ppearanceLarge"
android:id="@+id/textView"
android:text="Text in Parent Right"

android:layout_alignBottom="@+id/imageVie
w"
android:layout_alignParentRight="true"
/>
• .alignParentStart: If alignParentStart is true, then it makes
the start edge of this view match the start edge of the
parent.
• The value of align parent start is either true or false.
Example: android:layout_alignParentStart=”true”.
<!-- alignParentStart Example -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:textAppearance="?android:attr/textApp
earanceLarge"
android:id="@+id/textView"
android:text="Text in Parent Start"
android:layout_alignTop="@+id/imageView"
android:layout_alignParentStart="true"
/>
• alignParentTop: If alignParentTop is true, then it makes the
top edge of this view match the top edge of the parent.
The value of align parent Top is either true or false.
Example: android:layout_alignParenTop=”true”.

<!-- alignParentTop example -->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text1 align parent top"
android:layout_alignParentTop="true"
android:layout_margin="20dp"
android:textSize="20sp"
android:textColor="#000"/>
• centerInParent: If center in parent is true, makes the view
in the center of the screen vertically and horizontally.
• The value of center in parent is either true or false.
• Example: android:layout_centerInParent=”true”.

<!-- centerInParent example -->

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"
android:text="Text1 center in parent"

android:layout_centerInParent="true"
android:textSize="20sp"
android:textColor="#000"
/>
• centerHorizontal: If centerHorizontal property is true,
makes the view horizontally center.
• The value of centerHorizontal is either true or false.
• Example: android:layout_centerHorizontal=”true”.

<!-- centerHorizontal example -->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text1 center Horizontal"
android:layout_centerHorizontal="true"
android:textSize="20sp"
android:textColor="#000"
/>
• centerVertical: If centerVertical property is true, make
the view vertically center.
• The value of align parent bottom is either true or false.
• Example: android:layout_centerVertical=”true”.
<!-- centerVertical example -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text1 center vertical"
android:layout_centerVertical="true"
android:textSize="20sp"
android:textColor="#000"
/>