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.