31 January 2025 03:19 PM MAD {Unit No.

3: UI Components and Layouts}

Contents:
3.1 Control Flow, Directory Structure
3.2 Components of a screen, Fundamental UI design 3.3 Linear Layout, Absolute
Layout, Frame Layout, Table Layout, Relative Layout

3.1 Control Flow, Directory Structure

• It is very important to know about the basics of Android Studio’s file structure. Some
important files/folders, and their significance is explained for the easy
•
understanding of the Android Studio work environment.

• In the
below image, several important files/folders are marked:
Compiled by SAYYED SHABANA USMAN___ Page 1

1.
AndroidManifest.xml:
 
Every project in Android includes a manifest file, which is
AndroidManifest.xml, stored in the root directory of its project
hierarchy.The manifest file is an important part of our app
because it defines the

structure and metadata of our application, its components, and its
requirements.

This file includes nodes for each of the Activities, Services, Content
Providers and Broadcast Receiver that make the application and using
Intent Filters and Permissions, determines how they co-ordinate with
each other and other applications.
 Below is the sample AndroidManifest.xml file:
<manifest xmlns:android="
http://schemas.android.com/apk/res/android"package="com.exam
ple.geeksforgeeks.geeksforgeeks"> <application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"

Compiled by SAYYED SHABANA USMAN___ Page 2

android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" /> <category
android:name="android.intent.category.LAUNCHER" /> </intent-filter>
</activity>
</application>
</manifest>

2.
java:
 The Java folder contains the Java source code files.
 These files are used as a controller for controlled UI (Layout file).

It gets the data from the Layout file and after processing that data
output will be shown in the UI layout.
 It works on the backend of an Android application.

3.
drawable:

 The drawable folder contains resource type file (something that
can be drawn).
Drawables may take a variety of file like Bitmap (PNG, JPEG), Nine Patch,

Vector (XML), Shape, Layers, States, Levels, and Scale. 4.

layout:

A layout defines the visual structure for a user interface, such as the
UI for an Android application.
 This folder stores Layout files that are written in XML language. 5.

mipmap:

The mipmap folder contains the Image Asset file that can be used in
Android Studio application.

You can generate the icon types like Launcher icons, Action bar
and tab icons, and Notification icons.

6.
colors.xml:
 colors.xml file contains color resources of the Android application.

Different color values are identified by a unique name that can be used
in the Android application program.
 Below is a sample colors.xml file:
<resources>
<color name="colorPrimary">#1294c8</color>
<color name="colorPrimaryDark">#1294c8</color>
</resources>

7.
strings.xml:
 The strings.xml file contains string resources of the Android
application. 
The different string value is identified by a unique namethat can be
used in the Android application program.
 This file also stores string array by using XML language.
 Below is a sample strings.xml file:
<resources>
Compiled by SAYYED SHABANA USMAN___ Page 3
<resources>
<string name="app_name">Workshop app</string> <string
name="date">Date:</string>
<string name="timings">Timings:</string>
</resources>

8.
styles.xml:

The styles.xml file contains resources of the theme stylein the Android
application.
 This file is written in XML language.
 Below is a sample styles.xml file:
<resources>
<!-- Base application theme. -->
<style name="AppTheme"
parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize
your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item> <item
name="colorPrimaryDark">@color/colorPrimaryDark</item> <item
name="colorAccent">@color/colorAccent</item> </style>
</resources>

9.
build.gradle(Module: app):
 This defines the module-specific build configurations.
 Here you can add dependencies what you need in your Android

application.3.2 Components of a screen, Fundamental UI design

3.2.1 Components of a screen:

• Application components are the essential building blocks of an Android
application.These components are loosely coupled by the application
manifest file
•
AndroidManifest.xml that describes each component of the application
and how they interact.
Interface elements include but are not limited to:
•
i.
Input Controls: checkboxes, radio buttons, dropdown lists, list boxes,
buttons, toggles, text fields, date field
ii.
Navigational Components: breadcrumb, slider, search field, pagination,
slider, tags, icons
iii.
Informational Components: tooltips, icons, progress bar, notifications,
message boxes, modal windows
iv. Containers: accordion
3.2.2 Fundamental UI design:
Android introduces some new terminology for familiar programming
metaphors.
•
i.
Views:

Views are the basic User Interface class for visual interface elements
(commonly known as controls or widgets).
 All User Interface controls, and the layout classes, are derived from
Views. TextView, Button, EditText, etc. are examples of View. ii.
ViewGroups:
 View Groups are extensions of the View class that can contain

multiple child Compiled by SAYYED SHABANA USMAN___ Page 4


View Groups are extensions of the View class that can contain
multiple child Views.

By extending the ViewGroup class, you can create compound
controls that are made up of interconnected child Views.

The ViewGroup class is also extended to provide the layout
managers, such as LinearLayout, that help you compose User
Interfaces. 
ViewGroup is an invisible container of other views (child views)
and other ViewGroup.

LinearLayout, RelativeLayout, TableLayout, etc. are examples of
ViewGroup.
iii.
Activities:
 Activities represent the window or screen being displayed to
the user. Activities are the Android equivalent of a Form.
 To display a User Interface, you assign a View or layout to an
Activity. Android provides several common UI controls, widgets, and
 layout managers.

3.3 Layouts (Linear Layout, Absolute Layout, Frame Layout, Table Layout,
Relative Layout)
It is a type of resource which gives definition on what is drawn on the screen or how
•
elements are placed on the device’s screen and stored as XML files in the
/res/layout resource directory for the application.
• It can also be a type of View class to organize other controls.
• There are many types of layout.
Some of which are listed below:
•
i. Linear Layout
ii. Absolute Layout
iii. Table Layout
iv. Frame Layout
v. Relative Layout

3.3.1 Linear Layout:

•
Linear Layout is one of the most basic layouts in android studio, that arranges
multiple sub-views (UI elements) sequentially in a single direction i.e.
horizontal or vertical manner by specifying the android:orientation attribute. If
one applies android:orientation=”vertical” then elements will be arranged one
•
after another in a vertical manner (i.e. top to bottom) and If you apply
android:orientation=”horizontal” then elements will be arranged one after
another in a horizontal manner (i.e. left to right).

Compiled by SAYYED SHABANA USMAN___ Page 5

another in a horizontal manner (i.e. left to right).
• Some important attributes of LinearLayout:
Attributes Description
android:id Assigns a unique id to the layout.

android:orientation Defines the arrangements of sub-views in the layout. It

is either
“horizontal” or “vertical”.

android:layout_width Sets the width of the layout

android:layout_heigh Sets the height of the layout

t

android:layout_weig Assigned individually to the sub-views, it specifies how the

ht parent
layout divides the remaining space amongst the sub-views.

android:weightSum Defined in the layout, it sets the total weight sum of all the
sub-view
inside the layout.

android:layout_gravit Assigned to the sub-views, it sets the gravity of the view or

y layout
relative to its parent.
Possible values are – center, center_vertical,
center_horizontal, fill, top, bottom, start, end, etc.

android:baselineAlign Assigns a Boolean value, which prevents the layout from

ed aligning its
children’s baselines.
 • Arrange views in a vertical manner in LinearLayout:

activity_main.xml:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

Compiled by SAYYED SHABANA USMAN___ Page 6

tools:context=".MainActivity">
<!-- Set Orientation as "vertical" --> <!--sub view 1-->
<View
android:id="@+id/view_1"
android:background="@color/grey"
android:layout_width="wrap_content"
android:layout_margin="32dp"
android:layout_height="100dp" />
<!--sub view 2-->
<View
android:id="@+id/view_2"
android:background="@color/grey"
android:layout_width="wrap_content"
android:layout_margin="32dp"
android:layout_height="100dp" />
<!--sub view 3-->
<View
android:id="@+id/view_3"
android:background="@color/grey"
android:layout_width="wrap_content"
android:layout_margin="32dp"
android:layout_height="100dp" />
<!--sub view 4-->
<View
android:id="@+id/view_4"
android:background="@color/grey"
android:layout_width="wrap_content"
android:layout_margin="32dp"
android:layout_height="100dp" />
</LinearLayout>
Here’s a view of the design and blueprint in the design layout:
• Arrange views in a horizontal manner in LinearLayout: Compiled by SAYYED

SHABANA USMAN___ Page 7

• Arrange views in a horizontal manner in LinearLayout:

activity_main.xml:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity">
<!-- Set Orientation as "horizontal" --> <!--sub view 1-->
<View
android:id="@+id/view_1"
android:background="@color/grey"
android:layout_width="wrap_content"
android:layout_margin="32dp"
android:layout_height="100dp" /> <!--sub view 2-->
<View
android:id="@+id/view_2"
android:background="@color/grey"
android:layout_width="wrap_content"
android:layout_margin="32dp"
android:layout_height="100dp" /> <!--sub view 3-->
<View
android:id="@+id/view_3"
android:background="@color/grey"
android:layout_width="wrap_content"
android:layout_margin="32dp"
android:layout_height="100dp" /> <!--sub view 4-->
<View
android:id="@+id/view_4"
android:background="@color/grey"
android:layout_width="wrap_content"
android:layout_margin="32dp"
android:layout_height="100dp" /> </LinearLayout>

Here’s a view of the design in the design layout: Compiled by SAYYED SHABANA

USMAN___ Page 8

Here’s a view of the design in the design layout:

 Visit
https://developer.android.com/reference/android/widget/LinearLayout, for
more
•
details about LinearLayout.

3.3.2 Absolute Layout:

•
An Absolute Layout allows you to specify the exact location i.e. X and Y
coordinates of its children with respect to the origin at the top left corner of the
layout. The absolute layout is less flexible and harder to maintain for varying
sizes of screens
•
that’s why it is not recommended.
• Although Absolute Layout is deprecated now.
 Some of the important Absolute Layout attributes are the following: •
i. android:id: It uniquely specifies the absolute layout ii.
android:layout_x: It specifies X-Coordinate of the Views (Possible values
of this are in density-pixel or pixel)

Compiled by SAYYED SHABANA USMAN___ Page 9

are in density-pixel or pixel)
iii.
android:layout_y: It specifies Y-Coordinate of the Views (Possible values
of this are in dp or px)

• Arrange views in AbsoluteLayout:

activity_main.xml:
<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context=".MainActivity">
<!--sub view 1-->
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/green"
android:layout_x="0dp"
android:layout_y="0dp"/>
<!--sub view 2-->
<TextView
android:layout_width="100dp"
 android:layout_height="100dp"
android:background="@color/green"
android:layout_x="150dp"
android:layout_y="150dp"/>
</AbsoluteLayout>
Here’s a view of the design in the design layout:

Visit https://developer.android.com/reference/android/widget/AbsoluteLayout, for

•
more details about AbsoluteLayout.

3.3.3 FrameLayout:
Android FrameLayout is a ViewGroup subclass that is used to specify the position of
•
multiple views placed on top of each other to represent a single view
screen. • Generally, we can say FrameLayout simply blocks a particular area
on the screen to

Compiled by SAYYED SHABANA USMAN___ Page 10

Generally, we can say FrameLayout simply blocks a particular area on the screen
to
•
display a single view.
Here, all the child views or elements are added in stack format means the most
recently
•
added child will be shown on the top of the screen.
But, we can add multiple children’s views and control their positions only by using
•
gravity attributes in FrameLayout.
• Arrange views in FrameLayout:
activity_main.xml:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="32dp"
android:background="@color/white"
tools:context=".MainActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="64dp"
android:layout_gravity="center_horizontal"
android:background="@color/green"
android:padding="16dp"
android:text="Login Details"
android:textColor="#FFFFFF"
android:textSize="20sp" />
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="156dp"
android:layout_gravity="center_horizontal"
android:background="@color/grey"
android:textColorHint="@color/white"
android:hint="Enter your email"
android:padding="10dp" />
<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
Compiled by SAYYED SHABANA USMAN___ Page 11
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="220dp"
android:background="@color/grey"
android:textColorHint="@color/white"
android:hint="Enter password"
android:padding="10dp" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="300dp"
android:backgroundTint="@color/green"
android:layout_gravity="center_horizontal"
android:text="Submit" />
</FrameLayout>
Here’s a view of the design in the design layout:

Visit
https://developer.android.com/reference/android/widget/FrameLayout, for
more
•
details about FrameLayout.

3.3.4 Table Layout:

TableLayout in Android is a ViewGroup subclass that is designed to align
child views
•
in rows and columns like a grid structure.
It automatically arranges all the child elements into rows and columns
without
•
displaying any border lines between cells.
The Table Layout’s functionality is almost similar to an HTML table,
where the
•
number of columns in the layout is determined by the row with the most

cells. Compiled by SAYYED SHABANA USMAN___ Page 12

• Arrange views in TableLayout:

activity_main.xml:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main"
android:padding="32dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context=".MainActivity"> <TextView
android:id="@+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ICC Ranking of Players:"
android:textSize = "20sp"
android:textStyle="bold">
</TextView>
<TableRow
android:background="@color/green"
android:padding="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Rank"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Player"
android:textStyle="bold" />

Compiled by SAYYED SHABANA USMAN___ Page 13

android:textStyle="bold" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Team"
android:textStyle="bold" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Points"
android:textStyle="bold" /> </TableRow>
<TableRow android:background="#F0F7F7"
 android:padding="5dp"> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Virat Kohli" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="IND" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="895" />
</TableRow>
<TableRow android:background="#F0F7F7"
android:padding="5dp"> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"

Compiled by SAYYED SHABANA USMAN___ Page 14

android:layout_height="wrap_content" android:layout_weight="1"
android:gravity="center"
android:text="Rohit Sharma" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1"
android:gravity="center"
android:text="IND" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1"
android:gravity="center"
android:text="863" />
</TableRow>
<TableRow android:background="#F0F7F7" android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1"
android:gravity="center"
android:text="3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1"
android:gravity="center"
android:text="Faf du Plessis" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1"
android:gravity="center"
android:text="PAK" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1"
android:gravity="center"
android:text="834" />
</TableRow>
<TableRow android:background="#F0F7F7" android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1"
android:gravity="center"
android:text="4" />
<TextView
android:layout_width="wrap_content" Compiled by SAYYED SHABANA USMAN___
Page 15

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Steven Smith" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="AUS" />
<TextView
android:layout_width="wrap_content"
 android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="820" />
</TableRow>
<TableRow android:background="#F0F7F7"
android:padding="5dp"> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Ross Taylor" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="NZ" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="817" />
</TableRow>
</TableLayout>

Compiled by SAYYED SHABANA USMAN___ Page 16

Here’s a view of the design in the design layout:
Visit
https://developer.android.com/reference/android/widget/TableLayout, for
more
•
details about TableLayout.
Visit https://developer.android.com/reference/android/widget/TableRow,
for more
•
details about TableRow.

3.3.5 RelativeLayout:
•
RelativeLayout in Android is a ViewGroup subclass, that allows users to
position child views relative to each other (e.g., view A to the right of
view B) or relative to the parent (e.g., aligned to the top of the parent).
Instead of using LinearLayout, we have to use RelativeLayout to design
the user
•
interface and keep our hierarchy flat because it improves the
performance of the application.
Unlike LinearLayout, which stacks the views in a particular direction,
RelativeLayout
•
allows more flexibility and dynamic UIs while maintaining a flat view
hierarchy. Compiled by SAYYED SHABANA USMAN___ Page 17
 •
Important Attributes for Positioning Views in the RelativeLayout:
As we know, we need to define the position of child views or ViewGroups
relative to each other element or relative to the parent. By default position is
top-left, if someone forgets to specify the position of child views.
layout_alignParentTo
XML attributes p

layout_alignParentLef
t Description
layout_alignParentRig Set “true” to match the left edge of
ht view to the left edge of parent.
Set “true” to match the right edge of
view to the right edge of the parent.
 the view to the top
edge of the parent.

Set to “true” to match the top edge of

layout_alignParentBottom Set to “true” to match the bottom edge of the view
to the bottom edge of the parent.

Compiled by SAYYED SHABANA USMAN___ Page 18

Align the view to the left of the specified
layout_alignLeft view ID.
It accepts another sibling view ID and
layout_alignRight Align the view to the right of the
specified view ID.
layout_alignStart It accepts another sibling view ID and
Align the view to the start of the
layout_alignEnd specified view ID.

layout_centerInParent

layout_centerHorizont
al
layout_centerVertical
It accepts another sibling view ID and
layout_toLeftOf Align the view to
the end of the specified view ID.
layout_toRightOf When it is set to “true”, the view will be
aligned to the
layout_toStartOf center of parent.

layout_toEndOf

layout_above

layout_below

bottom edge of the parent.

It accepts another sibling view ID and
 places the view
above the specified view ID.

When it is set to “true”, the view will be

horizontally
centre-aligned within its parent.
When it is set to “true”, the view will be
vertically centre-aligned within its
parent.
It accepts another sibling view ID and
places the view left of the specified
view ID.
It accepts another sibling view ID and
places the view right of the specified
view ID.
It accepts another sibling view ID and
places the view to start of the specified
view ID.
It accepts another sibling view ID and
places the view to end of the specified It accepts another sibling view ID and
view ID. places the view
below the specified view ID.
It accepts another sibling view ID and

• Arrange views in RelativeLayout:

activity_main.xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:gravity="center"
android:padding="32dp"
tools:context=".MainActivity">
<!-- subview - TextView -->
 <TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:padding="16dp"

Compiled by SAYYED SHABANA USMAN___ Page 19

android:padding="16dp"
android:text="First name:"
android:textSize="20sp" />
<!-- subview - EditText --> <EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/textView1"
android:layout_alignBottom="@+id/textView1"
android:layout_toEndOf="@id/textView1"
android:elegantTextHeight="true"
android:hint="Geeks"
android:padding="16dp" />
<!-- subview - TextView --> <TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_alignParentStart="true"
android:padding="16dp"
android:text="Last name:"
android:textSize="20sp" />
<!-- subview - EditText --> <EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignTop="@+id/textView2"
android:layout_alignBottom="@+id/textView2"
android:layout_toEndOf="@id/textView2"
android:elegantTextHeight="true"
android:hint="forGeeks"
android:padding="16dp" />
<!-- subview - Button --> <Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
 android:layout_centerHorizontal="true"
android:layout_below="@id/textView2"
android:backgroundTint="@color/green"
android:text="Submit" />
</RelativeLayout>

Compiled by SAYYED SHABANA USMAN___ Page 20

Here’s a view of the design and blueprint in the design layout:

Visit https://developer.android.com/reference/android/widget/RelativeLayout,
for more
•
details about RelativeLayout.
Compiled by SAYYED SHABANA USMAN___ Page 21