Mahavir Polytechnic Nashik

Department of Computer Engineering

Year : TY
Scheme: CO6I Subject: MAD (22617)

UNIT 03: UI Components and Layouts

Control Flow :-
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.
There are following four main components that can be used within an Android application −

Sr.No Components & Description

Activities
1
They dictate the UI and handle the user interaction to the smart phone screen.

Services
2
They handle background processing associated with an application.

Broadcast Receivers
3
They handle communication between Android OS and applications.

Content Providers
4
They handle data and database management issues.
Activities : An activity represents a single screen with a user interface,in-short Activity performs actions
on the screen. For example, an email application might have one activity that shows a list of new emails,
another activity to compose an email, and another activity for reading emails. If an application has more
than one activity, then one of them should be marked as the activity that is presented when the
application is launched.
An activity is implemented as a subclass of Activity class as follows −
public class MainActivity extends Activity {
}

activity represents इं टरफेससह ससं गल स्क्रीनचे प्रसिसनसित्व करिे , इन-शॉटट अॅक्टिक्टिटी स्क्रीनवर सिया करिे . उदाहरणार्ट, ईमेल
ऍक्टिकेशनमध्ये नवीन ईमे लची सू ची दशटसवणारी एक सियाकलाप असू शकिे , ईमेल ियार करण्यासाठी दु सरी सियाकलाप आसण ईमेल
वाचण्यासाठी दु सरी सियाकलाप असू शकिे . जर एखाद्या ऍक्टिकेशनमध्ये एकापेक्षा जास्त सियाकलाप असिील, िर त्यापैकी एक
ऍक्टिकेशन लॉन्च केल्यावर सादर केलेल्या सियाकलाप म्हणू न सचन्ां सकि केले जावे .
सियाकलाप खालीलप्रमाणे सियाकलाप वगाट च्या उपवगट म्हणू न कायाट क्टिि केला जािो −

MAD-CH3
Page 1
 Services : A service is a component that runs in the background to perform long-running operations. For
example, a service might play music in the background while the user is in a different application, or it might
fetch data over the network without blocking user interaction with an activity.
A service is implemented as a subclass of Service class as follows –
public class MyService extends Service {
}

Broadcast Receivers : Broadcast Receivers simply respond to broadcast messages from other
applications or from the system. For example, applications can also initiate broadcasts to let other
applications know that some data has been downloaded to the device and is available for them to use,
so this is broadcast receiver who will intercept this communication and will initiate appropriate action.
A broadcast receiver is implemented as a subclass of BroadcastReceiver class and each message is
broadcaster as an Intent object.

public class MyReceiver extends BroadcastReceiver

{ public void onReceive(context,intent){}
}

Content Providers : A content provider component supplies data from one application to others on
request. Such requests are handled by the methods of the ContentResolver class. The data may be
stored in the file system, the database or somewhere else entirely.
A content provider is implemented as a subclass of ContentProvider class and must implement a
standard set of APIs that enable other applications to perform transactions.
public class MyContentProvider extends ContentProvider {
public void onCreate(){}
}
We will go through these tags in detail while covering application components in individual chapters.
Additional Components
There are additional components which will be used in the construction of above mentioned entities,
their logic, and wiring between them. These components are –
Content Providers : A content provider component एका अनु प्रयोगावरून इिरां ना डे टा पुरविो
सवनं िी अशा सवनं त्या ContentResolver वगाट च्या पद्धिींद्वारे हािाळल्या जािाि. डे टा फाईल ससस्टीममध्ये, डे टाबेसमध्ये
सकंवा इिरत्र पूणटपणे संग्रसहि केला जाऊ शकिो.
सामग्री प्रदािा सामग्री प्रदािा वगाट चा उपवगट म्हणून कायाट क्टिि केला जािो आसण त्याने API चा मानक संच लागू करणे
आवश्यक आहे जे इिर अनु प्रयोगां ना व्यवहार करण्यास सक्षम करिे.

वैयक्टिक अध्यायां मध्ये ऍक्टिकेशन घटकां चा समावेश करिाना आम्ही या टॅ ग्जचा िपशीलवार सवचार करू.
असिररि घटक
काही असिररि घटक आहे ि जे वर नमू द केलेल्या घटकां च्या बां िकामासाठी, त्यां चे िकटशास्त्र आसण त्यां च्यामिील
वायररं गमध्ये वापरले जािील. हे घटक आहे ि -

MAD-CH3
Page 2
 S.No Components & Description

Fragments
1
Represents a portion of user interface in an Activity.

Views
2
UI elements that are drawn on-screen including buttons, lists forms etc.

Layouts
3
View hierarchies that control screen format and appearance of the views.

Intents
4
Messages wiring components together.

Resources
5
External elements, such as strings, constants and drawable pictures.

Manifest
6
Configuration file for the application.

Android Application Structure:-

MAD-CH3
Page 3
 Java
1 This contains the .java source files for your project. By default, it includes an
MainActivity.java source file having an activity class that runs when your app is
launched using the app icon.

res/drawable-hdpi
2
This is a directory for drawable objects that are designed for high-density screens.

res/layout
3
This is a directory for files that define your app's user interface.

res/values
4
This is a directory for other various XML files that contain a collection of resources,
such as strings and colours definitions.

5 AndroidManifest.xml

This is the manifest file which describes the fundamental characteristics of the app and
defines each of its components.

Build.gradle
6
This is an auto generated file which contains compileSdkVersion, buildToolsVersion,
applicationId, minSdkVersion, targetSdkVersion, versionCode and versionName
Following section will give a brief overview of the important application files.

The Main Activity File

The main activity code is a Java file MainActivity.java. This is the actual application file which ultimately
gets converted to a Dalvik executable and runs your application. Following is the default code
generated by the application wizard for Hello World! application – Here, R.layout.activity_main
refers to the activity_main.xml file located in the res/layout folder. The onCreate() method is
one of many methods that are figured when an activity is loaded.

The Main Activity File मु ख्य सियाकलाप कोड जावा फाइल MainActivity.java आहे . ही वास्तसवक ऍक्टिकेशन फाईल
आहे जी शे वटी Dalvik एक्टझिक्युटेबलमध्ये रूपां िररि होिे आसण िुमचा ऍक्टिकेशन चालविे. हॅ लो वर्ल्ट साठी अॅक्टिकेशन
सविाडट द्वारे व्युत्पन्न केलेला डीफॉल्ट कोड खालीलप्रमाणे आहे ! अनु प्रयोग - येर्े, R.layout.activity_main res/layout
फोर्ल्रमध्ये असलेल्या activity_main.xml फाईलचा संदभट दे िे. onCreate() पद्धि ही अनेक पद्धिींपैकी एक आहे जी
सियाकलाप लोड िाल्यावर शोिली जािे.

MAD-CH3
Page 4
 package com.example.helloworld;

import android.support.v7.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);
}
}

The Manifest File : Whatever component you develop as a part of your application, you must
declare all its components in a manifest.xml which resides at the root of the application project
directory. This file works as an interface between Android OS and your application, so if you do
not declare your component in this file, then it will not be considered by the OS. For example, a
default manifest file will look like as following file −

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

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tutorialspoint7.myapplication">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
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>
Here <application>...</application> tags enclosed the components related to the application.
Attribute android:icon will point to the application icon available under res/drawable-hdpi. The
application uses the image named ic_launcher.png located in the drawable folders
The <activity> tag is used to specify an activity and android:name attribute specifies the fully
qualified class name of the Activity subclass and the android:label attributes specifies a string
to use as the label for the activity. You can specify multiple activities using <activity> tags.
The action for the intent filter is named android.intent.action.MAIN to indicate that this

MAD-CH3
Page 5
 activity serves as the entry point for the application. The category for the intent-filter
is named android.intent.category.LAUNCHER to indicate that the application can be launched
from the device's launcher icon.
The @string refers to the strings.xml file explained below. Hence, @string/app_name refers to
the app_name string defined in the strings.xml file, which is "HelloWorld". Similar way, other
strings get populated in the application.
Following is the list of tags which you will use in your manifest file to specify different Android
application components −
 <activity>elements for activities
 <service> elements for services
 <receiver> elements for broadcast receivers
 <provider> elements for content providers

The Manifest File : िुमच्या ऍक्टिकेशनचा एक भाग म्हणून िुम्ही कोणिाही घटक सवकससि करिा, िुम्ही त्याचे सवट घटक

manifest.xml मध्ये घोसिि केले पासहजे ि जे ऍक्टिकेशन प्रोजेि सडरे िर ीच्या रूटवर असिाि. ही फाईल Android OS आसण

िुमच्या अॅक्टिकेशनमि्ये इं टरफेस महणू

् न कायट करिे, म्हणून िुमही
् या फाईलमि्ये िुमचा घटक घोसिि न केल्यास, OS द्वारे

त्याचा सवचार केला जाणार नाही. उदाहरणार्ट, डीफॉल्ट मॅ सनफेस्ट फाइल खालील फाइल सारखी सदसेल –
येर्े्<application>...</application>्टॅ गमध्ये्अनु प्रयोगाशी्संबंसिि्घटक्समासवष्ट्आहे ि.्सवशे ििा्android:icon
res/drawable-hdpi अंिगटि्उपलब्ध्असले ल्या्ऍक्टिकेशन्सचन्ाकडे ्सनदे श्करे ल.्अॅक्टिकेशन्डरॉ्करण्यायोग्य्
फोर्ल्सटमध्ये्असले ल्या्ic_launcher.png नावाची्इमे ज्वापरिे
<activity>्टॅ ग्सियाकलाप्सनसदट ष्ट्करण्यासाठी्वापरला्जािो्आसण्android:name सवशे ििा्सियाकलाप्उपवगाट चे्पूणट्
पात्र्वगट्नाव्सनसदट ष्ट्करिे्आसण्android:label सवशे ििा्सियाकलापासाठी्ले बल्म्हणून्वापरण्यासाठी्एक्क्टस्टरंग्सनसदट ष्ट्
करिे.्िुम्ही्<activity>्टॅ ग्वापरून्अने क्सियाकलाप्सनसदट ष्ट्करू्शकिा.
इं टेंट्सफल्टरच्या्सियेला्android.intent.action.MAIN असे्नाव्दे ण्याि्आले ्आहे ्की्ही्सिया्ऍक्टिकेशनसाठी्एं टर ी्
पॉइं ट्म्हणून्काम्करिे.्इं टेंट-सफल्टरसाठीच्या्श्रे णीला्android.intent.category.LAUNCHER असे्नाव्दे ण्याि्आले ्
आहे ्हे ्सूसचि्करण्यासाठी्की्अनु प्रयोग्सडिाइसच्या्लााँ चर्सचन्ावरून्लॉन्च्केला्जाऊ्शकिो.
@string खाली्स्पष्ट्केले ल्या्strings.xml फाइलचा्संदभट्दे िे.्म्हणून, @string/app_name strings.xml फाइलमध्ये्
पररभासिि्केलेल्या्app_name क्टस्टरंगचा्संदभट ्दे िे, जी्"HelloWorld" आहे .्त्याच्प्रकारे , इिर्क्टस्टरंग्स्ऍक्टिकेशनमध्ये्
पॉप्युलेट्होिाि.
खालील्टॅ गची्सूची्आहे ्जी्िुम्ही्िुमच्या्मॅ सनफेस्ट्फाइलमध्ये्सभन्न्Android अनु प्रयोग्घटक्सनसदट ष्ट्करण्यासाठी्वापराल्
-
•्<सियाकलाप>सियाकलापां साठी्घटक
• सेवां साठी्<service>्घटक
• ब्रॉडकास्ट्ररसीिरसाठी्<ररसीिर>्घटक
• सामग्री्प्रदात्यां साठी्<provider>्घटक

The Strings File : The strings.xml file is located in the res/values folder and it contains all the
text that your application uses. For example, the names of buttons, labels, default text, and
similar types of strings go into this file. This file is responsible for their textual content. For
example, a default strings file will look like as following file −

MAD-CH3
Page 6
 <resources>
<string name="app_name">HelloWorld</string>
<string name="hello_world">Hello world!</string>
<string name="menu_settings">Settings</string>
<string name="title_activity_main">MainActivity</string>
</resources>
The Layout File : The activity_main.xml is a layout file available in res/layout directory, that is
referenced by your application when building its interface. You will modify this file very frequently to
change the layout of your application. For your "Hello World!" application, this file will have following
content related to default layout −

<RelativeLayout 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" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:padding="@dimen/padding_medium"
android:text="@string/hello_world"
tools:context=".MainActivity" />

</RelativeLayout>
This is an example of simple RelativeLayout which we will study in a separate chapter. The
TextView is an Android control used to build the GUI and it have various attributes like
android:layout_width, android:layout_height etc which are being used to set its width and
height etc.. The @string refers to the strings.xml file located in the res/values folder. Hence,
@string/hello_world refers to the hello string defined in the strings.xml file, which is "Hello
World!".

Android UI Components:-
There are number of UI controls provided by Android that allow you to build the graphical user
interface for your app.
Sr.No. UI Control & Description

1 TextView
This control is used to display text to the user.

2 EditText
EditText is a predefined subclass of TextView that includes rich editing capabilities.

MAD-CH3
Page 7
 3 AutoCompleteTextView
The AutoCompleteTextView is a view that is similar to EditText, except that it shows a list
of completion suggestions automatically while the user is typing.

4 Button
A push-button that can be pressed, or clicked, by the user to perform an action.

MAD-CH3
Page 8
 5 ImageButton
An ImageButton is an AbsoluteLayout which enables you to specify the exact location of
its children. This shows a button with an image (instead of text) that can be pressed or
clicked by the user.

6 CheckBox
An on/off switch that can be toggled by the user. You should use check box when
presenting users with a group of selectable options that are not mutually exclusive.

7 ToggleButton
An on/off button with a light indicator.

8 RadioButton
The RadioButton has two states: either checked or unchecked.

9 RadioGroup
A RadioGroup is used to group together one or more RadioButtons.

10 ProgressBar
The ProgressBar view provides visual feedback about some ongoing tasks, such as when
you are performing a task in the background.

11 Spinner
A drop-down list that allows users to select one value from a set.

12 TimePicker
The TimePicker view enables users to select a time of the day, in either 24-hour mode or
AM/PM mode.

13 DatePicker
The DatePicker view enables users to select a date of the day.
Create UI Controls
Input controls are the interactive components in your app's user interface. Android provides a
wide variety of controls you can use in your UI, such as buttons, text fields, seek bars, check
box, zoom buttons, toggle buttons, and many more.
As explained in previous chapter, a view object may have a unique ID assigned to it which will
identify the View uniquely within the tree. The syntax for an ID, inside an XML tag is −
android:id="@+id/text_id"
To create a UI Control/View/Widget you will have to define a view/widget in the layout file
and assign it a unique ID as follows −
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"

MAD-CH3
Page 9
 android:layout_height="fill_paren
t" android:orientation="vertical" >

<TextView android:id="@+id/text_id"
android:layout_width="wrap_content
"
android:layout_height="wrap_conte
nt" android:text="I am a TextView"
/>
Then finally create an instance of the Control object and capture it from the layout, use the
</LinearLayout>
following −
TextView myText = (TextView) findViewById(R.id.text_id);

Android Directory structure :-

Android project structure, the most frequently edited folders are:

 src - Java source files associated with your project. This includes the Activity "controller"
files as well as your models and helpers.
 res - Resource files associated with your project. All graphics, strings, layouts, and other
resource files are stored in the resource file hierarchy under the res directory.
 res/layout - XML layout files that describe the views and layouts for each activity and for
partial views such as list items.
 res/values - XML files which store various attribute values. These include strings.xml,
dimens.xml, styles.xml, colors.xml, themes.xml, and so on.
 res/drawable - Here we store the various density-independent graphic assets used in
our application.
 res/drawable-hdpi - Series of folders for density specific images to use for various
resolutions.
 res/mipmap - most commonly used for application icons. See this section for more
details.
Android Directory structure :-
Android प्रकल्प रचना, सवाट ि वारं वार संपासदि फोर्ल्र आहेि:

• src - िुमच्या प्रकल्पाशी संबंसिि Java स्रोि फाइल्स. यामध्ये अॅक्टिक्टिटी "कंटर ोलर" फाइल्स िसेच िुमचे मॉडे ल आसण
मदिनीस यां चा समावेश होिो.
• res - िुमच्या प्रोजे िशी संबंसिि ररसोसट फाइल्स. सवट ग्रासफस, क्टस्टरंग्स, ले आउटस आसण इिर ररसोसट फाइल्स रे स
सडरे िरी अंिगटि ररसोसट फाइल पदानु िमामध्ये संग्रसहि केल्या जािाि.
• res/ले आउट - XML ले आउट फाइल्स ज्या प्रत्येक सियाकलापासाठी आसण आं सशक दृश्यां साठी जसे की सूची आयटमसाठी
दृश्ये आसण ले आउटचे वणटन करिाि.
• res/values - XML फाइल्स ज्या सवसवि सवशे ििा मू ल्ये संग्रसहि करिाि. यामध्ये strings.xml, dimens.xml, styles.xml,
colors.xml, themes.xml इत्यादींचा समावेश आहे .
• res/drawable - येर्े आम्ही आमच्या ऍक्टिकेशनमध्ये वापरले ली सवसवि घनिा-स्विंत्र ग्रासफक मालमत्ता संग्रसहि करिो.
• res/drawable-hdpi - सवसवि ररजोल्यू शनसाठी वापरण्यासाठी घनिेच्या सवसशष्ट प्रसिमां साठी फोर्ल्सटची मासलका.
• res/mipmap - सवाट ि सामान्यपणे अॅक्टिकेशन सचन्ां साठी वापरले जािे. असिकसाठी हा सवभाग पहा
िपशील

MAD-CH3
Page 10
 The most frequently edited files are:

 res/layout/activity_foo.xml - This file describes the layout of the activity's UI. This means
the placement of every view object on one app screen.
 src/.../FooActivity.java - The Activity "controller" that constructs the activity using the
view, and handles all event handling and view logic for one app screen.
 AndroidManifest.xml - This is the Android application definition file. It contains
information about the Android application such as minimum Android version,
permission to access Android device capabilities such as internet access permission,
ability to use phone permission, etc.

Other less edited folders include:

 gen - Generated Java code files, this library is for Android internal use only.
 assets - Uncompiled source files associated with your project; Rarely used.
 bin - Resulting application package files associated with your project once it’s been built.
 libs - Before the introduction of Gradle build system, this directory was used for any
secondary libraries (jars) you might want to link to your app.

Components of Screen, Fundamentals of UI Design:-

UI screen components
A typical user interface of an android application consists of action bar and the application
content area.
 Main Action Bar
 View Control
 Content Area
 Split Action Bar
These components have also been shown in the image below −

Understanding Screen Components OR Fundamentals of UI Design :-

The basic unit of android application is the activity. A UI is defined in an xml file. During
compilation, each element in the XML is compiled into equivalent Android GUI class with
attributes represented by methods.
View and ViewGroups

MAD-CH3
Page 11
 An activity is consist of views. A view is just a widget that appears on the screen. It could be
button e.t.c. One or more views can be grouped together into one GroupView. Example of
ViewGroup includes layouts.

Types of layout
There are many types of layout. Some of which are listed below −
Sr.No Layout & Description

1 Linear Layout
LinearLayout is a view group that aligns all children in a single direction, vertically or
horizontally.
2 Relative Layout
RelativeLayout is a view group that displays child views in relative positions.

3 Table Layout
TableLayout is a view that groups views into rows and columns.

4 Absolute Layout
AbsoluteLayout enables you to specify the exact location of its children.

5 Frame Layout
The FrameLayout is a placeholder on screen that you can use to display a single view.

6 List View
ListView is a view group that displays a list of scrollable items.

7 Grid View
GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid.

Linear Layout
Linear layout is further divided into horizontal and vertical layout. It means it can arrange
views in a single column or in a single row. Here is the code of linear layout(vertical) that
includes a text view.

MAD-CH3
Page 12
 LinearLayout Attributes
Following are the important attributes specific to LinearLayout −

Sr.No Attribute & Description

1 android:id
This is the ID which uniquely identifies the layout.

android:baselineAligned
2 This must be a boolean value, either "true" or "false" and prevents the layout from aligning its children's
baselines.

android:baselineAlignedChildIndex
3 When a linear layout is part of another layout that is baseline aligned, it can specify which of its
children to baseline align.

android:divider
4 This is drawable to use as a vertical divider between buttons. You use a color value, in the form of
"#rgb", "#argb", "#rrggbb", or "#aarrggbb".

android:gravity
5 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.

android:orientation
6 This specifies the direction of arrangement and you will use "horizontal" for a row, "vertical" for a
column. The default is horizontal.

android:weightSum
7
Sum up of child weight

Example
This example will take you through simple steps to show how to create your own Android
application using Linear Layout. Follow the following steps to modify the Android application
we created in Hello World Example chapter −

MAD-CH3
Page 13
 Step Description

1 You will use Android Studio to create an Android application and name it as Demo under a
package com.example.demo as explained in the Hello World Example chapter.

2 Modify the default content of res/layout/activity_main.xml file to include few buttons in linear
layout.

3 No need to change string Constants.Android studio takes care of default strings

4 Run the application to launch Android emulator and verify the result of the changes done in the
application.

Following is the content of the modified main activity file

src/com.example.demo/MainActivity.java. This file can include each of the fundamental
lifecycle methods.

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

<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_paren
t” android:orientation=”vertical” >

<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_conten
t” android:text=”@string/hello” />
</LinearLayout>

MAD-CH3
Page 14
 An Absolute Layout lets you specify exact locations (x/y coordinates) of its children. Absolute
layouts are less flexible and harder to maintain than other types of layouts without absolute
positioning.
AbsoluteLayout

MAD-CH3
Page 15
AbsoluteLayout Attributes
Following are the important attributes specific to AbsoluteLayout −

Sr.No Attribute & Description

1
android:id
This is the ID which uniquely identifies the layout.

2
android:layout_x
This specifies the x-coordinate of the view.

3
android:layout_y
This specifies the y-coordinate of the view.

Public Constructors

AbsoluteLayout(Context context)

AbsoluteLayout(Context context, AttributeSet attrs)

AbsoluteLayout(Context context, AttributeSet attrs, int defStyleAttr)

AbsoluteLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes)

Example

This example will take you through simple steps to show how to create your own Android
application using absolute layout. Follow the following steps to modify the Android application
we created in Hello World Example chapter −

Step Description

MAD-CH3
Page 16
 1 You will use Android studio IDE to create an Android application and name it as demo under a package
com.example.demo as explained in the Hello World Example chapter.

2 Modify the default content of res/layout/activity_main.xml file to include few widgets in absolute
layout.

3 No need to modify string.xml, Android studio takes care of default constants

4 Run the application to launch Android emulator and verify the result of the changes done in the
application.

Following is the content of the modified main activity file

src/com.example.demo/MainActivity.java. This file can include each of the fundamental
lifecycle methods.
package com.example.demo;

import android.os.Bundle;
import android.app.Activity;

public class MainActivity extends Activity {

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

}
Following will be the content of res/layout/activity_main.xml file −
<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="OK"
android:layout_x="50px"
android:layout_y="361px" />
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"

MAD-CH3
Page 17
 android:text="Cancel"
android:layout_x="225px"
android:layout_y="361px" />

</AbsoluteLayout>
Following will be the content of res/values/strings.xml to define two new constants −

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

<resources>
<string name="app_name">demo</string>
<string name="action_settings">Settings</string>
</resources>

TableLayout

Android TableLayout going to be arranged groups of views into rows and columns. You will use the
<TableRow> element to build a row in the table. Each row has zero or more cells; each cell can
hold one View object.
TableLayout containers do not display border lines for their rows, columns, or cells.

MAD-CH3
Page 18
 TableLayout Attributes
Following are the important attributes specific to TableLayout −

Sr.No. Attribute & Description

1
android:id
This is the ID which uniquely identifies the layout.

2
android:collapseColumns
This specifies the zero-based index of the columns to collapse. The column indices must be separated
by a comma: 1, 2, 5.

3
android:shrinkColumns
The zero-based index of the columns to shrink. The column indices must be separated by a comma: 1, 2,
5.

4
android:stretchColumns
The zero-based index of the columns to stretch. The column indices must be separated by a comma: 1,
2, 5.

Example
This example will take you through simple steps to show how to create your own Android
application using Table Layout. Follow the following steps to modify the Android application
we created in Hello World Example chapter −
Step Description

1 You will use Android Studio IDE to create an Android application and name it as demo under a package
com.example.demo as explained in the Hello World Example chapter.

2 Modify the default content of res/layout/activity_main.xml file to include few widgets in table
layout.

3 No need to modify string.xml, Android studio takes care of default constants

4 Run the application to launch Android emulator and verify the result of the changes done in the
application.

Following is the content of the modified main activity file

src/com.example.demo/MainActivity.java. This file can include each of the fundamental
lifecycle methods.

MAD-CH3
Page 19
 package com.example.demo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

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

Following will be the content of res/layout/activity_main.xml file −

<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" />

<TextClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textClock"
android:layout_column="2" />

</TableRow>

<TableRow>

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

<EditText
android:width="200px"

MAD-CH3
Page 20
 android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>

<TableRow>

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

<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>

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

<RatingBar android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ratingBar"
android:layout_column="2" />
</TableRow>

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

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

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit" android:id="@+id/button"
android:layout_column="2" />
</TableRow>

</TableLayout>
Following will be the content of res/values/strings.xml to define two new constants −
<?xml version="1.0" encoding="utf-8"?>

MAD-CH3
Page 21
 <resources>
<string name="app_name">HelloWorld</string>
<string name="action_settings">Settings</string>
</resources>

RelativeLayout:-

Android RelativeLayout enables you to specify how child views are positioned relative to each
other. The position of each view can be specified as relative to sibling elements or relative to the
parent.

Relative Layout

RelativeLayout Attributes
Following are the important attributes specific to RelativeLayout −
Sr.No. Attribute & Description

1 android:id
This is the ID which uniquely identifies the layout.

2 android:gravity
This specifies how an object should position its content, on both the X and Y axes.

MAD-CH3
Page 22
 Possible values are top, bottom, left, right, center, center_vertical, center_horizontal etc.

3 android:ignoreGravity
This indicates what view should not be affected by gravity.
Using RelativeLayout, you can align two elements by right border, or make one below another,
centered in the screen, centered left, and so on. 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 RelativeLayout.LayoutParams and few of the important attributes
are given below −
Sr.No. Attribute & Description

1
android:layout_above
Positions the bottom edge of this view above the given anchor view ID and must be a reference to
another resource, in the form "@[+][package:]type:name"

2
android:layout_alignBottom
Makes the bottom edge of this view match the bottom edge of the given anchor view ID and must
be a reference to another resource, in the form "@[+][package:]type:name".

3
android:layout_alignLeft
Makes the left edge of this view match the left edge of the given anchor view ID and must be a
reference to another resource, in the form "@[+][package:]type:name".

4
android:layout_alignParentBottom
If true, makes the bottom edge of this view match the bottom edge of the parent. Must be a
boolean value, either "true" or "false".

5
android:layout_alignParentEnd
If true, makes the end edge of this view match the end edge of the parent. Must be a boolean
value, either "true" or "false".

6
android:layout_alignParentLeft
If true, makes the left edge of this view match the left edge of the parent. Must be a boolean
value, either "true" or "false".

7
android:layout_alignParentRight
If true, makes the right edge of this view match the right edge of the parent. Must be a boolean
value, either "true" or "false".

MAD-CH3
Page 23
 8
android:layout_alignParentStart
If true, makes the start edge of this view match the start edge of the parent. Must be a boolean
value, either "true" or "false".

9
android:layout_alignParentTop
If true, makes the top edge of this view match the top edge of the parent. Must be a boolean
value, either "true" or "false".

10
android:layout_alignRight
Makes 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 "@[+][package:]type:name".

11
android:layout_alignStart
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 "@[+][package:]type:name".

12
android:layout_alignTop
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 "@[+][package:]type:name".

13
android:layout_below
Positions the top edge of this view below the given anchor view ID and must be a reference to
another resource, in the form "@[+][package:]type:name".

14
android:layout_centerHorizontal
If true, centers this child horizontally within its parent. Must be a boolean value, either "true" or
"false".

15
android:layout_centerInParent
If true, centers this child horizontally and vertically within its parent. Must be a boolean value,
either "true" or "false".

16
android:layout_centerVertical
If true, centers this child vertically within its parent. Must be a boolean value, either "true" or
"false".

17
android:layout_toEndOf
Positions the start edge of this view to the end of the given anchor view ID and must be a

MAD-CH3
Page 24
 reference to another resource, in the form "@[+][package:]type:name".

18
android:layout_toLeftOf
Positions the right edge of this view to the left of the given anchor view ID and must be a
reference to another resource, in the form "@[+][package:]type:name".

19
android:layout_toRightOf
Positions the left edge of this view to the right of the given anchor view ID and must be a
reference to another resource, in the form "@[+][package:]type:name".

20
android:layout_toStartOf
Positions the end edge of this view to the start of the given anchor view ID and must be a
reference to another resource, in the form "@[+][package:]type:name".

Example
This example will take you through simple steps to show how to create your own Android
application using Relative Layout. Follow the following steps to modify the Android application
we created in Hello World Example chapter –

Step Description

1 You will use Android Studio IDE to create an Android application and name it as demo under a package
com.example.demo as explained in the Hello World Example chapter.

2 Modify the default content of res/layout/activity_main.xml file to include few widgets in Relative
layout.

3 Define required constants in res/values/strings.xml file

4 Run the application to launch Android emulator and verify the result of the changes done in the
application.

Following is the content of the modified main activity file

src/com.example.demo/MainActivity.java. This file can include each of the fundamental
lifecycle methods.

MAD-CH3
Page 25
 package com.example.demo;

import android.os.Bundle;
import android.app.Activity;

public class MainActivity extends Activity {

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

}
Following will be the content of res/layout/activity_main.xml file −

<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" />

<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentStart="true"
android:layout_below="@+id/name">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button2" />

</LinearLayout>

MAD-CH3
Page 26
 </RelativeLayout>
Following will be the content of res/values/strings.xml to define two new constants −
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="action_settings">Settings</string>
<string name="reminder">Enter your name</string>
</resources>

FrameLayout :-
Frame Layout is designed to block out an area on the screen to display a single item. Generally,
FrameLayout 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 FrameLayout and control their position within
the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.

MAD-CH3
Page 27
 Frame Layout

FrameLayout Attributes

MAD-CH3
Page 28
 Following are the important attributes specific to FrameLayout −
Sr.No Attribute & Description

1 android:id
This is the ID which uniquely identifies the layout.

2 android:foreground
This defines the drawable to draw over the content and possible values may be a color value, in the
form of "#rgb", "#argb", "#rrggbb", or "#aarrggbb".

3 android:foregroundGravity
Defines the gravity to apply to the foreground drawable. The gravity defaults to fill. Possible values are
top, bottom, left, right, center, center_vertical, center_horizontal etc.

4 android:measureAllChildren
Determines whether to measure all children or just those in the VISIBLE or INVISIBLE state when
measuring. Defaults to false.

Example
This example will take you through simple steps to show how to create your own Android
application using frame layout. Follow the following steps to modify the Android application
we created in Hello World Example chapter −
Step Description

1 You will use Android studio IDE to create an Android application and name it as demo under a
package com.example.demo as explained in the Hello World Example chapter.

2 Modify the default content of res/layout/activity_main.xml file to include few widgets in frame layout.

3 No need to change string.xml, android takes care default constants

4 Run the application to launch Android emulator and verify the result of the changes done in the
application.

Following is the content of the modified main activity

file src/com.example.demo/MainActivity.java. This file can include each of the fundamental
lifecycle methods.

package com.example.demo;

import
android.os.Bundle;
import
android.app.Activity;

public class MainActivity extends Activity {

MAD-CH3
Page 29
 @Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Following will be the content of res/layout/activity_main.xml file −
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<ImageView
android:src="@drawable/ic_launch
er" android:scaleType="fitCenter"
android:layout_height="250px"
android:layout_width="250px"/>

<TextView
android:text="Frame
Demo"
android:textSize="30px"
android:textStyle="bold"
android:layout_height="fill_paren
t"
android:layout_width="fill_parent
" android:gravity="center"/>
Following will be the content of res/values/strings.xml to define two new constants −
</FrameLayout>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">demo</string>
<string name="action_settings">Settings</string>
</resources>

MAD-CH3
Page 30