Mobile Application Development (22617) Practical No.

Practical No. 6: Develop a program to implement frame layout, table layout and
relative layout

I. Practical Significance
To develop and place the android components accurately on the display screen,
android provides various layout managers. Layout managers can be used on the
simple android program too. Various layout managers can be selected as per the
program requirements.

II. Relevant Program Outcomes (POs)

PO 1. Basic knowledge
PO 2. Discipline knowledge
PO 3. Experiments and practice
PO 4. Engineering tools

III. Competency and Practical Skills

“Create simple Android applications.”
This practical is expected to develop the following skills
1. Able to use layout managers to indent the android components on the display screen.
2. Able to analyze different layout managers and select the appropriate layout managers
as per the program requirements.

IV. Relevant Course Outcome(s)

Develop rich user Interfaces by using layouts and controls

V. Practical Outcome (PrOs)

Develop a program to implement frame layout, table layout and relative layout .

VI. Relevant Affective Domain Related Outcome(s) 1.

Work collaboratively in team
2. Follow ethical Practices.

VII. Minimum Theoretical Background

1. Frame Layout:
Frame Layout is designed to block out an area on the screen to display a single item. Generally,
Frame Layout should be used to hold a single child view, because it can be difficult to organize
child views in a way that's scalable to different screen sizes without the children overlapping
each other. You can, however, add multiple children to a Frame Layout and control their
position within the Frame Layout by assigning gravity to each child, using the android: layout
gravity attribute. Child views are drawn in a stack, with the most recently added child on top.
The size of the Frame Layout is the size of its largest child (plus padding), visible or not (if the
Frame Layout's parent permits).

Maharashtra State Board of Technical Education 1

Mobile Application Development (22617) Practical No. 6

2. Relative Layout:

A Relative Layout is a very powerful utility for designing a user interface because it can
eliminate nested view groups and keep your layout hierarchy flat, which improves
performance. If you find yourself using several nested Linear Layout groups, you may be
able to replace them with a single Relative Layout.

3. Table Layout:
A Table Layout consists of a number of Table Row objects, each defining a row (actually,
you can have other children, which will be explained below). Table Layout containers do
not display border lines for their rows, columns, or cells. Each row has zero or more cells;
each cell can hold one View object. The table has as many columns as the row with the
most cells. A table can leave cells empty. Cells can span columns, as they can in HTML. The
width of a column is defined by the row with the widest cell in that column.

Maharashtra State Board of Technical Education 1

 Mobile Application Development (22617) Practical No. 6

VIII. Resources required (Additional)

Sr. Instrument /Object Specification Quantity Remarks

No.
Android enabled 2 GB RAM 1 Data cable is
smartphone / Android mandatory for
1
version supporting emulators
emulator

IX. Practical related Questions

Note: Below given are few sample questions for reference. Teachers must design more
such questions to ensure the achievement of identified CO.
1. List different attributes which can be used with any layout managers.
2. What is Grid Layout?

(Space for answers)

1.
android:id, android:padding, android:layout_height, android:layout_width etc.

2.
GridLayout is a layout that places its children in a rectangular grid.
The grid is composed of a set of infinitely thin lines that separate the viewing area into cells.
Throughout the API, grid lines are referenced by grid indices. A grid with N columns has N + 1 grid

Maharashtra State Board of Technical Education 2

 Mobile Application Development (22617) Practical No. 6

indices that run from 0 through N inclusive. Regardless of how GridLayout is configured, grid index 0 is
fixed to the leading edge of the container and grid index N is fixed to its trailing edge (after padding is
taken into account).

X. Exercise
Note: Faculty must ensure that every group of students use different input value.
(Use blank space for answers or attach more pages if needed)
1. Write a program to display 10 students basic information in a table form using Table
layout.
2. Write a program to display all the data types in object-oriented programming using
Frame layout.

(Space for answers)

1.
//MainActivity.java
package com.jamiapolytechnic.experiment61;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

//=====================================================================
//activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Roll No."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" />
<TextView
android:text="Name"
android:layout_width="wrap_content"

Maharashtra State Board of Technical Education 3

Mobile Application Development (22617) Practical No. 6

android:layout_height="wrap_content"
android:gravity="center" />
<TextView
android:text="Branch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Khan Kamaal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2" />
<TextView
android:text="TYCO"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Khan Jamaal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="TYCO"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="3"
android:layout_width="wrap_content"

Maharashtra State Board of Technical Education 4

Mobile Application Development (22617) Practical No. 6

android:layout_height="wrap_content" />
<TextView
android:text="Khan Nihaal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="TYCO"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Khan Hilaal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="TYCO"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Khan Bilaal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="TYCO"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="6"

Maharashtra State Board of Technical Education 5

Mobile Application Development (22617) Practical No. 6

android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Shaikh Kaleem"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="TYCO"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="7"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Shaikh Saleem"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="TYCO"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="8"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Shaikh Aleem"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="TYCO"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView

Maharashtra State Board of Technical Education 6

Mobile Application Development (22617) Practical No. 6

android:text="9"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Shaikh Naeem"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="TYCO"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="10"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Shaikh Shaheem"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="TYCO"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>

</TableLayout>

2.
//MainActivity.java
package com.jamiapolytechnic.experiment62;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

Maharashtra State Board of Technical Education 7

 Mobile Application Development (22617) Practical No. 6

setContentView(R.layout.activity_main);
}
}

//=====================================================================
//activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<ImageView
android:src="@drawable/img1"
android:scaleType="fitCenter"
android:layout_height="match_parent"
android:layout_width="match_parent"/>

<TextView
android:text="@string/data_types"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:textColor="#ffffffff"
android:gravity="center"/>

</FrameLayout>

//=====================================================================
//strings.xml
<resources>
<string name="app_name">Experiment62</string>
<string name="data_types">
<b>OOP Data Types: \n</b>
byte, short, int, long, \n
float, double,\n

Maharashtra State Board of Technical Education 8

Mobile Application Development (22617) Practical No. 6

char, \n boolean, \n
class, interface
</string>
</resources>

XI. References / Suggestions for further Reading

1. https://www.tutorialspoint.com/android
2. https://stuff.mit.edu
3. https://www.tutorialspoint.com/android/android_advanced_tutorial.pdf
4. https://developer.android.com

XII. Assessment Scheme

Performance indicators Weightage

Process related (10 Marks) 30%

1. Logic Formation 10%

2. Debugging ability 15%
3. Follow ethical practices 5%
Product related (15 Marks) 70%

4. Interactive GUI 20%

5. Answer to Practical related questions 20%
6. Expected Output 20%
7. Timely Submission 10%
Total (25 Marks) 100%

List of student Team Members

1
2
3
4

Marks Obtained Dated signature of

Teacher
Process Product Total
Related(10) Related(15) (25)

Maharashtra State Board of Technical Education 9