Mobile Application Development

ANDROID USER INTERFACES

Lecture # 5

Prof, M Sohaib Saleem

1
 CONTENT
S
• Introduction to Layouts, Linear Layout, Relative
Layout, Absolute Layout, Using Image View,
Frame Layout, Table Layout, Grid Layout,
Adapting to Screen orientation.
• Utilizing Resources and Media Resources,
Creating Values Resources, Using Drawable
Resources, Switching States with Toggle Buttons,
Creating an Images Switcher Application,
Scrolling Through Scroll View, playing Audio,
Playing Video, Displaying Progress with Progress
Bar, Using Assets.
 INTRODUCTION TO LAYOUTS
• A container is a view used to contain other views.
• Android offers a collection of view classes that act as
containers for views.
• These container classes are called layouts, and as
the name suggests, they decide the
organization, size, and position of their children
views.
• 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.
The containers or layouts listed in Table 3.1 are also known as ViewGroups as one or
more Views are grouped and arranged in a desired manner through them. Besides
the ViewGroups shown here Android supports one more ViewGroup known as ScrollView.
 LINEARLAYOUT
• The LinearLayout is the most basic layout, and it
arranges its elements sequentially, either
horizontally or vertically.
• android:layout_width="fill_parent"
– The component want to display as big as its parent, and fill
in the remaining spaces.
– Ex: if parent tag has 120dp set into
width & height then it will cover your
whole pattern area.
– Parents are called as main above
first defining layout tag.
• android:layout_width="match_par
ent"
– fill_parent & match_parent are the
same
– fill_parent is depricated in later
Android versions.
• android:layout_width="wrap_content
"
– The component just want to display big enough to enclose
 LINEARLAYOUT
• 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
 LINEARLAYOUT
• 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. The values of the weight attribute
range from 0.0 to 1.0, where 1.0 is the highest
value.
• android:gravity—Used for aligning content within
a control
• android:layout_gravity—Used for aligning the
control within the container
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="
[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView android:id="@+id/text"
android:layout_width="wrap_conte
nt"
android:layout_height="wrap_cont
ent" android:text="This is a
TextView" />

<Button android:id="@+id/button"
android:layout_width="wrap_conte
nt"
android:layout_height="wrap_cont
ent" android:text="This is a
Button" />
• The orientation can be modified at runtime
through the setOrientation() method.
• That is, by supplying the
values HORIZONTAL or VERTICAL to
the setOrientation() method, we can arrange
the children of the LinearLayout in row or
column format, respectively.

android:orientation="horizontal"
<LinearLayout xmlns:android="
[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="@+id/Apple"
android:text="Apple"
android:layout_width="match_pare
nt"
android:layout_height="wrap_cont
ent" />
<Button
android:id="@+id/Mango"
android:text="Mango"
android:layout_width="match_pare
nt"
android:layout_height="wrap_cont
ent" />
<Button
android:id="@+id/Banana"
android:text="Banana"
android:layout_width="match_pare
nt"
<LinearLayout xmlns:android="
[Link]
android:orientation="horizontal"
android:layout_width="match_par
ent"
android:layout_height="match_par
ent">
<Button
android:id="@+id/Apple"
android:text="Apple"
android:layout_width="wrap_cont
ent"
android:layout_height="wrap_co
ntent"
android:layout_weight="0.0" />
<Button
android:id="@+id/Mango"
android:text="Mango"
android:layout_width="wrap_cont
ent"
android:layout_height="wrap_con
tent"
android:layout_weight="1.0" />
<Button
 Figure 3.3. (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

Figure 3.4. The weight attribute of the Apple, Mango, and Banana Buttoncontrols set to 0.0, 1.0, and
0.5
 Gravity Attribute
• The Gravity attribute is for aligning the content within a control.
• The valid options for android:gravity include
– left, center, right, top, bottom, center_horizontal, center_vertical,
fill_
horizontal, and fill_vertical.
• 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
android:gravity="center“
android:gravity="center_horizontal|
Figure 3.6. (left) The three Button controls vertically aligned with the widthattribute 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
Figure 3.7. (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
Exampl
e
 RELATIVE LAYOUT
• 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.
 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:layout_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_centerVertical—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.
 Layout Control Attributes
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_below—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.
 Layout Control Attributes
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.
 Layout Control Attributes
• 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.
• android:padding—Defines the spacing of the content on all
four sides of the control.
1. android:paddingTop—Defines the spacing between the
content and the top of the control.
2. android:paddingBottom—Defines the spacing between
the content and the bottom of the control.
3. android:paddingLeft—Defines the spacing between the
content and the left side of the control.
4. android:paddingRight—Defines the spacing between the
content and the right side of the control.
 Layout Control Attributes
• 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.
1. android:layout_marginTop—Defines the spacing between
the top of the control and the related control or
container.
2. android:layout_marginBottom—Defines the spacing
between the bottom of the control and the related control
or container.
3. android:layout_marginRight—Defines the spacing
between the right side of the control and the related
control or container.
4. android:layout_marginLeft—Defines the spacing between
the left side of the control and the related control or
<RelativeLayout xmlns:android="
[Link]
android:orientation="vertical"
android:layout_width="match_par
ent"
android:layout_height="match_par
ent">
<Button
android:id="@+id/Apple"
android:text="Apple"
android:layout_width="wrap_con
tent"
android:layout_height="wrap_co
ntent"
android:layout_marginTop="15di
p"
android:layout_marginLeft="20di
p" />
<Button
android:id="@+id/Mango"
android:text="Mango"
android:layout_width="match_pare
nt"
android:layout_height="wrap_cont
ent" android:padding="28dip"
android:layout_toRightOf="@id/Ap
ple"
android:layout_marginLeft="15dip"

android:layout_marginRight="10di
p"
<Button
android:id="@+id/Grapes"
android:text="Grapes"
android:layout_width="wrap_cont
ent"
android:layout_height="match_pa
rent" android:minWidth="100dp"
android:layout_alignParentRight="
true"
android:layout_below="@id/Banan
a" />
<Button
android:id="@+id/Kiwi"
android:text="Kiwi"
android:layout_width="100dip"
android:layout_height="wrap_co
ntent"
android:layout_below="@id/Bana
na" android:paddingTop="15dip"
android:paddingLeft="25dip"
android:paddingRight="25dip" /
>
We can make the text Grapes appear centrally at the top row by adding the
followingandroid:gravity="center_horiz
line:
ontal"
So, its tag appears as follows:

<Button
android:id="@+id/Gra
pes"
android:text="Grapes"
android:layout_width="wrap_content"
android:layout_height="match_parent
" android:minWidth="100dp"
android:layout_alignParentRight="tru
e"
android:layout_below="@id/Banana"
android:gravity="center_horizont
al" />
 ABSOLUTE LAYOUT
• 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.
<AbsoluteLayout xmlns:android="ht
tp://[Link]/apk
/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content
" android:text="New Product Form"
android:textSize="20sp"
[Link]="bold"
android:layout_x="90dip"
android:layout_y="2dip"/>
<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/product_code" <TextView
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content android:layout_height="wrap_content
" android:minWidth="100dip" " android:text="Product Price:"
android:layout_x="110dip" android:layout_x="5dip"
android:layout_y="30dip" /> android:layout_y="140dip" />
<TextView <EditText
android:layout_width="wrap_content" android:id="@+id/product_price"
android:layout_height="wrap_content android:layout_width="wrap_content"
" android:text="Product Name:" android:layout_height="wrap_content
android:layout_x="5dip" " android:minWidth="100dip"
android:layout_y="90dip"/> android:layout_x="110dip"
<EditText android:layout_y="130dip" />
android:id="@+id/product_name" <Button
android:layout_width="200dip" android:layout_width="wrap_content"
android:layout_height="wrap_content android:layout_height="wrap_content
" android:minWidth="200dip" " android:id="@+id/click_btn"
android:layout_x="110dip" android:text="Add New Product"
android:layout_y="80dip" android:layout_x="80dip"
android:scrollHorizontally="true" /> android:layout_y="190dip" />
</AbsoluteLayout>
Android Programming (R15)
UNIT - 3

1
 CONTENT
S
• Introduction to Layouts, Linear Layout, Relative
Layout, Absolute Layout, Using Image View,
Frame Layout, Table Layout, Grid Layout,
Adapting to Screen orientation.
• Utilizing Resources and Media Resources,
Creating Values Resources, Using Drawable
Resources, Switching States with Toggle Buttons,
Creating an Images Switcher Application,
Scrolling Through Scroll View, playing Audio,
Playing Video, Displaying Progress with Progress
Bar, Using Assets.
 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.
<ImageView
android:id="@+id/first_image"
android:src =
"@drawable/bintupic"
android:layout_width="wrap_conte
nt"
android:layout_height="wrap_cont
ent" android:scaleType="fitXY"
android:adjustViewBounds="true"
android:maxHeight="100dip"
android:maxWidth="250dip"
android:minHeight="100dip"
android:minWidth="250dip"
android:resizeMode="horizontal|
vertical"
/>
 IMAGEVIEW ATTRIBUTES
• android:src—Used to assign the image from drawable
resources. 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, centerInside, and fitCenter.
• 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 (value none prevents resizing).
 FRAMELAYOU
• FrameLayout is used to display a single View.
• The View added toTa 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: drawable-
xhdpi, drawable-hdpi, /res/drawable-mdpi, and /res/drawable-
ldpi.
• The graphics with the resolutions 320 dpi, 240dpi, 160 dpi,
and 120dpi (96 × 96 px, 72 × 72 px, 48 × 48 px, and 36 × 36 px),
are stored in the res/drawable-xhdpi, res/drawable-
hdpi, res/drawable-mdpi, and res/drawable-ldpi folders,
respectively.
<FrameLayout xmlns:android="
[Link]
android:orientation="vertical"
android:layout_width="match_par
ent"
android:layout_height="match_par
ent">
<ImageView
android:id="@+id/first_image"
android:src =
"@drawable/bintupic"
android:layout_width="match_pa
rent"
android:layout_height="match_p
arent" android:scaleType="fitXY"
/>
<ImageView
android:id="@+id/second_image
" android:src =
"@drawable/bintupic2"
android:layout_width="match_pa
rent"
android:layout_height="match_p
arent" android:scaleType="fitXY"
/>
<TextView
android:layout_width="wrap_conte
nt"
android:layout_height="wrap_cont
ent" android:text="Click the
image to switch"
public void onCreate(Bundle savedInstanceState)
{ [Link](savedInstanceState);
setContentView([Link].activity_frame_layout_app);
final ImageView first_image =
(ImageView)[Link]([Link].first_image);
final ImageView second_image =
(ImageView)[Link]([Link].second_image);
first_image.setOnClickListener(new OnClickListener(){
public void onClick(View view)
{ second_image.setVisibility([Link]
E); [Link]([Link]);
}
});
second_image.setOnClickListener(new
OnClickListener(){
public void onClick(View view)
{ first_image.setVisibility([Link]
); [Link]([Link]);
}
});
}
• [Link] – to visualize
• [Link] – view is invisible, but it still takes up
space for layout purpose.
• [Link] - view is invisible, and it doesn’t take any
space for layout purpose.

Example
 TABLE LAYOUT
• The TableLayout is used for arranging the enclosed controls
into rows and columns.
• Each new row in the TableLayout is defined through
a TableRow object.
• A row can have zero or more controls, where each control is
called a cell.
• 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.
• All elements are aligned in a column; that is, the width of
all the controls increases if the width of any control in the
column is increased.
• We can nest another TableLayout within a table cell, as well.
• TableLayout does not display border lines for rows, columns,
or cells.
 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 attribute in the TableLayout.
– The value assigned to this attribute can be a single column
number or a comma-delimited list of column numbers.
– The specified columns are stretched to take up any
available space on the row.
• android:stretchColumns="1"—The second column
(because the column numbers are zero-based) is
stretched to take up any available space in the row.
• • android:stretchColumns="0,1"—Both the first and
second columns are stretched to take up the available
space in the row.
• • 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:shrinkColumns attribute in the
TableLayout.
– We can specify either a single column or a comma-
delimited list of column numbers for this attribute.
– The content in the specified columns word-wraps to
reduce their width.
– By default, the controls are not word-wrapped.
• android:shrinkColumns="0"—The first column’s
width shrinks or reduces by word-wrapping its
content.
• android:shrinkColumns="*"—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.
– We can specify one or more comma-delimited columns for
this attribute.
– These columns are part of the table information but are
invisible.
• We can also make column(s) visible and invisible
through java coding by passing the Boolean values
false and true, respectively, to the
setColumnCollapsed() method in the TableLayout.
• 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.
• The control take or span up to two columns
android:layout_span="2”
<TableLayout xmlns:android="ht <TableRow>
tp://[Link]/apk/re s/android" <TextView
android:orientation="vertical" android:layout_height="wrap_content"
android:layout_width="match_parent" android:text="Product Name:"
android:layout_height="match_parent" android:layout_column="0"/>
<EditText
android:stretchColumns="1"> android:id="@+id/prod_name"
<TableRow android:padding="5dip"> android:layout_height="wrap_content"
<TextView android:scrollHorizontally="true" />
android:layout_height="wrap_content" </TableRow>
android:text="New Product Form" <TableRow>
android:typeface="serif" <TextView
android:layout_span="2" android:layout_height="wrap_content"
android:text="Product Price:" />
android:gravity="center_horizontal"
<EditText
android:textSize="20dip" /> android:id="@+id/prod_price"
</TableRow> android:layout_height="wrap_co
<TableRow> ntent" />
<TextView </TableRow>
android:layout_height="wrap_content" <TableRow>
android:text="Product Code:" <Button
android:id="@+id/add_button"
android:layout_column="0"/>
android:text="Add Product"
<EditText android:layout_height="wrap_con
android:id="@+id/prod_code" tent" />
android:layout_height="wrap_content" <Button
android:layout_column="1"/> android:id="@+id/cancel_button"
</TableRow> android:text="Cancel"
android:layout_height="wrap_conte
nt" />
</TableRow>
 Exampl
e
• Implement calculator using table layout
 GRIDLAYOUT LAYOUT
• 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.
• Besides this, views can span multiple grid cells too.
• No need to specify layout_height and layout_width for the
GridLayout child views as they default to
WRAP_CONTENT.
 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.
android:layout_row="0"
android:layout_column="0
"
• When either or both of the preceding attributes
are not specified, GridLayout uses the next grid
 Spanning Rows and Columns
• Views can span rows or columns if desired.
• The attributes used for doing so are
android:layout_rowSpan and
android:layout_columnSpan.
android:layout_rowSpan="2"
• Similarly, the following statement spans the view
to three columns:
android:layout_columnSpan="3"
 Inserting Spaces in the GridLayout
• For inserting spaces, a spacing view called Space is
used.
• That is, to insert spaces, the Space view is inserted as
a child view.
• For example, the following statements insert a space
at the second row in the GridLayout. The width and
height of the blank space are 50dp and 10dp:
<Space
android:layout_row="1"
android:layout_column="
0"
android:layout_width="5
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"
/>
<GridLayout xmlns:android="ht
tp://[Link]/apk/res/an droid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="3" android:rowCount="4"
android:layout_margin="15dp"
android:background="#DEB887" >
<Button android:text="Button 1" />
<Button android:text="Button 2" />
<Button android:text="Button 3" />
<Button android:text="Button 4" />
<Button android:text="Column Span 2"
android:layout_columnSpan="2" />
<Button android:text="Button 6" />
<Button android:text="Row Span 2"
android:layout_rowSpan="2" />
<Button android:text="Button 8" />
<Button android:text="Button 9" />
<Button android:text="Button 10" />
<Button android:text="Button 11" />
<Button android:text="Button 12" />
<Button android:text="Button 13" />

</GridLayout>
<GridLayout xmlns:android="ht <EditText
tp://[Link]/apk/re s/android" android:id="@+id/prod_code"
android:layout_width="100dip" />
xmlns:tools="[Link] <TextView
android:layout_width="match_parent" android:text="Product Name:" />
android:layout_height="match_parent" <EditText
android:layout_row="3"
android:orientation="horizontal" android:layout_column="1"
android:rowCount="7" android:id="@+id/prod_name
android:columnCount="2" > "
android:layout_width="200dip"
/>
<TextView <TextView
android:layout_row="0" android:layout_row="4"
android:layout_column="0
android:layout_column="0" "
android:text="New Product Form" android:text="Product
android:typeface="serif" Price:" />
<EditText
android:layout_columnSpan="2" android:layout_row="4"
android:layout_gravity="center_horizontal" android:layout_column="1"
android:textSize="20dip" /> android:id="@+id/prod_price
"
<Space android:layout_width="100dip"
android:layout_row="1" />
android:layout_column="0" <Space
android:layout_row="5"
android:layout_width="50dp" android:layout_column="0"
android:layout_height="10dp" /> android:layout_width="50dp"
<TextView android:layout_height="20dp" />
<Button
android:layout_row="2" android:layout_row="6"
android:layout_column="0" android:layout_column="0
android:text="Product "
android:id="@+id/
Code:" /> add_button"
 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.
• In other words, the onCreate() method of the
activity is fired whenever there is a change in
screen orientation.
 ADAPTING TO SCREEN 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 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.
 ADAPTING TO SCREEN ORIENTATION
There are two ways to handle changes in screen
orientation:
1. 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 relative to the four edges.
2. 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.
• The controls are aligned relative to the edges of
the container or in relation to each other.
Figure 3.16. (left) Controls in portrait mode, and (right) the
controls
in landscape mode
<RelativeLayout xmlns:android="
[Link] id"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
<Button
android:id="@+id/Apple android:id="@+id/Grapes"
" android:text="Apple" android:text="Grapes"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dip" android:layout_height="match_parent"
android:layout_marginLeft="20dip" /> android:minWidth="100dp"
<Button android:layout_alignParentRight="true"
android:id="@+id/Mango"
android:text="Mango"
android:layout_below="@id/Banana" />
android:layout_width="match_parent" <Button
android:layout_height="wrap_content" android:id="@+id/Kiwi"
android:padding="28dip" android:text="Kiwi"
android:layout_toRightOf="@id/Apple"
android:layout_marginLeft="15dip" android:layout_width="100dip"
android:layout_marginRight="10dip" android:layout_height="wrap_content
android:layout_alignParentTop="true" /> " android:layout_below="@id/Banana"
<Button
android:id="@+id/Banana"
android:paddingTop="15dip"
android:text="Banana" android:paddingLeft="25dip"
android:layout_width="200dip" android:paddingRight="25dip" />
android:layout_height="50dip" </RelativeLayout>
android:layout_marginTop="15dip"
android:layout_below="@id/Apple"
android:layout_alignParentLeft="true" />
public class ScreenOrientationAppActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState)
{ [Link](savedInstanceState);
setContentView([Link].activity_screen_orientation_app);
}
}

To switch between portrait mode and landscape mode on

the device emulator, press the Ctrl+F11 keys.
 Defining Layout for Each Mode
• 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.
<LinearLayout xmlns:android="ht <Button
tp://[Link]/a pk/res/android" android:id="@+id/Banana"
android:orientation="vertical" android:text="Banana"
android:layout_width="match_parent" android:layout_width="300dip"
android:layout_height="match_parent"> android:layout_height="wrap_content
" android:padding="20dip"
<Button android:layout_marginTop="20dip" />
android:id="@+id/Apple" <Button
android:text="Apple" android:id="@+id/Grapes"
android:layout_width="300dp" android:text="Grapes"
android:layout_height="wrap_content" android:layout_width="300dip"
android:padding="20dip" android:layout_height="wrap_con
android:layout_marginTop="20dip" /> tent"
<Button android:padding="20dip"
android:layout_marginTop="20dip"
android:id="@+id/Mango"
android:text="Mango" />
android:layout_width="300dp" <Button
android:layout_height="wrap_content" android:id="@+id/Kiwi"
android:padding="20dip" android:text="Kiwi"
android:layout_height="wrap_content
android:layout_marginTop="20dip" /> android:layout_width="30
" android:padding="20dip"
0dip"
android:layout_marginTop="20dip" />
</LinearLayout>

Listing 3.17. The Layout File activity_screen_orientation_app.xml on Laying Out Controls in

portra
•This vertical arrangement makes a few of the Button controls
disappear when the screen is 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.
• 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.
 <Button
<RelativeLayout xmlns:android="ht android:id="@+id/Banana"
tp://[Link]/a pk/res/android" android:text="Banana"
android:orientation="vertical" android:layout_width="250dip"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_height="match_parent"> android:padding="20dip"
android:layout_marginTop="20dip"
<Button android:layout_below="@id/Apple" />
<Button
android:id="@+id/Apple"
android:id="@+id/Grapes"
android:text="Apple" android:text="Grapes"
android:layout_width="250dp" android:layout_width="250dip"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:padding="20dip" android:padding="20dip"
android:layout_marginTop="20dip" /> android:layout_marginTop="20dip"
<Button android:layout_below="@id/Apple"
android:id="@+id/Mango" android:layout_toRightOf="@id/Banana" />
<Button
android:text="Mango"
android:id="@+id/Kiwi"
android:layout_width="250dp" android:text="Kiwi"
android:layout_height="wrap_content" android:layout_width="250dip"
android:padding="20dip" android:layout_height="wrap_content"
android:layout_marginTop="20dip" android:padding="20dip"
android:layout_toRightOf="@id/Apple" /> android:layout_marginTop="20dip"
android:layout_below="@id/Banana" />
</RelativeLayout>
Listing 3.18. The Layout File activity_screen_orientation_app.xml in the res/layout-land
public class ScreenOrientationAppActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState)
{ [Link](savedInstanceState);
setContentView([Link].activity_screen_orientation_app);
if(getResources().getDisplayMetrics().widthPixels>getResources()
.getDisplayMetrics().
heightPixels)
{
[Link](this,"Screen switched to Landscape
mode",Toast.LENGTH_SHORT).show();
}
else
{
[Link](this,"Screen switched to Portrait
mode",Toast.LENGTH_SHORT).show();
}
}

We can also detect the screen orientation via Java code.

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