Android - RelativeLayout

Relative Layout 

Relative Layout is a container which has enhanced features than the previous Linear Layout.  This layout allows gui components to be placed relative to other components.  Android provides us with many attributes to help us to place components relative to one another.

1. Components can be placed relative to one another 

2. Components can be placed relative to the container.

Important attributes of RelativeLayout.LayoutParams.  Please follow link below to get a fair idea of RelativeLayout. 

http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html

Exampe of one of the important attributes in RelativeLayout.

1. layout_toRightOf - the current component which has this attribute will be placed to the right of the specified id.

eg. 

  TextField 1 | TextField 2

In the above case TextField 2 is placed to the right of TextField1.  In this case we write the layout_toRightOf as follows. 

<EditText

android:id="@+id/TextField2"

android:layout_toRightOf("Id of TextField1")  />

I have given an example code and its corresponding screenshot. 

ScreenShot of a screen built using RelativeLayout.

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <TextView

        android:id="@+id/lbl_PersonalInfo"

        android:text="Personal Information"

        android:textSize="25dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

    <TextView

        android:layout_below="@+id/lbl_PersonalInfo"

        android:id="@+id/lbl_first_name"

        android:text="FirstName"

        android:layout_marginTop="20dp"

        android:layout_marginLeft="20dp"

        android:layout_marginBottom="20dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

    <EditText

        android:id="@+id/txt_first_name"

        android:layout_toRightOf="@+id/lbl_first_name"

        android:layout_below="@+id/lbl_PersonalInfo"

        android:layout_marginRight="10dp"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />

    <TextView

        android:id="@+id/lbl_last_name"

        android:layout_below="@+id/lbl_first_name"

        android:text="Last Name"

        android:layout_marginTop="10dp"

        android:layout_marginLeft="20dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

    <EditText

        android:id="@+id/txt_last_name"

        android:layout_below="@+id/txt_first_name"

        android:layout_toRightOf="@+id/lbl_last_name"

        android:layout_marginRight="10dp"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />

    <TextView

        android:id="@+id/lbl_DateOfBirth"

        android:layout_below="@+id/lbl_last_name"

        android:layout_marginTop="20dp"

        android:layout_marginLeft="20dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Date of Birth"

        />

    <EditText

        android:id="@+id/txt_Day"

        android:layout_toRightOf="@+id/lbl_DateOfBirth"

        android:layout_below="@+id/lbl_last_name"

        android:layout_marginLeft="10dp"

        android:layout_marginRight="10dp"

        android:layout_width="80dp"

        android:layout_height="wrap_content" />

    <EditText

        android:id="@+id/txt_Month"

        android:layout_toRightOf="@+id/txt_Day"

        android:layout_below="@+id/lbl_last_name"

        android:layout_marginLeft="10dp"

        android:layout_marginRight="10dp"

        android:layout_width="80dp"

        android:layout_height="wrap_content" />

    <EditText

        android:id="@+id/txt_Year"

        android:layout_toRightOf="@+id/txt_Month"

        android:layout_below="@+id/lbl_last_name"

        android:layout_marginLeft="10dp"

        android:layout_marginRight="10dp"

        android:layout_width="80dp"

        android:layout_height="wrap_content" />

    <TextView

        android:id="@+id/lbl_Address"

        android:layout_below="@+id/lbl_DateOfBirth"

        android:layout_marginTop="20dp"

        android:layout_marginLeft="20dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Address"

        />

    <EditText

        android:id="@+id/txt_Address"

        android:layout_below="@+id/lbl_DateOfBirth"

        android:layout_toRightOf="@+id/lbl_Address"

        android:layout_alignParentRight="true"

        android:layout_marginRight="10dp"

        android:layout_marginLeft="10dp"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />

    <TextView

        android:id="@+id/lbl_states"

        android:layout_below="@+id/lbl_Address"

        android:text="State"

        android:layout_marginTop="20dp"

        android:layout_marginLeft="20dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

    <Spinner

        android:id="@+id/spin_states"

        android:layout_below="@+id/lbl_Address"

        android:layout_toRightOf="@+id/lbl_states"

        android:layout_marginTop="15dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content">

    </Spinner>

    <ImageView

        android:id="@+id/img_qm"

        android:src="@drawable/question_blue"

        android:layout_below="@+id/txt_Address"

        android:layout_toRightOf="@+id/spin_states"

        android:layout_toEndOf="@+id/spin_states"

        android:layout_marginTop="13dp"

        android:layout_marginLeft="5dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</RelativeLayout>

Android Tutorials - Linear Layout

Linear layout is a container for andoid ui components.  It helps us to arrange components in either horizontal (default) or vertical direction.

Frequently used attributes in a linear layout are the following.  A fair understanding of them will help us create a gui easily and use them at the appropriately.

android:orientation - horizontal (default )  or vertical

android:weightSum - This attribute works with android:layout_weight in the child components.  This attribute contains the sum of the layout_weight attributes in its children. The range is (0.0 to 1.0).  eg. if weightSum in the linearlayout parent has 1.0 and it has two child buttons, and each of them have a layout_weight value of 0.5.  They will be allocated equal space in its parent.  If the two have values (0.25 & 0.75) respectively and its parent has 100 pixels of horizontal space, the children will be allocated 25 pixels and 75 pixels respectively.  

android:gravity: This attribute decides where the child components will placed in the rectangular space that it has.  The possible values are ( top, left, right, bottom, center_horizontal, center_vertical, center, fill, fill_horizontal, fill_vertical, start, end ... ).  

center = center_horizontal + center_vertical.

Component placed in the top left corner should have value as( top | left). 

The following is a layout resource file for a sample activity which I created to help understand these basic attributes.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/topLevelContainer"
    android:weightSum="1.0">
    <LinearLayout
        android:id="@+id/firstChildContainer"
        android:layout_weight="0.5"
        android:gravity="center_horizontal|center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:text="Button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="Button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/secondChildContainer"
        android:layout_weight="0.5"
        android:gravity="center_vertical|right|center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:text="Cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="OK"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

The above example contains 3 LinearLayouts.  A root container with two child containers and each of them have two buttons respectively.

Top Level Linear Layout ( which illustrates android:orientation and android:weightSum).
The First & Second  child container  ( which illustrates android:gravity ).

The following screen shot says it all.