Relative Layout

The Relative Layout is very flexible layout used in android for custom layout designing. It gives us the flexibility to position our component/view based on the relative or sibling component’s position. Just because it allows us to position the component anywhere we want so it is considered as most flexible layout. For the same reason Relative layout is the most used layout after the Linear Layout in Android. It allow its child view to position relative to each other or relative to the container or another container.
In Relative Layout, you can use “above, below, left and right” to arrange the component’s position in relation to other component. For example, in the below image you can see content is placed in related to Heading.

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).


A RelativeLayout is a very powerful utility for designing a user interface because it can eliminate nested view groups and keep your layout hierarchy flat, which improves performance. If you find yourself using several nested LinearLayout groups, you may be able to replace them with a single RelativeLayout.

Although the Relative Layout is most powerful layout  but ConstraintLayout is is much better and easy to use layout. It is best to achive the same results but provide better performance.

SOME IMPORTANT PROPERTIES OF RELATIVELAYOUT

RelativeLayout lets child views specify their position relative to the parent view or to each other (specified by ID). So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. By default, all child views are drawn at the top-left of the layout, so you must define the position of each view using the various layout properties available from RelativeLayout.LayoutParams.
Some of the many layout properties available to views in a RelativeLayout include:

android:layout_alignParentTop

If "true", makes the top edge of this view match the top edge of the parent.

android:layout_centerVertical

If "true", centers this child vertically within its parent.

android:layout_below

Positions the top edge of this view below the view specified with a resource ID.

android:layout_toRightOf

Positions the left edge of this view to the right of the view specified with a resource ID.

These are just a few examples. All layout attributes are documented at RelativeLayout.LayoutParams.
The value for each layout property is either a boolean to enable a layout position relative to the parent RelativeLayout or an ID that references another view in the layout against which the view should be positioned.
In your XML layout, dependencies against other views in the layout can be declared in any order. For example, you can declare that "view1" be positioned below "view2" even if "view2" is the last view declared in the hierarchy. The example below demonstrates such a scenario.

Relative Layout properties

As we discussed, in RelativeLayout we need to specify the position of child views relative to each other or relative to the parent. In case if we didn’t specify the position of child views, by default all child views are positioned to top-left of the layout.

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 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 parent.
layout_centerInParent	If it specified “true”, the view will be aligned to 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 end of the specified view id.

  Below is the simple example for the a UI Design for the Calculator

<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" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"

    android:id="@+id/relative1">

    <EditText

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:id="@+id/edt1"/>

    <Button

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"

        android:id="@+id/button1"

        android:layout_marginTop="94dp"


        android:layout_below="@+id/edt1"

        android:layout_toStartOf="@+id/button4"

        android:layout_alignRight="@+id/button4"

        android:layout_alignEnd="@+id/button4" />

    <Button

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="2"

        android:id="@+id/button2"

        android:layout_alignTop="@+id/button1"
        android:layout_toLeftOf="@+id/button3"

        android:layout_toStartOf="@+id/button3" />

    <Button

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        android:id="@+id/button3"
        android:layout_alignTop="@+id/button2"
        android:layout_centerHorizontal="true" />
    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"


        android:layout_height="wrap_content"



        android:text="4"



        android:id="@+id/button4"



        android:layout_below="@+id/button1"



        android:layout_toLeftOf="@+id/button2" />



    <Button



        style="?android:attr/buttonStyleSmall"



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:text="5"



        android:id="@+id/button5"



        android:layout_alignBottom="@+id/button4"



        android:layout_alignLeft="@+id/button2"



        android:layout_alignStart="@+id/button2" />



    <Button



        style="?android:attr/buttonStyleSmall"



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:text="6"



        android:id="@+id/button6"



        android:layout_below="@+id/button3"



        android:layout_alignLeft="@+id/button3"



        android:layout_alignStart="@+id/button3" />



    <Button



        style="?android:attr/buttonStyleSmall"



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:text="7"



        android:id="@+id/button7"



        android:layout_below="@+id/button4"



        android:layout_toLeftOf="@+id/button2" />



    <Button



        style="?android:attr/buttonStyleSmall"



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:text="8"



        android:id="@+id/button8"



        android:layout_below="@+id/button5"



        android:layout_alignLeft="@+id/button5"



        android:layout_alignStart="@+id/button5" />



    <Button



        style="?android:attr/buttonStyleSmall"



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:text="9"



        android:id="@+id/button9"



        android:layout_below="@+id/button6"



        android:layout_alignLeft="@+id/button6"



        android:layout_alignStart="@+id/button6" />



    <Button



        style="?android:attr/buttonStyleSmall"



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:text="+"



        android:id="@+id/buttonadd"



        android:layout_alignTop="@+id/button3"



        android:layout_toRightOf="@+id/button3"



        android:layout_marginLeft="46dp"



        android:layout_marginStart="46dp"



        android:layout_alignRight="@+id/edt1"



        android:layout_alignEnd="@+id/edt1" />



    <Button



        style="?android:attr/buttonStyleSmall"



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:text="-"



        android:id="@+id/buttonsub"



        android:layout_below="@+id/buttonadd"



        android:layout_alignLeft="@+id/buttonadd"



        android:layout_alignStart="@+id/buttonadd"



        android:layout_alignRight="@+id/buttonadd"



        android:layout_alignEnd="@+id/buttonadd" />



    <Button



        style="?android:attr/buttonStyleSmall"



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:text="*"



        android:id="@+id/buttonmul"



        android:layout_below="@+id/buttonsub"



        android:layout_alignLeft="@+id/buttonsub"



        android:layout_alignStart="@+id/buttonsub"



        android:layout_alignParentRight="true"



        android:layout_alignParentEnd="true" />



    <Button



        style="?android:attr/buttonStyleSmall"



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:text="."



        android:id="@+id/button10"



        android:layout_below="@+id/button7"



        android:layout_toLeftOf="@+id/button2" />



    <Button



        style="?android:attr/buttonStyleSmall"



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:text="0"



        android:id="@+id/button0"



        android:layout_below="@+id/button8"



        android:layout_alignLeft="@+id/button8"



        android:layout_alignStart="@+id/button8" />



    <Button



        style="?android:attr/buttonStyleSmall"



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:text="C"



        android:id="@+id/buttonC"



        android:layout_below="@+id/button9"



        android:layout_alignLeft="@+id/button9"



        android:layout_alignStart="@+id/button9" />



    <Button



        style="?android:attr/buttonStyleSmall"



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:text="/"



        android:id="@+id/buttondiv"



        android:layout_below="@+id/buttonmul"



        android:layout_alignLeft="@+id/buttonmul"



        android:layout_alignStart="@+id/buttonmul"



        android:layout_alignRight="@+id/buttonmul"



        android:layout_alignEnd="@+id/buttonmul" />



    <Button



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:text="="



        android:id="@+id/buttoneql"



        android:layout_below="@+id/button0"



        android:layout_marginTop="37dp"



        android:layout_alignRight="@+id/buttondiv"



        android:layout_alignEnd="@+id/buttondiv"



        android:layout_alignLeft="@+id/button10"



        android:layout_alignStart="@+id/button10" />



</RelativeLayout>

And Output screen will look like below

  Another simple example of relative layout is shown below

<?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"

    android:paddingLeft="16dp"

    android:paddingRight="16dp" >

    <EditText

        android:id="@+id/name"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:hint="Rreminder" />

    <Spinner

        android:id="@+id/dates"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_below="@id/name"

        android:layout_alignParentLeft="true"

        android:layout_toLeftOf="@+id/times" />

    <Spinner

        android:id="@id/times"

        android:layout_width="96dp"

        android:layout_height="wrap_content"

        android:layout_below="@id/name"

        android:layout_alignParentRight="true" />

    <Button

        android:layout_width="96dp"

        android:layout_height="wrap_content"

        android:layout_below="@id/times"

        android:layout_alignParentRight="true"

        android:text="Done" />



    <Button

        android:id="@+id/button"

        android:layout_width="131dp"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_alignStart="@+id/name"

        android:layout_marginBottom="31dp"

        android:text="Button" />



</RelativeLayout>

And UI output for above XML for relative layout will be