Layouts are the core part of the application. The application GUI design should be in such a way that the end user can easy to understand and he can navigate the app smoothly.
Relative layout:
A Relative Layout is a very powerful utility for designing a
user interface because it can eliminate nested view groups and keep your layout
hierarchy flat, which improves performance. If you find yourself using several
nested Linear Layout groups, you may be able to replace them with a single
Relative Layout.
In Relative Layout we have a lot of options to align the view with respect to another views.
e,g alignParentLeft , alignParentBottom , alignParentTop , layout_albove , layout_below , layout_alignBaseline , layout_toRightOf , layout_toLeftOf etc.
Frame Layout:
Frame Layout is designed to block out an area on the screen
to display a single item. Generally, Frame Layout should be used to hold a
single child view, because it can be difficult to organize child views in a way
that's scalable to different screen sizes without the children overlapping each
other. You can, however, add multiple children to a Frame Layout and control
their position within the Frame Layout by assigning gravity to each child,
using the android: layout_ gravity attribute.
Child views are drawn in a stack, with the most
recently added child on top. The size of the Frame Layout is the size of its
largest child (plus padding), visible or not (if the Frame Layout’s parent
permits).
Linear layout:
Using nested instances of Linear Layout can lead to an
excessively deep view hierarchy. Furthermore, nesting several instances of
Linear Layout that use the layout _weight parameter can be especially expensive
as each child needs to be measured twice.
Hierarchy Viewer:
Hierarchy Viewer works by allowing you to select running
processes on a connected device or emulator, and then display the layout tree.
The traffic lights on each block represent its
1.
Measure,
2.
Render
and
3.
Draw performance, helping you identify potential
issues.
I shall explain the below example to optimize the layout and
showing you how the performance will increase by using the appropriate layout.
To draw this above layout, if we use the Linear Layout, the
time to measure, render and Draw the layout is and the Hierarchy viewer view is
as follows.
and if we use the Relative layout , the time to measure,
render and Draw the layout is and the Hierarchy viewer view is as follows.
Lint:
It is always good practice to run the Lint tool on your
layout files to search for possible view hierarchy optimizations. Lint has
replaced the Layout opt tool and has much greater functionality.
1.
Use compound drawables - A Linear Layout which
contains an Image View and a Text View can be more efficiently handled as a
compound draw able.
2.
Merge root frame - If a Frame Layout is the root
of a layout and does not provide background or padding etc, it can be replaced
with a merge tag which is slightly more efficient.
3.
A layout that has no children or no background
can often be removed.
4.
Deep layouts - Layouts with too much nesting are
bad for performance. Consider using flatter layouts such as Relative Layout or
Grid Layout to improve performance.
Another
benefit of Lint is that it is integrated into the Android Development Tools for
Eclipse (ADT 16+). Lint automatically runs whenever you export an APK, edit and
save an XML file or use the Layout Editor. To manually force Lint to run press
the Lint button in the Eclipse toolbar.
More Optimization Techniques for draw Layouts:
To efficiently re-use complete layouts, you
can use the<include/> and <merge/> tags to embed another layout inside the
current layout.
Include<> :
Inside the layout to which you want to add the
re-usable component, add the <include/> tag
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background="@color/app_bg"
android:gravity="center_horizontal">
<include layout="@layout/title"/>
<TextView android:layout_width=”match_parent”
android:layout_height="wrap_content"
android:text="@string/hello"
android:padding="10dp" />
...
</LinearLayout>
And
title.xml is as follows
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height="wrap_content"
android:background="@color/titlebar_bg">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/gafricalogo" />
</FrameLayout>
You can also override all the layout
parameters (any android:layout_* attributes) of the included layout's root
view by specifying them in the <include/> tag. For example:
<include android:id=”@+id/news_title”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
layout=”@layout/title”/>
Merge<>:
The <merge /> tag helps eliminate
redundant view groups in your view hierarchy when including one layout within
another. For example, if your main layout is a vertical Linear Layout in which
two consecutive views can be re-used in multiple layouts, then the re-usable
layout in which you place the two views requires its own root view. However,
using another Linear Layout as the root for the re-usable layout would result
in a vertical Linear Layout inside a vertical Linear Layout. The nested Linear
Layout serves no real purpose other than to slow down your UI performance.
To avoid including such a redundant view
group, you can instead use the <merge> element as the root view for the
re-usable layout. For example:
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/add"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/delete"/>
</merge>
A very basic example of using the
include and the merge
this below example will clear your doubts if remaining in merge and Include tag concept
layout1.xml:
<FrameLayout>
<include layout="@layout/layout2"/>
</FrameLayout>
layout2.xml:
<FrameLayout>
<TextView />
</FrameLayout>
which is
functionally equivalent to this single layout:
<FrameLayout>
<FrameLayout>
<TextView />
</FrameLayout>
</FrameLayout>
That Frame Layout in layout2.xml may not be useful. <merge/> helps get rid of it. Here's what it looks
like using merge (layout1.xml doesn't change):
layout2.xml:
<merge>
<TextView />
</merge>
This is
functionally equivalent to this layout:
<FrameLayout>
<TextView />
</FrameLayout>
Table Layout:
Table layout is a layout that arranges its children into
rows and columns. A Table Layout
consists of a number of Table
Row objects,
each defining a row (actually, you can have other children, which will be
explained below). Table Layout containers do not display border lines for their
rows, columns, or cells. Each row has zero or more cells; each cell can hold
one View object. The
width of a column is defined by the row with the widest cell in that column. Cells must be added to a row in
increasing column order, both in code and XML. Column numbers are zero-based.
If you don't specify a column number for a child cell, it will auto increment
to the next available column. If you skip a column number, it will be considered
an empty cell in that row. See the Table Layout examples in Api Demos for
examples of creating tables in XML.
