RelativeLayout

Android RelativeLayout enables you to specify how child views are positioned relative to each other. The position of each view can be specified as relative to sibling elements or relative to the parent. RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center)



Following are the some of most useful layout properties available to views in RelativeLayout.

Attribute Description
layout_alignParentTop If it specified "true", the top edge of view will match the top edge of the parent.
layout_alignParentBottom If it specified "true", the bottom edge of view will match the bottom edge of parent.
layout_alignParentLeft If it specified "true", the left edge of view will match the left edge of parent.
layout_alignParentRight If it specified "true", the right edge of view will match the right edge of the parent.
layout_centerInParent If it specified "true", the view will be aligned to the centre of parent.
layout_centerHorizontal If it specified "true", the view will be horizontally centre aligned within its parent.
layout_centerVertical If it specified "true", the view will be vertically centre aligned within its parent.
layout_above It accepts another sibling view id and places the view above the specified view id.
layout_below It accepts another sibling view id and places the view below the specified view id.
layout_toLeftOf It accepts another sibling view id and places the view left of the specified view id.
layout_toRightOf It accepts another sibling view id and places the view right of the specified view id.
layout_toStartOf It accepts another sibling view id and places the view to start of the specified view id.
layout_toEndOf It accepts another sibling view id and places the view to the end of the specified view id.

Create relativelayout_activity.xml
<?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">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tvHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="@android:color/holo_red_dark"
        android:gravity="center_horizontal"
        android:text="This is Header on Top"
        android:textSize="10pt" />

    <View
        android:id="@+id/red1"
        android:layout_width="150dp"
        android:layout_height="180dp"
        android:layout_below="@+id/tvHeader"
        android:layout_marginTop="20dp"
        android:background="@android:color/holo_red_dark" />

    <View
        android:id="@+id/red2"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/red1"
        android:layout_below="@+id/tvHeader"
        android:layout_marginTop="20dp"
        android:background="@android:color/holo_red_dark" />


    <View
        android:id="@+id/red3"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/red1"
        android:layout_below="@+id/red2"
        android:layout_marginTop="20dp"
        android:background="@android:color/holo_red_dark" />

    <View
        android:id="@+id/red4"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_below="@+id/red1"
        android:layout_toLeftOf="@+id/red5"
        android:layout_marginTop="20dp"
        android:background="@android:color/holo_red_dark" />

    <View
        android:id="@+id/red5"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dp"
        android:layout_below="@+id/red1"
        android:layout_marginTop="20dp"
        android:background="@android:color/holo_red_dark" />

</RelativeLayout>

Result of above xml is: