Relative Layout

In Android, RelativeLayout is a layout type that displays child views in relative positions. The position of each view is specified as relative to sibling elements (such as to the right-of or below another view) or in positions relative to the parent  area (such as aligned to the bottom, left of center). In RelativeLayout, you can use relative positions such as “above, below, left and right” to position the component. For example, display a “Button2″ to the right of “Button1″, or display “Button3″ below “Button2″.
In this tutorial, we shall learn how to position button, textview and editbox via “RelativeLayout“.

1. RelativeLayout

Open “res/layout/main.xml” file. Set the layout to RelativeLayout. Add the components within this layout. The XML code for RelativeLayout written below is simple and self-explanatory.
File: res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >

    <Button

        android:id="@+id/btnButton1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button 1"/>

    <Button

        android:id="@+id/btnButton2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button 2"

        android:layout_toRightOf="@+id/btnButton1"/>

     <Button

        android:id="@+id/btnButton3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button 3"

        android:layout_below="@+id/btnButton1"/>

     <TextView

         android:id="@+id/textView1"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_below="@+id/btnButton3"

         android:layout_marginTop="100dp"

         android:text="User :"

         android:textAppearance="?android:attr/textAppearanceLarge" />

     <EditText

         android:id="@+id/editText1"

         android:inputType="text"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_alignParentRight="true"

         android:layout_alignTop="@+id/textView1"

         android:layout_toRightOf="@+id/btnButton3" />

     <Button

         android:id="@+id/btnSubmit"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_alignParentRight="true"

         android:layout_below="@+id/editText1"

         android:text="Submit" />

</RelativeLayout>

Note: RelativeLayout is difficult to master. It is recommended that you use the drag and drop functionality of the Eclipse IDE or ADT to see how the RelativeLayout works.

2. Demo

The above XML code will generate the following output.