RelativeLayout and GridLayout allow for flexible layout design in Android applications. RelativeLayout positions elements relative to each other and the parent container using properties like alignParentTop, below, and toRightOf. GridLayout divides space into rows and columns, allowing elements to span multiple cells. It provides solutions for alignment issues in nested layouts and improves performance over deeply nested designs.

1. Unit 6
Practice of Layout in Application
By
Dr. Ramkumar Lakshminarayanan
Introduction
Layout becomes the basic of designing the user interface of the android application. In this
unit we discuss about the relative layout and grid layout and discuss about the design of the
User Interface.
RelativeLayout
RelativeLayout lays out elements based on their relationships with one another, and with the
parent container. This is arguably the most complicated layout, and we need several
properties to actually get the layout we want.
Relative To Container
These properties will layout elements relative to the parent container.
 android:layout_alignParentBottom – Places the bottom of the element on the bottom
of the container
 android:layout_alignParentLeft – Places the left of the element on the left side of the
container
 android:layout_alignParentRight – Places the right of the element on the right side of
the container
 android:layout_alignParentTop – Places the element at the top of the container
 android:layout_centerHorizontal – Centers the element horizontally within its parent
container
 android:layout_centerInParent – Centers the element both horizontally and vertically
within its container
 android:layout_centerVertical – Centers the element vertically within its parent
container
Relative To Other Elements
These properties allow you to layout elements relative to other elements on screen. The value
for each of these elements is the id of the element you are using to layout the new element.
Each element that is used in this way must have an ID defined using
android:id=”@+id/XXXXX” where XXXXX is replaced with the desired id. You use
“@id/XXXXX” to reference an element by its id. One thing to remember is that referencing
an element before it has been declared will produce an error.
 android:layout_above – Places the element above the specified element
 android:layout_below – Places the element below the specified element

2.  android:layout_toLeftOf – Places the element to the left of the specified element
 android:layout_toRightOf – Places the element to the right of the specified element
Alignment With Other Elements
These properties allow you to specify how elements are aligned in relation to other elements.
 android:layout_alignBaseline – Aligns baseline of the new element with the baseline
of the specified element
 android:layout_alignBottom – Aligns the bottom of new element in with the bottom
of the specified element
 android:layout_alignLeft – Aligns left edge of the new element with the left edge of
the specified element
 android:layout_alignRight – Aligns right edge of the new element with the right edge
of the specified element
 android:layout_alignTop – Places top of the new element in alignment with the top of
the specified element
Here is a sample XML Layout, for example we have replaced the activity_main.xml with the
following code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/an
droid"
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" />
<Spinner
android:id="@+id/dates"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="@+id/times" />
<Spinner
android:id="@id/times"
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentRight="true" />
<Button
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/times"
android:layout_alignParentRight="true"
android:text="@string/done" />
</RelativeLayout>

3. activity_main.xml
strings.xml
Figure 6.1 Output of the learnapp using relative layout
Grid Layout
GridLayout was introduced with Android 4.0. This layout allows you to organize a
view into a Grid. GridLayout separates its drawing area into: rows, columns, and cells.
You can specify how many columns you want for define for each View in which row
and column it should be placed and how many columns and rows it should use. If not
specified GridLayout uses defaults, e.g. one column, one row and the position of
a View depends on the order of the declaration of the Views.
There is a difference between GridView and GridLayout. A GridView is a
ViewGroup that displays items in two-dimensional scrolling grid. The items in the grid come
from the ListAdapter associated with this view.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">LearnApp</string>
<string name="hello_world">Learn Android App</string>
<string name="menu_settings">Settings</string>
<string name="reminder">Your Appointment at</string>
<string name="done">Done</string>
</resources>

4. Because a GridView gets its data from a ListAdapter, the only data loaded in memory
will be the one displayed on screen. When ListAdapter is used as the type for your variable,
you are really interested in the interface. GridViews, much like ListViews reuse and recycle
their views for better performance.
Whereas a GridLayout is a layout that places its children in a rectangular grid.
It was introduced in API level 14, and was recently backported in the Support Library.
Its main purpose is to solve alignment and performance problems in other layouts.
The drawback of ested layouts; which fall into three basic categories:
 Inability to control alignment along both axes simultaneously
 Performance problems in hierarchies that are too deep
 Unsuitability for design tools that support free-form editing
A simple example of the first problem is the following form:
Figure 6.2 Sample Screen
As the font and the text of the “Email address” label change, we want the label to
remain aligned with the baseline of the component to its right, and aligned with
the right edge of the label below it. It’s not possible to do this with nested LinearLayouts
because the label needs to be aligned with other components both horizontally and vertically.
To provide better support a new layout is added to the Android framework:
GridLayout, which can be used to solve the above problems by dividing the container’s real
estate into rows and columns. GridLayout uses a grid of infinitely-thin lines to separate its
drawing area into: rows, columns, and cells. It supports both row and column spanning,
which together allow a widget to occupy a rectangular range of cells that are next to each
other. We’ll use the words row, column, and cell in the text below as shorthand for row
group, column group and cell group respectively, where groups have one or more contiguous
elements.

5. Figure 6.3 “Email address” label can belong both to a row that is baseline-aligned, and
a column that is right-aligned
Similarities with LinearLayout
In fact, the APIs are so similar that changing a tag name from LinearLayout to
GridLayout in an XML file that uses LinearLayout will often produce a similar UI without
requiring any other changes.
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
android:alignmentMode="alignBounds"
android:columnOrderPreserved="false"
android:columnCount="4">
<TextView
android:text="Email setup"
android:textSize="32dip"
android:layout_columnSpan="4"
android:layout_gravity="center_horizontal"/>
<TextView
android:text="You can configure email in just a few steps:"
android:textSize="16dip"
android:layout_columnSpan="4"
android:layout_gravity="left"/>
<TextView
android:text="Email address:"
android:layout_gravity="right"/>
<EditText
android:ems="10"/>
<TextView
android:text="Password:"
android:layout_column="0"
android:layout_gravity="right"/>
<EditText
android:ems="8"/>
<Space
android:layout_row="4"
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_gravity="fill"/>
<Button
android:text="Next"
android:layout_row="5"
android:layout_column="3"
/>
</GridLayout>

6. The first difference you’ll notice in the code is the absence of the WRAP_CONTENT
and MATCH_PARENT constants that normally adorn Android layout resources. You don’t
normally need to use these with GridLayout.
Row and Column Indices
The second thing you may notice in the XML resources is that widgets don’t always
explicitly define which cells they are to be placed in. Each widget’s layout parameters have
row and column indices that together define where the widget should be placed but when
either or both of these values are not specified, GridLayout supplies default values rather than
throwing an exception.
Automatic Index Allocation
As children are added to a GridLayout, it maintains a cursor position and a “high-
water mark” that it uses to place widgets in cells that don’t yet have anything in them.
When GridLayout’s orientation is vertical, all of the same principles apply, except
that the roles of the horizontal and vertical axes are exchanged.
If you want multiple views to be placed in the same cell, you have to define the
indices explicitly, as the default allocation procedure above is designed to place widgets in
separate cells.
Sizes, Margins and Alignment/Gravity
In GridLayout, specifying sizes and margins is done just as with a LinearLayout.
Alignment/gravity also works just like gravity in LinearLayout and uses the same
constants: left, top, right, bottom, center_horizontal, center_vertical, center, fill_horizontal,
fill_vertical and fill.
Summary
GridLayout’s feature set incorporates much of the functionality of the Android
framework’s existing general-purpose layouts As such, it provides a way to replace many
deeply nested view hierarchies with a single highly optimized layout implementation.