Over the course of this tutorial, we will take a look into Android RelativeLayout and its properties.

RelativeLayout is one among the most used layout after LinearLayout. It allows its child views to position relative to each other or relative to the container or another container. For example, if we have to build a complex layout as shown in the image below, this can be achieved  with ease by using RelativeLayout.

Positioning Views in RelativeLayout

As discussed above, the RelativeLayout childs need to specify their position relative to the parent view or another siblings. If they don’t specify their position explicitly, by default they are positioned to the top-left corner of parent layout.

Some of the most useful RelativeLayout properties includes,

XML Attributes	Description
layout_alignParentTop	Accepts boolean value. If specified, the widget will be docked to the top of RelativeLayout.
layout_alignParentBottom	Accepts boolean value. If specified, the widget will be docked to the bottom of RelativeLayout.
layout_alignParentLeft	Accepts boolean value. If specified, the widget will be docked to the left edge of RelativeLayout.
layout_alignParentRight	Accepts boolean value. If specified, the widget will be docked to the right edge of RelativeLayout.
layout_centerInParent	Accepts boolean value. If specified, the widget will be aligned to center of RelativeLayout.
layout_centerHorizontal	Accepts boolean value. If specified, the widget will be horizontally center aligned
layout_centerVertical	Accepts boolean value. If specified, the widget will be vertically center aligned
layout_below	Accepts sibling widget id. Places the widget below the view as specified widget id.
layout_above	Accepts sibling widget id. Places the widget above the specified widget id.
layout_toRightOf	Accepts sibling widget id. Places the widget to right of the view as specified widget id.
layout_toLeftOf	Accepts sibling widget id. Places the widget to left of the view as specified widget id.
layout_toEndOf	Accepts sibling widget id. Places the widget to end of the view as specified widget id.
layout_toStartOf	Accepts sibling widget id. Places the widget to the beginning of the view as specified widget id.

RelativeLayout Example

Let us create an example of RelativeLayout . For the sake of simplicity, we have made the example relatively very simple, by adding some random Buttons to demonstrate different RelativeLayout attributes.

Source Code is below

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="Button2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="Button3" />

    <Button
        android:id="@+id/button4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Button5" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button2"
        android:layout_centerHorizontal="true"
        android:text="Button4" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button4"
        android:layout_centerHorizontal="true"
        android:text="Button6" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button"
        android:layout_toEndOf="@+id/button"
        android:layout_toRightOf="@+id/button"
        android:text="Button7" />

</RelativeLayout>