Unit III : UI Components and Layouts

3.1 Control Flow:

Java programming language can be used in development of Android Apps. Android IDE
or tools check and compile the dependencies, code, resource, data and generate an APK.

APK file comprises all the content of the app. Each app runs on emulator or virtual
machine so that app can run inaccessible from other apps. Each Android app only access
to the components which it requires to do its work.

Application components are the vital parts of an Android application. All components are
associated with the manifest file AndroidManifest.xml that defines each component of the
application and way of interact.

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.

1. 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 {
}

2. 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 {
}

3. 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){}
}

4. 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.

3.1.1 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 −

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.

3.1.2 Android Application Structure

Before you run your app, you should be aware of a few directories and files in the Android project −
Sr.No. Folder, File & Description

Java
1
This contains the .java source files for your project. By default, it includes anMainActivity.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.
AndroidManifest.xml
5
This is the manifest file which describes the fundamental characteristics of the app and defines
each of its components.
6 Build.gradle
 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.

1. 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 −
packagecom.example.helloworld;

import android.support.v7.app.AppCompatActivity;
importandroid.os.Bundle;

publicclassMainActivityextendsAppCompatActivity{
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

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.

2. 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"?>
<manifestxmlns: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">

<activityandroid:name=".MainActivity">
<intent-filter>
<actionandroid:name="android.intent.action.MAIN"/>
<categoryandroid: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
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

3. 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 −
<resources>
<stringname="app_name">HelloWorld</string>
<stringname="hello_world">Hello world!</string>
<stringname="menu_settings">Settings</string>
<stringname="title_activity_main">MainActivity</string>
</resources>

4. The Layout File

The activity_main.xml is a layout file available in res/layoutdirectory, 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 −
<RelativeLayoutxmlns: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_heightetc 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!".

3.1.3 Android UI Controls

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

TextView
1
This control is used to display text to the user.
EditText
2
EditText is a predefined subclass of TextView that includes rich editing capabilities.
AutoCompleteTextView
3
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.
Button
4
A push-button that can be pressed, or clicked, by the user to perform an action.
ImageButton

5
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.
CheckBox
6
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.
ToggleButton
7
An on/off button with a light indicator.
RadioButton
8
The RadioButton has two states: either checked or unchecked.
RadioGroup
9
A RadioGroup is used to group together one or more RadioButtons.
ProgressBar
10
The ProgressBar view provides visual feedback about some ongoing tasks, such as when you are
performing a task in the background.
Spinner
11
A drop-down list that allows users to select one value from a set.
TimePicker
12
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.

3.1.4 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"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/
android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">

<TextViewandroid:id="@+id/text_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a TextView"/>
</LinearLayout>

Then finally create an instance of the Control object and capture it from the layout, use the
following −
TextViewmyText=(TextView)findViewById(R.id.text_id);

3.1.5 Directory Structure in Android Project

An Android project is a combination of required files and folders which further builds a
directory to complete any android application.

The Android is most popular open source mobile platform and the need of the android
application is growing very rapidly. In this article, the directory structure for any android
project. The directory structure is a foundation of an Android project. It acts like a
container which holds the necessary logic’s, images, customization in its real form.
During the generation of a project, android looks into these folders to locate each type of
assets it needs.

1. Android Projects:

An Android project is the container for our application’s source code, resource files and
files such as the Ant build and Android Manifest file. An application project is the main
type of project and the contents are eventually built into an .apk file that you install on a
device.

2. Test Projects:

This projects contain code to test our application projects and are built into applications
that run on a device.

3. Library Projects:

These projects contains shareable Android source code and android resources that we can
reference in Android projects. This is useful when we have common code that we want to
reuse. Library projects cannot be installed onto a device however, they are pulled into
the .apk file at build time.

3.1.6 Android Directory Structure

The main objective of an Android project is to build an .apk file from it. And for this
when we start with an android project then some directories creates by default and some
needs few customization to enhance android applications. So let’s understand the
directory structure in android project to develop an android application.

1. /src :This is the most common folder in any Android project. It contains our java
source code for android application. Under this folder we can see our java source
files in which we write logic for android applications.
2. /gen: In most IDE (such as Eclipse) this folder is created by IDE for configuration
purpose. Under this folder we can find two java files such as BuildConfig.java and
R. java. Both files are auto generated by IDE which helps android project to work
smoothly.
3. /Android(version name):Under this folder we can see some android.jar file which
relates to android sdk platform. We should not modify this file for smooth
functioning of our project.
4. /assets: By default this folder is empty, but we can store raw asset files such as
music file, data file etc. in this folder. The file retain its original name and structure
when compiled into an .apk file.
5. /bin:This is very important folder in our directory structure as its contains
AndroidManifest.xml file and serve as an output directory for our project which
further build an .apk file.
 6. /libs:This folder contains private libraries.
7. /res:This folder contains lots of required sub folders for the project. Let’s
understand these folders one by one.

a. /drawable: Under this folder we store images (PNG, JPEG, GIF) for our
project. Generally this folder comes with five types of sub folders which ensures
rendering of images on mobile devices according to its screen resolution. There
are five sub folders with different names such as: drawable-hdpi, drawable-ldpi,
drawable-mdpi, drawable-xhdpi, drawable-xxhdpi. Normally Google
prefers .PNG format for images.
b. /layout: Under this folder we store UI layouts file for our android project, which
is written in xml format. We can store as many activity file under this folder. In
other words this folder relates to our application UI layouts.
c. /menu: For xml files that define application menus.
d. /values: In this folder, we place predefined application values in the form of
XML files that define the variable names and their value that will be later
reference in our java source code. In Simple words, it holds all our constant
values for our application in one place. Within this folder we can find three xml
files such as:

 Dimens.xml:This xml file defines the dimension values such as font sizes and
standard heights for our UI.
 Strings.xml: In this file, we define text strings which is used in the application.
For Example: if we wish to change the title of an application, then we can
simply change in this file instead of doing any hard coding in application.
 Styles.xml: This XML file defines styles which is used in the application.
Generally we apply these styles to our UI elements. With the help of style we
can separate the look of our application from the layout and functionality.

8. /project.properties: This file contains project settings, such as the build target. We
can edit project properties in UI screen components.

3.2 Components of Screen, Fundamental of UI Design:

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 −

a. Understanding Screen Components

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.

b. View and ViewGroups

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.

3.2.1 Fundamental of Android UI Design:

It’s important of creation of User Interfaces in any android application. Android presents
some new terminology for familiar programming.

1. Views are the basic User Interface class for visual interface elements commonly
known as controls or widgets. All UI controls, and the layout classes are derived
from views.
2. View groups are extensions of the View class that can contain multiple child Views.
The View Group class can create compound controls that are made up of
interconnected child Views. It also extended to provide the layout managers, such
as Linear Layout, that help you to compose User Interfaces.
3. Activities represent the window or screen being displayed to the user. Activities are
the Android equivalent of a Form. Assign a View or layout to an Activity to display
a User Interface. Android provides several common UI controls, widgets, and
layout managers. For most graphical applications, it’s likely that you’ll need to
extend and modify these standard controls- or create composite or entirely new
controls- to provide your own functionality.
3.3 Types of layout

There are many types of layout. Some of which are listed below −

 Linear Layout
 Absolute Layout
 Table Layout
 Frame Layout
 Relative Layout

3.3.1 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.
<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayoutxmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical”>

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

Android LinearLayout is a view group that aligns all children in either vertically or
horizontally.

Linear Layout

3.3.1(A) LinearLayout Attributes:

Following are the important attributes specific to LinearLayout −

Sr.No Attribute & Description

android:id
1
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 −

Step Description

You will use Android Studio to create an Android application and name it as Demo under a package
1
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.
packagecom.example.demo;

importandroid.os.Bundle;
importandroid.app.Activity;

publicclassMainActivityextendsActivity{
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">

<Buttonandroid:id="@+id/btnStartService"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:text="start_service"/>

<Buttonandroid:id="@+id/btnPauseService"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:text="pause_service"/>

<Buttonandroid:id="@+id/btnStopService"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:text="stop_service"/>

</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
<stringname="app_name">HelloWorld</string>
<stringname="action_settings">Settings</string>
</resources>

Let's try to run our modified Hello World!application we just modified. I assume you had
created your AVD while doing environment setup. To run the app from Android studio,
open one of your project's activity files and click Run icon from the toolbar. Android
studio installs the app on your AVD and starts it and if everything is fine with your setup
and application, it will display following Emulator window −
Now let's change the orientation of Layout as android:orientation="horizontal" and try to run the same
application, it will give following screen −

3.3.2 Absolute Layout:

The Absolute Layout enables you to specify the exact location of its children. It can be
declared like this.
<AbsoluteLayout
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
xmlns:android=”http://schemas.android.com/apk/res/android”>

<Button
android:layout_width=”188dp”
android:layout_height=”wrap_content”
android:text=”Button”
android:layout_x=”126px”
android:layout_y=”361px”/>
</AbsoluteLayout>

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.

Absolute Layout

3.3.2(A) Absolute Layout Attributes:

Following are the important attributes specific to Absolute Layout −

Sr.No Attribute & Description

android:id
1
This is the ID which uniquely identifies the layout.
android:layout_x
2
This specifies the x-coordinate of the view.
android:layout_y
3
This specifies the y-coordinate of the view.

Public Constructors

AbsoluteLayout(Context context)

AbsoluteLayout(Context context, Attribute Setattrs)

AbsoluteLayout(Context context, Attribute Setattrs, int defStyleAttr)

AbsoluteLayout(Context context, Attribute Setattrs, 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

You will use Android studio IDE to create an Android application and name it as demo under a package
1
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.
packagecom.example.demo;

importandroid.os.Bundle;
importandroid.app.Activity;

publicclassMainActivityextendsActivity{
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

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

<AbsoluteLayoutxmlns: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"
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>
<stringname="app_name">demo</string>
<stringname="action_settings">Settings</string>
</resources>

Let's try to run our modified Hello World!application we just modified. I assume you had
created your AVD while doing environment setup. To run the app from Android Studio,
open one of your project's activity files and click Run icon from the toolbar. Android
Studio installs the app on your AVD and starts it and if everything is fine with your setup
and application, it will display following Emulator window −
3.3.3 Table Layout:

The Table Layout groups views into rows and columns. It can be declared like this.
<TableLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>

<TableRow>
<TextView
android:text=”UserName:”
android:width=”120dp”
/>

<EditText
android:id=”@+id/txtUserName”
android:width=”200dp”/>
</TableRow>

</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.
3.3.3(A) TableLayout Attributes:

Following are the important attributes specific to TableLayout −

Sr.No. Attribute & Description

android:id
1
This is the ID which uniquely identifies the layout.
android:collapseColumns
2
This specifies the zero-based index of the columns to collapse. The column indices must be
separated by a comma: 1, 2, 5.
android:shrinkColumns
3
The zero-based index of the columns to shrink. The column indices must be separated by a comma:
1, 2, 5.
android:stretchColumns
4
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

You will use Android Studio IDE to create an Android application and name it as demo under a package
1
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.
packagecom.example.demo;

importandroid.os.Bundle;
importandroid.app.Activity;
importandroid.view.Menu;

publicclassMainActivityextendsActivity{
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

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

<TableLayoutxmlns: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"
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"?>
<resources>
<stringname="app_name">HelloWorld</string>
<stringname="action_settings">Settings</string>
</resources>

Let's try to run our modified Hello World!application we just modified. I assume you had
created your AVD while doing environment setup. To run the app from Android Studio,
open one of your project's activity files and click Run icon from the toolbar. Android
studio installs the app on your AVD and starts it and if everything is fine with your setup
and application, it will display following Emulator window −

3.3.4 Relative Layout:

The RelativeLayout enables you to specify how child views are positioned relative to each
other.It can be declared like this.
<RelativeLayout
android:id=”@+id/RLayout”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
xmlns:android=”http://schemas.android.com/apk/res/android”>
</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

3.3.4(A) RelativeLayout Attributes:

Following are the important attributes specific to RelativeLayout −

Sr.No. Attribute & Description

android:id
1
This is the ID which uniquely identifies the layout.
android:gravity
2
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:ignoreGravity
3
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

android:layout_above
1
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"
android:layout_alignBottom
2
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".
android:layout_alignLeft
3
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".
android:layout_alignParentBottom
4
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".
android:layout_alignParentEnd
5
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".
android:layout_alignParentLeft
6
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".
android:layout_alignParentRight
7
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".
android:layout_alignParentStart
8
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".
android:layout_alignParentTop
9
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".
android:layout_alignRight
10
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".
android:layout_alignStart
11
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".
android:layout_alignTop
12
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".
 android:layout_below
13
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".
android:layout_centerHorizontal
14
If true, centers this child horizontally within its parent. Must be a boolean value, either "true" or
"false".
android:layout_centerInParent
15
If true, centers this child horizontally and vertically within its parent. Must be a boolean value,
either "true" or "false".
android:layout_centerVertical
16
If true, centers this child vertically within its parent. Must be a boolean value, either "true" or
"false".
android:layout_toEndOf
17
Positions the start edge of this view to the end of the given anchor view ID and must be a reference
to another resource, in the form "@[+][package:]type:name".
android:layout_toLeftOf
18
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".
android:layout_toRightOf
19
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".
android:layout_toStartOf
20
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

You will use Android Studio IDE to create an Android application and name it as demo under a package
1
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.
packagecom.example.demo;

importandroid.os.Bundle;
importandroid.app.Activity;

publicclassMainActivityextendsActivity{
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

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

<RelativeLayoutxmlns: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>

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

Let's try to run our modified Hello World!application we just modified. I assume you had
created your AVD while doing environment setup. To run the app from Android Studio,
open one of your project's activity files and click Run icon from the toolbar. Android
Studio installs the app on your AVD and starts it and if everything is fine with your setup
and application, it will display following Emulator window −

3.3.5 Frame Layout:

The Frame Layout is a placeholder on screen that you can use to display a single view. It
can be declared like this.
<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignLeft=”@+id/lblComments”
android:layout_below=”@+id/lblComments”
android:layout_centerHorizontal=”true”>

<ImageView
android:src=“@drawable/droid”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”/>
</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.

Frame Layout

3.3.5(A) Frame Layout Attributes:

Following are the important attributes specific to FrameLayout −

Sr.No Attribute & Description

1 android:id
 This is the ID which uniquely identifies the layout.
android:foreground
2
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".
android:foregroundGravity
3
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.
android:measureAllChildren
4
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

You will use Android studio IDE to create an Android application and name it as demo under a package
1
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.
packagecom.example.demo;

importandroid.os.Bundle;
importandroid.app.Activity;

publicclassMainActivityextendsActivity{
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

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

<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<ImageView
android:src="@drawable/ic_launcher"
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_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
<stringname="app_name">demo</string>
<stringname="action_settings">Settings</string>
</resources>

Let's try to run our modified Hello World!application we just modified. I assume you had
created your AVD while doing environment setup. To run the app from Android Studio,
open one of your project's activity files and click Run icon from the toolbar. Android
Studio installs the app on your AVD and starts it and if everything is fine with your setup
and application, it will display following Emulator window −