Scribd
Upload
15 views33 pages

Lab 4

Uploaded by

muhammadrahid780
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views33 pages

Lab 4

Uploaded by

muhammadrahid780
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 33

Lab 04

Laying Out Controls in Containers


By
M.Zakir Khan
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.
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.
Linear Vertical and Horizontal Layout
XML Code
Applying the weight Attribute
• Apply different weight attribute like (0.0,1.0,0.0), (0.0,0.0,1.0) and
(1.0,1.0,1.0)
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
 Figure shows the android:gravity attribute set to left and right for
the Button controls Horizontal and Layout text over button.
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.
 This attribute is used to align the control within the container.
 For example,to align the Button control itself in the LinearLayout (the
container), we use the android:layout_gravity attribute
XML Code
RelativeLayout

• In RelativeLayout, each child element is laid out in relation to other


child elements;
Before we understand how the controls in the previous code block are placed, let’s have a quick look at different
attributes used to set the positions of the layout controls.
XML CODE
Example on Relative Layout
JAVA code
XML Code
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.
Java Code
Frame Layout
• 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.
XML and JAVA Code
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.
XML Code
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.

Note
• No need to specify layout_height and layout_width for the
GridLayout child views as they default to WRAP_CONTENT .
Anchoring Controls
• For anchoring controls relative to the four edges of the screen, we use
a RelativeLayout container.
• 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.
• If we see the code of Relative layout shows five Button controls
arranged in a RelativeLayout container
• When the application is run while in the default portrait mode, the controls
appear as shown in Figure (Left). The xml code of the figure left is already present
in relative layout slide.
• 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.
• The code of previous slide is shown below.
• The Landscape and patriot mode is shown
Task on Linear Layout
XML code
Task on Relative Layout
XML Code

You might also like