III.

BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)

UNIT-III
CHAPTER-I
LAYING OUT CONTROLS IN CONTAINERS
Introduction to Layouts
Layouts are basically containers for other items known as views, which are displayed on
the screen. Layouts help manage and arrange views as well. Layouts are defined in the form of XML
files that cannot be changed by our code during runtime.
Layout Manager Description
LinearLayout Organizes its children either horizontally or vertically
RelativeLayout Organizes its children relative to one another or to the parent
AbsoluteLayout Each child control is given a specific location within the bounds of the
container
FrameLayout Displays a single view; that is, the next view replaces the previous view and
hence is used to dynamically change the children in the layout
TableLayout Organizes its children in tabular form
GridLayout Organizes its children in grid format

LinearLayout
The LinearLayout is the most basic layout, and it arranges its elements sequentially, either
horizontally or vertically. To arrange controls within a linear layout, the following attributes are used
 android:orientation—Used for arranging the controls in the container in horizontal or vertical order
 android: layout _width—Used for defining the width of a control
 android:layout_height—Used for defining the height of a control
 android:padding—Used for increasing the whitespace between the boundaries of the control and
its actual content.
 android: Layout_weight—Used for shrinking or expanding the size of the control to consume the
extra space relative to the other controls in the container
 android:gravity—Used for aligning content within a control
 android:Layout_gravity—Used for aligning the control within the container
Applying the orientation Attribute
 This attribute arranges its children in horizontal or vertical order. The valid values are horizontal
and vertical.
 The orientation can be modified at runtime through the setOrientation() method. That is, by
supplying the values horizontal or vertical to the setOrientation() method.

VISVODAYA ENGINEERING COLLEGE, KAVALI 1

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
Applying the height and width Attributes
 The default height and width of the controls are decided on the basis of the text or content
displayed through it.
The values for the height and width attributes can specify in the following three ways:
 By supplying specific dimension values for the control in terms of px (pixels), dip/ dp (device
independent pixels), sp (scaled pixels), pts (points), in (inches), and mm (millimeters). For
example, the android:layout_width="20px" attribute sets the width of the control to 20 pixels.
 By providing the value as wrap_content. When assigned to the controls height or width, this
attribute resizes the control to fit its container.
 By providing the value as match_parent. When assigned to the controls height or width, this
attribute resizes the control to fill its parent.
Applying the padding Attribute
 The padding attribute is used to increase the whitespace between the boundaries of the control and
its actual content. The android:paddingLeft, android:paddingRight, android:paddingTop, and
android:paddingBottom attributes are used to specify the spaces individually.
 android:padding=“5dip”, it sets the spacing on all four sides of the container.
 android:paddingLeft="5dip", it sets the spacing on left side of the container.
 To set the padding at runtime, we can call the setPadding() method.

Create a new android project called LinearlayoutApp. The default content of layout file
activity_linear_layout_app.xml is
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/hello_world"
tools:context=".LinearLayoutAppActivity"/>
</LinearLayout>
Let's apply the LinearLayout and add three Button controls to the layout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/Apple"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Apple" />

VISVODAYA ENGINEERING COLLEGE, KAVALI 2

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
<Button
android:id="@+id/Mango"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Mango" />
<Button
android:id="@+id/Banana"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Banana" />
</LinearLayout>
The orientation of LinearLayout is set to vertical, so that we can arrange the controls one below the
other. We see the output as

Fig: Three Button controls arranged vertically in LinearLayout

To see the controls horizontally, set the orientation to horizontal. The layout_width of three
controls is set to wrap_content, otherwise we will be able to see only the first control. Modify the content
of layout file activity_linear_layout_app.xml to
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="@+id/Apple"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Apple" />
<Button
android:id="@+id/Mango"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mango" />
<Button
android:id="@+id/Banana"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Banana" />
</LinearLayout>

VISVODAYA ENGINEERING COLLEGE, KAVALI 3

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)

The controls are arranged horizontally as,

Fig: Three Button controls arranged horizontally in LinearLayout

Applying the weight Attribute

 The weight attribute affects the size of the control. That is, we use weight to assign the capability
expand or shrink and consume extra space relative to the other controls in the container.
 The values of the weight attribute range from 0.0 to 1.0, where 1.0 is the highest value.
The activity_linear_layout_app.xml File on Applying the weight Attribute to the Button Controls

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/Apple"
android:text="Apple"
android:layout_width="wrap_content"
android:layout_height="wrap_content“
android:layout_weight=“0.0" />
<Button
android:id="@+id/Mango"
android:text="Mango
android:layout_width="wrap_content"
android:layout_height=wrap_content"
android:layout_weight="1.0" />
<Button
android:id="@+id/Banana"
android:text="Banana"
android:layout_width="wrap_content"
android:layout_height=wrap_content"
android:layout_weight="0.0" />
</LinearLayout>

VISVODAYA ENGINEERING COLLEGE, KAVALI 4

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
Fig: (left) The weight attribute of the Mango Button control set to 1.0, (middle) the weight attribute of the
Banana Button control set to 1.0, and (right) all three Button controls set to the same weight attribute

Similarly we set the weight of Apple, Mango, and Banana to 0.0, 1.0 and 0.5, respectively then
check the output.

Fig: The weight attribute of the Apple, Mango, and Banana Button controls set to 0.0, 1.0, and 0.5

Applying the Gravity Attribute

 The Gravity attribute is for aligning the content within a control. For example, to align the text of a
control to the center, we set the value of its android:gravity attribute to center.
 The valid options for android:gravity include left, center, right, top, bottom, center_horizontal,
center_vertical, fill_horizontal, and fill_vertical.
The task performed by few of the said options is as follows:
 center _vertical—Places the object in the vertical center of its container, without changing
its size.
 fill_vertical—Grows the vertical size of the object, if needed, so it completely fills its
container
 center_horizontal—Places the object in the horizontal center of its container, without
changing its size.
 fill_horizontal—Grows the horizontal size of the object, if needed, so it completely fills its
container.
 center—Places the object in the center of its container in both the vertical and horizontal
axis, without changing its size.
We can also combine two or more values of any attribute using the | operator.

android:gravity="center_horizontal|center_vertical”

The following figure shows the android:gravity attribute set lo left and right for the button controls
Mango and Banana.

Fig: The text in the Mango and Banana Button controls aligned to the left and right, respectively, through the
android:gravity attribute

VISVODAYA ENGINEERING COLLEGE, KAVALI 5

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)

Using the android: layout_gravity Attribute

Where android:gravity is a Setting used by the View, the android: layout_gravity is used by the
container. That is, this attribute is used to align the control within the container.
First arrange the controls appear in vertical order, modify the activity_linear_layout_app.xml as
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/Apple"
android:layout_width=" wrap_content"
android:layout_height="wrap_content"
android:text="Apple" />
<Button
android:id="@+id/Mango"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mango" />
<Button
android:id="@+id/Banana"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Banana" />
</LinearLayout>
To align the Button controls Mango and Banana to the center and to the right of the LinearLayout
container, add the following statements to the respective tags in the xml layout file:
android:layout_gravity="center“ and android:layout_gravity="right"(middle)

Fig: (left) The three Button controls vertically aligned with the width attribute set to wrap_content, (middle)
the Mango and Banana Button controls aligned to the center and right of container, and (right) the width of
the three Button controls expanded to take up all the available space.
If we now set the values of three controls to match parent ,the button controls will expand
to take up the available space of the container.(right in above fig)
Now we can apply the android gravity attribute to align the text within the controls. Add
the following three attributes to align the content to the left, center and right within the control.(left)
android:gravity="left" android:gravity="center" and android:gravity="right“

For example, assigning the android: layout_ weight=“1.0" to all three controls results in equal
division of empty space among them.(middle)

VISVODAYA ENGINEERING COLLEGE, KAVALI 6

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)

Fig: (left) The three Button controls with their text aligned to the left, center, and right, (middle) the vertical
available space of the container apportioned equally among the three Button controls, and (right) the text of
the three Button controls vertically aligned to the center

In the middle image, the text in apple and banana controls is not vertical center. So, modify
their android:gravity value as,
android:gravity="center_vertical" for the Apple control

android:gravity="center_vertical|right" for the Banana control(right)

RelativeLayout
In RelativeLayout, each child element is laid out in relation to other child elements; that is, the
location of a child element is specified in terms of the desired distance from the existing children. Create
a new android project called RelativeLayoutApp. Modify its layout file activity_relative_layout_app.xml
to appear as
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/Apple"
android:text="Apple"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dip"
android:layout_marginLeft="20dip"/>
<Button
android:id="@+id/Mango"
android:text="Mango"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="28dip"
android:layout_toRightOf="@+id/Apple"
android:layout_marginLeft="15dip"
android:layout_marginRight="10dip"
android:layout_alignParentTop="true"/>
<Button

VISVODAYA ENGINEERING COLLEGE, KAVALI 7

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
android:id="@+id/Banana"
android:text="Banana"
android:layout_width="200dip"
android:layout_height="50dip"
android:layout_marginTop="15dip"
android:layout_below="@id/Apple"
android:layout_alignParentLeft="true"/>
<Button
android:id="@+id/Grapes"
android:text="Grapes"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:minWidth="100dp"
android:layout_alignParentRight="true"
android:layout_below="@id/Banana"
android:gravity="center_horizontal"/>
<Button
android:id="@+id/Kiwi"
android:text="Kiwi"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:layout_below="@id/Banana"
android:paddingTop="15dip"
android:paddingLeft="25dip"
android:paddingRight="25dip"/>
</RelativeLayout>
The different attributes used to set the positions of the layout controls.
Layout Control Attributes
The attributes used to set the location of the control relative to a container are
 android: layout alignParentTop—The top of the control is set to align with the top of the container.
 android: iayout_alignParentBottom—The bottom of the control is set to align with the bottom of
the container.
 android: layout_alignParentLeft—The left Side of the control is Set to align with the left side of
the container.
 android:layout_alignParentRight—The right side of the control is set to align with the right side of
the container.
 android :layout_centerHorizontal—The control is placed horizontally at the center of the container.
 android:layout centervertioal—The control is placed vertically at the center of the container.
 android: layout_centerinParent—The control is placed horizontally and vertically at the center of
the container.
The attributes to control the position of a control in relation to other controls are
 android :layout_above—The control is placed above the referenced control.
 android :layout_beiow—The control is placed below the referenced control.
 android: layout_toLeftof—The control is placed to the left of the referenced control.
 android :layout_toRightof—The control is placed to the right of the referenced control.

VISVODAYA ENGINEERING COLLEGE, KAVALI 8

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)

The attributes that control the alignment of a control in relation to other controls are
 android: layout_alignTop— The top of the control is set to align with the top of the referenced
control.
 android: layout_alignBottom—The bottom of the control is set to align with the bottom of the
referenced control.
 android: layout_alignLeft—The left side of the control is set to align with the left side of the
referenced control.
 android:layout_alignRight—The right side of the control is set to align with the right side of the
referenced control.
 android: layout_alignBaseline—The baseline of the two controls will be aligned.
For spacing, Android defines two attributes android:layout_margin and
android:padding.The android:layout_margin attribute defines spacing for the container, while
android:padding defines the spacing for the view. Let's begin with padding.
 android:padding—Defines the spacing of the content on all four sides of the control.
To define padding for each side individually, use
 android:paddingTop—Defines the spacing between the content and the top of the control.
 android:paddingBottom—Defines the spacing between the content and the bottom of the control.
 android:paddingLeft—Defines the spacing between the content and the left side of the control.
 android:paddingRight—Defines the spacing between the content and the right side of the control.
Here are the attributes that define the spacing between the control and the container:
 android:layout_margin—Defines the spacing of the control in relation to the controls or the
container on all four sides. To define spacing for each side individually, we use the
android:layout_marginLeft, android:layout_marginRight, android:layout_marginTop, and
android:layout_raarginBottom options.
 android:layout_marginTop—Defines the spacing between the top of the control and the related
control or container.
 android:layout_marginBottom—Defines the spacing between the bottom of the control and the
related control or container.
 android:layout_marginRight—Defines the spacing between the right side of the control and the
related control or container.
 android:layout_marginLeft—Defines the spacing between the left side of the control and the
related control or container.

We don’t need to make any changes to the RelativeLayoutAppActivity.java file. Its original
content is

VISVODAYA ENGINEERING COLLEGE, KAVALI 9

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)

package com.androidunleashed.relativelayoutapp;

import android.app.Activity;
import android.os.Bundle;
public class MainActivity extendsActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_relative_layout_app);
}
}
When the application is run, we see the output as

Fig: The five Button controls' layout relative to each other

The application we are going to create is simple login form application that asks the user to enter a
user id and password. The TextView, EditText and Button controls in the application are laid out in a
RelativeLayout container. If either the user ID or Password is left blank, the message The user ID or
password is left blank. Please Try Again is displayed. If the correct User ID and Password, in this case,
guest, are entered, then a welcome message is displayed. Otherwise, the message The User ID or
password is incorrect. Please Try Again is displayed.
Arrange four Textview controls, two EditText controls, and a Button control in RelativeLayout, as
shown in the layout file activity_login_form.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="@+id/sign_msg"
android:text="Sign In"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:typeface="serif"

VISVODAYA ENGINEERING COLLEGE, KAVALI 10

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
android:textSize="25dip"
android:textStyle="bold"
android:padding="10dip"
android:layout_centerHorizontal="true"/>
<TextView
android:id="@+id/user_msg"
android:text="User ID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:layout_below="@id/sign_msg"/>
<EditText
android:id="@+id/user_ID"
android:layout_width="250dip"
android:layout_height="wrap_content"
android:layout_below="@id/sign_msg"
android:layout_toRightOf="@+id/user_msg"
android:maxLines="1"/>
<TextView
android:id="@+id/psw_msg"
android:text="Password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/user_msg"
android:layout_margin="10dip"
android:paddingTop="10dip”/>
<EditText
android:id="@+id/psw"
android:layout_width="250dip"
android:layout_height="wrap_content"
android:maxLines="1"
android:layout_below="@id/user_ID"
android:layout_toRightOf="@id/psw_msg"
android:inputType="textPassword” />
<Button
android:id="@+id/login_button"
android:text="Sign In"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip"
android:layout_below="@+id/psw_msg"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/resp"
android:layout_below="@id/login_button"/>
</RelativeLayout>
To authenticate the user, we need to access the User ID and Password that is entered and match
these values against the valid user ID and Password. In addition, we want to validate the EditText
controls to confirm that none of them is blank. We also want to welcome the user if he or she is
authorized. To do all this, we write the code in the activity file LoginFormActivity.java as
Package com.androidunleashed.loginform;

VISVODAYA ENGINEERING COLLEGE, KAVALI 11

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
import android.view.View.OnClickListener;
import android.widget.EditText;
import android.widget.TextView;
import android.view.View;
import android.widget.Button;
public class LoginFormActivity extends Activity implements OnClickListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button b=(Button)this.findViewById(R.id.login_button);
b.setOnClickListener(this);
}
public void onClick(View v)
{
EditText uid= (EditText)findViewById(R.id.user_ID);
EditText psw= (EditText)findViewById(R.id.psw);
TextView resp= (TextView)this.findViewById(R.id.resp);
String usr=uid.getText().toString();
String pswd = psw.getText().toString();
if (usr.trim().length()==0 || pswd.trim().length()==0) {
String str = "The User ID or Password is left blank \nPlease Try Again.";
resp.setText(str);
}
else
{
if(usr.equals("guest")&& pswd.equals("guest"))
resp.setText("Welcome "+usr+" ! ");
else
resp.setText("The User ID or Password is Incorrect\nPlease Try Again.");
}
}
}
The Button control is accessed from the layout file and is mapped to the Button object b. This
activity implements the OnclickListener interface. Hence, the class implements the callback method
onClick( ), which is invoked when a click event occurs on the Button control. The output is as follows

Fig: (left) The Login Form displays an error if fields are left blank, (middle) the Password Incorrect message
displays if the user ID or password is incorrect, and (right) the Welcome message displays when the correct
user ID and password are entered.

VISVODAYA ENGINEERING COLLEGE, KAVALI 12

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)

AbsoluteLayout
Each child in an AbsoluteLayout is given a specific location within the bounds of the container.
Such fixed locations make AbsoluteLayout incompatible with devices of different screen size and
resolution. The controls in AbsoluteLayout are laid out by specifying their exact X and Y positions. The
coordinate 0,0 is the origin and is located at the top-left corner of the screen.
The AbsoluteLayout class is not used often, as it is not compatible with Android phones of
different screen sizes and resolutions.
Create a new Android Project called AbsoiuteLayoutApp. Modify its layout file, activity_
absolute_layout_app.xml, as
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="90dip"
android:layout_y="2dip"
android:text="New Product Form"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Product Code"
android:layout_x="5dip"
android:layout_y="40dip"/>
<EditText
android:id="@+id/p_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="110dip"
android:layout_y="30dip"
android:minWidth="100dip" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Product Name"
android:layout_x="5dip"
android:layout_y="90dip"/>
<EditText
android:id="@+id/p_name"
android:layout_width="200dip"
android:layout_height="wrap_content"
android:layout_x="110dip"
android:layout_y="80dip"
android:minWidth="200dip"
android:scrollHorizontally="true” />

VISVODAYA ENGINEERING COLLEGE, KAVALI 13

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Product Price"
android:layout_x="5dip"
android:layout_y="140dip” />
<EditText
android:id="@+id/p_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="110dip"
android:layout_y="130dip"
android:minWidth="100dip" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/click_btn"
android:text="Add New Product"
android:layout_x="80dip"
android:layout_y="190dip"/>
</AbsoluteLayout>
After specifying the locations of controls in the layout file activity_absoiute_iayout_ app.xml, we
can run the application. There is no need to make any changes in the file AbsoluteLayoutAppActivity.
java. When the application is run, we get the as

Fig: Different controls laid out in AbsoluteLayout

The AbsoluteLayout class is not used often, as it is not compatible with Android phones of
different screen sizes and resolutions.

VISVODAYA ENGINEERING COLLEGE, KAVALI 14

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)

Using ImageView
An imageview control is used to display images in Android applications. An image can be
displayed by assigning it to the imageview control and including the android: src attribute in the XML
definition of the control. Images can also be dynamically assigned to the ImageView control through
Java code.
A sample ImageView tag when used in the layout file is shown here:
<lmageView
android:id=“@+id/first_image"
android:src = "@drawable/bintupic"
android:layout_width="wrap_content"
android: layout_height= "wrap_content11
android: scaleType="fitXY"
android: adjustViewBounds=11 true"
android: maxHeight=“100dip"
android:maxWidth=“25Odip"
android:minHeight="100dip"
android: minWidth=“25Odip"
android:resizeMode="horizontal|vertical" />

 android:src—Used to assign the image from drawable resources. You do not need to specify the
image file extension. JPG and GIF files are supported, but the preferred image format is PNG.
 android:scaleType—Used to scale an image to fit its container. The valid values for this attribute
include fitXY, center, centerlnside, and fitCenter. The value fitXY independently scales the image
around the X and Y axes without maintaining the aspect ratio to match the size of container.
 Android:adjustViewBounds—If set to true, the attribute adjusts the bounds of the imageview
control to maintain the aspect ratio of the image displayed through it.
 android:resizeMode—The resizeMode attribute is used to make a control resizable so we can
resize it horizontally, vertically, or around both axes. The available values for the resizeMode
attribute include horizontal, vertical, and none.

FrameLayout
FrameLayout is used to display a single view. The view added to a FrameLayout is placed at the
top-left edge of the layout. Any other view added to the FrameLayout overlaps the previous view; that is,
each view stacks on top of the previous one.
To display images in Android applications, the image is first copied into the res/drawable folder
and from there, it is referred to in the layout and other XML files.
There are four types of drawable folders. We have to place images of different resolutions and
sizes in these folders. The graphics with the resolutions 320dpi, 240dpi, 160 dpi, and 120dpi (96 X 96
px, 72 x 72 px, 48 X 48 px, and 36 X 36 px), are stored in the res/drawable-xhdpi, res/drawable-hdpi,

VISVODAYA ENGINEERING COLLEGE, KAVALI 15

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
res/drawable-mdpi, and res/ drawable-ldpi folders, respectively. The application picks up the appropriate
graphic from the correct folder.
Create a new android project called FrameLayoutApp. To display two ImageViews and a
TextView in the application, let's write the code in the layout file activity_frame_layout_app.xml as
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
android:id="@+id/first_image"
android:src="@drawable/ex_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"/>
<ImageView
android:id="@+id/second_image"
android:src="@drawable/ex_2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click the image to switch"
android:layout_gravity="center_horizontal|bottom"
android:padding="5dip"
android:textColor="#ffffff"
android:textStyle="bold"
android:background="#333333"
android:layout_marginBottom="10dip" />
</FrameLayout>
When a user selects the current image on the screen, the image should switch to show the hidden
image. For this to occur, we need to write code in the activity file as
Package com.androidunleashed.framelayoutapp;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
import android.view.View.OnClickListener;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

final ImageView f_i=(ImageView)this.findViewById(R.id.first_image);

final ImageView s_i=(ImageView)this.findViewById(R.id.second_image);
f_i.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {

VISVODAYA ENGINEERING COLLEGE, KAVALI 16

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
s_i.setVisibility(View.VISIBLE);
v.setVisibility(v.GONE);
}
});
s_i.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
f_i.setVisibility(View.VISIBLE);
v.setVisibility(v.GONE);
}
});
}
}
The application shows an image, and the other image is hidden behind it because in FrameLayout
one View overlaps the other. When the user clicks the image, the images are switched, as shown in the
following figure

Fig: (left) An image and a Textview laid out in FrameLayout, and (right) the images switch when clicked

TableLayout
The TableLayout is used for arranging the enclosed controls into rows and columns. Each new row
in the TableLayout is defined through a TabieRow object. A row can have zero or more controls, where
each control is called a ceil. The number of columns in a TableLayout is determined by the maximum
number of cells in any row. The width of a column is equal to the widest cell in that column.
Operations Applicable to TableLayout
We can perform several operations on TableLayout columns, including stretching, shrinking,
collapsing, and spanning columns.
 Stretching Columns: The default width of a column is set equal to the width of the widest column,
but we can stretch the column(s) to take up available free space using the android: stretchcolumns

Examples:
1. android: stretchcolumns=“1"—The second column (because the column numbers are zero-
based) is stretched to take up any available space in the row.

VISVODAYA ENGINEERING COLLEGE, KAVALI 17

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
2. android:stretchcolumns= “0,1"—Both the first and second columns are stretched to take up
the available space in the row.
3. android:stretchcolumns="*"—All columns are stretched to take up the available space.
 Shrinking Columns:We can shrink or reduce the width of the column(s) using the android:
shrinkcoiumns attribute in the TableLayout.
Examples:
1. android:shrinkcoiumns="0"—The first column's width shrinks or reduces by word-
wrapping its content.
2. android:shrinkcoiumns=“*"—The content of all columns is word-wrapped to shrink their
widths.
 Collapsing Columns: We can make the column(s) collapse or become invisible through the
android: collapseColumns attribute in the TableLayout. For example
1. android:collapseColumns="0"—The first column appears collapsed; that is, it is part of the
table but is invisible. It can be made visible through coding by using the
setColumnCollapsed( ) method.
 Spanning Columns: We can make a column span or take up the space of one or more columns by
using the android: layout_span attribute. The value assigned to this attribute must be >=1. For
example, the following value makes the control take or span up to two columns:
android:layout_span="2"

Let's try arranging controls in a TableLayout with an example. Create a new Android project called
TableLayoutApp. Make its layout file activity_table_layout_app.xml appear as
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width= "match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">

<TableRow android:padding= "5dip">

<TextView
android:layout_height= "wrap_content"
android:text="New Product Form"
android:typeface="serif"
android:layout_span="2"
android:gravity= "center_horizontal"
android:textSize="20dip" />
</TableRow>

<TableRow>
<TextView
android:layout_height="wrap_content"
android:text="Product Code:"
android:layout_column="0"/>
<EditText android:id= "@+id/prod_code"
android:layout_height="wrap_content"

VISVODAYA ENGINEERING COLLEGE, KAVALI 18

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
android:layout_column="1"/>
</TableRow>

<TableRow>
<TextView android:layout_height= "wrap_content"
android:text="Product Name:"
android:layout_column="0"/>
<EditText android:id="@+id/prod_name"
android:layout_height = "wrap_content"
android:scrollHorizontally= "true" />
</TableRow>

<TableRow>
<TextView android:layout_height="wrap_content"
android:text="Product Price:" />
<EditText android:id="@+id/prod_price"
android:layout_height="wrap_content" />
</TableRow>

<TableRow>
<Button android:id="@+id/add_button"
android:text="Add Product"
android:layout_height="wrap_content" />
<Button android:id="@+id/cancel_button"
android:text= "Cancel"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
We cannot specify the layout width attribute for the controls enclosed within the TableLayout, as
their width will be always set to match_parent by default. We can specify the layout height attribute for
the enclosed controls. The layout_height attribute of the TableRow is always wrap_content.
If we don't specify a column number for any cell, it is considered to be the next available column.
When the application is run, the controls are laid out in rows and columns, as

VISVODAYA ENGINEERING COLLEGE, KAVALI 19

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)

Fig: Different controls arranged in TableLayout

GridLayout
GridLayout lays out views in a two-dimensional grid pattern, that is, in a series of rows and
columns. The intersection of row and column is known as a grid cell, and it is the place where child
views are placed. It is easier to use GridLayout when compared to TableLayout. Without specifying
intermediate views, we can flexibly place the views randomly in the grid by specifying their row and
column positions. More than one view can be placed in a grid cell.
Specifying Row and Column Position:
The two attributes that are used to specify the row and column position of the grid cell for inserting
views are android: layout_row and android: layout_column. Together, they specify the exact location of
the grid cell for placing the view. For example, the following statements place the view at the first row
and column position of the grid:
android: layout_row=”0” android: layout_column=”0“
Spanning Rows and Columns:
Views can span rows or columns if desired. The attributes are android: layout_rowSpan and
android: layout_columnSpan. For example, statement spans the view to two rows:
android:1ayout_rowSpan=”2”
Similarly, the following statement spans the view to three columns:
android: layout_columnSpan=”3”
Inserting Spaces in the GridLayout:
To insert spaces, the Space view is inserted as a child view. For example, the following statement
insert a space at the second row in the GridLayout.

VISVODAYA ENGINEERING COLLEGE, KAVALI 20

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
<Space
android: layout_row=“1"
android: 1ayout_column="0"
android: layout_width="50dp"
android: layout_height="10dp" />
Similarly, the following statements insert a space at the third row in the GridLayout that spans
three columns:
<Space
android: layout_row=“3”
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_gravity="fill" />

let's create a new Android project called GridLayoutLayoutApp. The application has controls
arranged in the same way as we saw in TableLayout. Make its layout file, activity_grid_layout_app.xml,
appear as
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width= "match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:rowCount="7"
android:columnCount="2" >
<TextView
android:layout_row="0"
android:layout_column="0"
android:text="New Product Form"
android:typeface="serif"
android:layout_columnSpan="2"
android:layout_gravity="center_horizontal"
android:textSize="20dip" />
<Space
android:layout_row="1"
android:layout_column="0"
android:layout_width="50dp"
android:layout_height="10dp" />
<TextView
android:layout_row="2"
android:layout_column="0"
android:text="Product Code:" />
<EditText
android:id="@+id/prod_code"
android:layout_width="100dip" />
<TextView
android:text="Product Name:" />
<EditText
android:layout_row="3"
android:layout_column= "1"
android:id="@+id/prod_name"
android:layout_width="200dip" />
<TextView
android:layout_row="4"
android:layout_column="0"

VISVODAYA ENGINEERING COLLEGE, KAVALI 21

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
android:text="Product Price:" />
<EditText
android:1ayout_row="4"
android:layout_column="1"
android:id="@+id/prod_price"
android:layout_width="100dip" />
<Space
android:layout_row="5"
android:layout_column="0"
android:layout_width="50dp"
android:layout_height = "20dp" />
<Button
android:layout_row="6"
android:layout_column="0"
android:id="@+id/add_button"
android:text="Add Product" />
<Button
android:id="@+id/cancel_button"
android:text="Cancel" />
</GridLayout>

In the preceding code, the GridLayout is defined as consisting of seven rows and two columns.
When the application is run, the controls are laid out in the grid pattern as

Fig: Controls organized in the GridLayout

Adapting to Screen Orientation

As with almost all smartphones, Android supports two screen orientations: portrait and landscape.
When the screen orientation of an Android device is changed, the current activity being displayed is
destroyed and re-created automatically to redraw its content in the new orientation.
Portrait mode is longer in height and smaller in width, whereas landscape mode is wider but
smaller in height. Being wider, landscape mode has more empty space on the right side of the screen. At

VISVODAYA ENGINEERING COLLEGE, KAVALI 22

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
the same time, some of the controls don't appear because of the smaller height. Thus, controls need to be
laid out differently in the two screen orientations because of the difference in the height and width of the
two orientations.
There are two ways to handle changes in screen orientation:
 Anchoring controls—Set the controls to appear at the places relative to the four edges of the
screen. When the screen orientation changes, the controls do not disappear but are rearranged.
 Defining layout for each mode—A new layout file is defined for each of the two screen
orientations. One has the controls arranged to suit the Portrait mode, and the other has the
controls arranged to suit the Landscape mode.
Anchoring controls:
For anchoring controls relative to the four edges of the screen, we use a RelativeLayout container.
Let's examine this method by creating an Android project called screenOrientationApp. Write the code
in the layout file activity_screen_orientation_app.xml as

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/Apple"
android:text="Apple"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dip"
android:layout_marginLeft="20dip"/>
<Button
android:id="@+id/Mango"
android:text="Mango"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="28dip"
android:layout_toRightOf="@+id/Apple"
android:layout_marginLeft="15dip"
android:layout_marginRight="10dip"
android:layout_alignParentTop="true"/>
<Button
android:id="@+id/Banana"
android:text="Banana"
android:layout_width="200dip"
android:layout_height="50dip"
android:layout_marginTop="15dip"
android:layout_below="@id/Apple"
android:layout_alignParentLeft="true"/>
<Button
android:id="@+id/Grapes"
android:text="Grapes"
android:layout_width="wrap_content"
android:layout_height="match_parent"

VISVODAYA ENGINEERING COLLEGE, KAVALI 23

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
android:minWidth="100dp"
android:layout_alignParentRight="true"
android:layout_below="@id/Banana"/>
<Button
android:id="@+id/Kiwi"
android:text="Kiwi"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:layout_below="@id/Banana"
android:paddingTop="15dip"
android:paddingLeft="25dip"
android:paddingRight="25dip"/>
</RelativeLayout>
Five Button controls arranged in a RelativeLayout container. The controls are aligned relative to
the edges of the container .Let's keep the activity file screenOrientationAppActivity.java unchanged with
the default code, as
package com.androidunleashed.screenorientationapp;

import android.app.Activity;
import android.os.Bundle;
public class ScreenOrientationAppActivity extends Activity {
@Override
public void onCreate(Bundle savedlnstanceState) {
super.onCreate (savedlnstanceState);
setContentView(R.layout.activity_screen_orientation_app);
}
}
When the application is run while in the default portrait mode, the controls appear as shown in Fig
(left). Because the five Button controls are placed in relation to the four edges of the container and in
relation to each other, none of the Button controls disappear if the screen is rotated to landscape mode, as
shown in Fig (right).

Fig: (left) Controls in portrait mode, and (right) the controls in landscape mode.
Defining Layout for Each Mode

VISVODAYA ENGINEERING COLLEGE, KAVALI 24

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
In this method, we define two layouts. One arranges the controls in the default portrait mode, and
the other arranges the controls in landscape mode. To understand this, let's write code for laying out the
controls for portrait mode in the default layout file activity_screen_orientation_app.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/Apple"
android:text="Apple"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:padding="20dip"
android:layout_marginTop="20dip"/>
<Button
android:id="@+id/Mango"
android:text="Mango"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:padding="20dp"
android:layout_marginTop="20dip"/>
<Button
android:id="@+id/Banana"
android:text="Banana"
android:layout_width="300dip"
android:layout_height="wrap_content"
android:padding="20dp"
android:layout_marginTop="20dip"/>
<Button
android:id="@+id/Grapes"
android:text="Grapes"
android:layout_width="300dip"
android:layout_height="wrap_content"
android:padding="20dp"
android:layout_marginTop="20dip"/>
<Button
android:id="@+id/Kiwi"
android:text="Kiwi"
android:layout_width="300dip"
android:layout_height="wrap_content"
android:padding="20dp"
android:layout_marginTop="20dip"/>
</LinearLayout>
we can see that five Button controls are vertically arranged in a LinearLayout container, one below
the other. This vertical arrangement makes a few of the Button controls disappear when the screen is in
landscape mode.

VISVODAYA ENGINEERING COLLEGE, KAVALI 25

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)

Fig: (left) Controls in portrait mode, and (right) some controls disappear in landscape mode.
To use the blank space on the right side of the screen in landscape mode, we need to define another
layout file, activity_screen_orientation_app.xml, created in the res/ layout-land folder. The layout-land
folder has to be created manually inside the res folder. Right-click on the res folder in the Package
Explorer window and select the New, Folder option. A dialog box opens, asking for the name for the
new folder. Assign the name layout-land to the new folder, and click the Finish button.
Copy the activity_screen_orientation_app .xml file from the res/layout folder and paste it into
res/layout-land folder. Modify the activity_screen_orientation_app.xml file in the res/layout-land folder
so as to arrange the controls in landscape mode.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height= "match_parent" >

<Button
android:id="@+id/Apple"
android:text="Apple"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:padding="20dip"
android:layout_marginTop="20dip" />
<Button
android:id="@+id/Mango"
android:text="Mango"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:padding="20dip"
android:layout_marginTop="20dip"
android:layout_toRightOf="@id/Apple" />
<Button
android:id="@+id/Banana"
android:text="Banana"

VISVODAYA ENGINEERING COLLEGE, KAVALI 26

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)
android:layout_width="250dip"
android:layout_height="wrap_content"
android:padding="20dip"
android:layout_marginTop="20dip"
android:layout_below="@id/Apple" />
<Button
android:id="@+id/Grapes"
android:text="Grapes"
android:layout_width="250dip"
android:layout_height ="wrap_content"
android:padding="20dip"
android:layout_marginTop="20dip"
android:layout_below="@id/Apple"
android:layout_toRightOf="@id/Banana" />
<Button
android:id="@+id/Kiwi"
android:text="Kiwi"
android:layout_width="250dip"
android:layout_height="wrap_content"
android:padding="20dip"
android:layout_marginTop="20dip"
android:layout_below="@id/Banana" />
</RelativeLayout>
In this code block, we can see that, to fill up the blank space on the right side of the screen, the
Mango and Grapes button controls are set to appear to the right of the Apple and Banana button controls.
We can also detect the screen orientation via Java code. Let's modify the activity file
ScreenOrientationAppActivity.java to display a toast message when the screen switches between
landscape mode and portrait mode.
package com.androidunleashed.screenorientationapp;

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

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout. activity_screen_orientation_app);
if(getResources().getDisplayMetrics().widthPixels>getResources().getDisplayMetrics().
heightPixels)
{
Toast.makeText(this,”screen switched to landscape mode”,Toast.LENGTH_SHORT).
Show();
}
else {
Toast.makeText(this,”screen switched to portrait mode”,Toast.LENGTH_SHORT).
Show();
}
}
}

VISVODAYA ENGINEERING COLLEGE, KAVALI 27

 III.BTECH II-SEM, CSE: MOBILE APPLICATION DEVELOPMENT (21A050422)

Fig: (left) Controls in portrait mode, and (right) all controls are visible in landscape mode.

VISVODAYA ENGINEERING COLLEGE, KAVALI 28