Android Relative Layout example

[cci]RelativeLayout[/cci] is one of android container or [cci]ViewGroup[/cci]. Like it’s name, the main feature of [cci]Relativelayout[/cci] is to place one [cci]View[/cci] relative to other [cci]View[/cci] or with it’s parent it’s self.

Place a view relative to other view

In order to make a relative position of one view to another view, an [cci]id[/cci] is must be defined in referred view. Says you have two [cci]TextView[/cci] in layout, you want second [cci]TextView[/cci] placed to the right of first [cci]TextView[/cci] but the top of second [cci]TextView[/cci] is place to bottom of first [cci]TextView[/cci]. To do this, you must define an [cci]id[/cci] to the first [cci]TextView[/cci].

[sourcecode lang=”xml” highlight=”16,17″]
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/textView1"
android:layout_below="@id/textView1"
android:text="@string/hay"
/>
</RelativeLayout>
[/sourcecode]

In above source code, we have put 2 [cci]TextView[/cci]. The frist [cci]TextView[/cci] have an id [cci]textView1[/cci]. Now, take a look at hightlighted line of the above source code. The line [cci]android:layout_toRightOf=”@id/textView1″[/cci] means set the position of [cci]TextView[/cci] to the right of first [cci]TextView[/cci]. While [cci]android:layout_below=”@id/textView1″[/cci] means place second [cci]TextView[/cci] to the bottom of first [cci]TextView[/cci].
Here the result of above layout:

Relative layuot exampl

There are more attributes that can be used to make relative position between views. Here are the complete list:

• [cci]android:layout_toLeftOf[/cci]
  Positions the right edge of this view to the left of the given anchor view ID.
• [cci]android:layout_toRightOf[/cci]
  Positions the left edge of this view to the right of the given anchor view ID.
• [cci]android:layout_above[/cci]
  Positions the bottom edge of this view above the given anchor view ID.
• [cci]android:layout_below[/cci]
  Positions the bottom edge of this view below the given anchor view ID.
• [cci]android:layout_alignBaseline[/cci]
  Positions the baseline of this view on the baseline of the given anchor view ID.
• [cci]android:layout_alignLeft[/cci]
  Makes the left edge of this view match the left edge of the given anchor view ID.
• [cci]android:layout_alignTop[/cci]
  Makes the top edge of this view match the top edge of the given anchor view ID.
• [cci]android:layout_alignRight[/cci]
  Makes the right edge of this view match the right edge of the given anchor view ID.
• [cci]android:layout_alignBottom[/cci]
  Makes the bottom edge of this view match the bottom edge of the given anchor view ID.
• [cci]android:layout_toStartOf[/cci]
  Positions the end edge of this view to the start of the given anchor view ID.
• [cci]android:layout_toEndOf[/cci]
  Positions the start edge of this view to the end of the given anchor view ID.
• [cci]android:layout_alignStart[/cci]
  Makes the start edge of this view match the start edge of the given anchor view ID.
• [cci]android:layout_alignEnd[/cci]
  Makes the end edge of this view match the end edge of the given anchor view ID.

Place a view relative to it’s parent

Another relative layout capability is place a view relative to it’s parent. This means you can make bottom edge of a view match bottom edge of its parent. Just add simple attribute [cci]android:layout_alignParentBottom=”true”[/cci] to your view then your view automatically aligned to its parent. I will give an example how to do this in code.

[sourcecode lang=”xml” highlight=”10″]
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:layout_alignParentBottom="true"/>

</RelativeLayout>
[/sourcecode]

Here the result of above layout:

Relative layout example

Except [cci]android:layout_alignParentBottom=”true”[/cci], there are another attributes for aligning to parent. Here are complete list

• [cci]android:layout_alignParentTop=”true”[/cci]
  If true, makes the top edge of this view match the top edge of the parent.
• [cci]android:layout_alignParentLeft=”true”[/cci]
  If true, makes the left edge of this view match the left edge of the parent.
• [cci]android:layout_alignParentRight=”true”[/cci]
  If true, makes the right edge of this view match the right edge of the parent.
• [cci]android:layout_alignParentBottom=”true”[/cci]
  If true, makes the bottom edge of this view match the bottom edge of the parent.
• [cci]android:layout_alignParentTop=”true”[/cci]
  If true, makes the top edge of this view match the top edge of the parent.
• [cci]android:layout_alignParentStart=”true”[/cci]
  If true, makes the start edge of this view match the start edge of the parent.
• [cci]android:layout_alignParentEnd=”true”[/cci]
  If true, makes the end edge of this view match the end edge of the parent.