Relative Layout in Android

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.

Even though Android has drag and drop system to put one component in related to other inside
 relative layout. 
But actually in the background lots of XML properties are working which does this task. 
So Android developer can design UI either using drag & drop or using XML code. 
Professional developer uses both for designing UI.

Attributes of Relative layout:

Lets see different properties of Relative Layout which will be used while designing Android App UI:

1.above: Position the bottom edge of the view above the given anchor view ID and must 
be a reference of the another resource in the form of id. Example, 
]android:layout_above=”@+id/textView” .

For example, suppose a view with id textview2 is what we want to place above 
another view with id textview. Below is the code and layout image.

2. alignBottom: alignBottom is used to makes the bottom edge of the view match
 the bottom edge of the given anchor view ID and it must be a reference to another 
resource, in the form of id. Example: android:layout_ alignBottom =”@+id/button1″

In the below example we have aligned a view with id textView2 Bottom of another 
view with id textView. Below is the coded and layout image.

<!-- textView2 alignBottom of textView -->

<TextView

   android:layout_width="wrap_content"

android:layout_height="wrap_content"

   android:textAppearance="?android:attr/textAppearanceLarge"

   android:layout_centerHorizontal="true"    

   android:id="@+id/textView2"

   android:layout_alignBottom="@+id/textView"

   android:text="Text2 alignBottom of Text1"

   android:layout_marginBottom="90dp"

/>

3. alignLeft: alignLeft is used to make the left edge of the view match the left 
edge of the given anchor view ID and must be a reference to another resource, in the 
form of Example: android:layout_ alignLeft =”@+id/button1″.

Below is the code and layout image in which we have aligned a view with id 
textView2 left of another view with id textView.

<!-- textView2 alignLeft of textView --> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textAppearance="?android:attr/textAppearanceLarge"    android:id="@+id/textView2"    android:layout_alignLeft="@+id/textView"    android:text="Text2 alignLeft of Text1"    android:layout_below="@+id/textView"    android:layout_marginTop="20dp"/>

4. alignRight: alignRight property is used to make the right edge of this view match 
the right edge of the given anchor view ID and must be a reference to another resource, 
in the form like this example: android:layout_alignRight=”@+id/button1″

Below is the code and layout image in which we have aligned a view with id textView2 
right of another view with id textView.

<!-- textView2 alignRight of textView--> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textAppearance="?android:attr/textAppearanceLarge"    android:id="@+id/textView2"    android:layout_alignRight="@+id/textView"    android:text="Text2 alignRight of Text1"    android:layout_below="@+id/textView"    android:layout_marginTop="20dp"/>

5.alignStart: alignStart property is used to makes the start edge of this view match 
the start edge of the given anchor view ID and must be a reference to another resource, 
in the form of like this example: android:layout_alignStart=”@+id/button1″

Below is the alignStart code and layout image in which we have aligned a view
 with id textView2 start of another view with id textView.

<!-- Text2 alignStart--> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textAppearance="?android:attr/textAppearanceLarge"    android:id="@+id/textView2"    android:text="Text2 align start of Text1"    android:layout_alignStart="@+id/textView" />

6. alignTop: alignTop property is used to makes the top edge of this view match
 the top edge of the given anchor view ID and must be a reference to another resource, 
in the form like this example: android:layout_alignTop=”@+id/button1″.

Below is the alignTop code and layout image in which we have aligned a view 
with id textView Top of another image with id imageView.

<!--text is align top on Image--> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textAppearance="?android:attr/textAppearanceLarge"    android:id="@+id/textView"    android:layout_alignTop="@+id/imageView"    android:text="Text Here is AlignTop on Image"     />

7.alignParentBottom: If alignParentBottom property is true, makes the bottom 
edge of this view match the bottom edge of the parent. The value of align parent bottom 
is either true or false. Example: android:layout_alignParentBottom=”true”

Important Note:alignParentBottom and alignBottom are two different properties. 
In alignBottom we give the reference of another view in the form of id that the 
view is aligned at the bottom of referenced view but in alignParentBottom the 
bottom edge of the view matches the bottom edge of the parent.

Below is the alignParentBottom code and layout image in which textView is simply
 displayed using the alignParentBottom.

<!-- textView is alignParentBottom --> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textAppearance="?android:attr/textAppearanceLarge"    android:id="@+id/textView"    android:text="Text Here is AlignParentBottom with bottom margin of 120dp"    android:layout_alignParentBottom="true"    android:layout_alignParentLeft="true"    android:layout_alignParentStart="true"    android:layout_marginBottom="120dp" />

8. alignParentEnd: If alignParentEnd property is true, then it makes the
 end edge of this view match the end edge of the parent. The value of align parent 
End is either true or false. Example: android:layout_alignParentEnd=”true”.

Important Note: In alignParentEnd the bottom 
edge of the view matches the bottom edge of the parent.

Below is the alignParentEnd code and layout 
image in which textView is simply displayed on Image in the end.

<!-- Text displayed in the end of parent image--> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textAppearance="?android:attr/textAppearanceLarge"    android:id="@+id/textView"    android:text="Text in Parent End"    android:layout_alignBottom="@+id/imageView"    android:layout_alignParentEnd="true" />

9. alignParentLeft: If alignParentLeft property is true, makes the left edge 
of this view match the left edge of the parent. The value of align parent left is either
 true or false. Example: android:layout_alignParentLeft=”true”.

Important Note: alignParentLeft and alignLeft are two different properties. In 
alignLeft we give the reference of another view in the form of id that the view is 
aligned to the left of the referenced view but in alignParentLeft the left edge of
 the view matches the left edge of the parent.

Below is the alignParentLeft example code and layout image in which textView 
is simply displayed on parent Image in the left side.

<!-- align parent left in Android --> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textAppearance="?android:attr/textAppearanceLarge"    android:id="@+id/textView"    android:text="Text in Parent Left"    android:layout_alignBottom="@+id/imageView"    android:layout_alignParentLeft="true"     />

10. alignParentRight: If alignParentRight property is true, then it makes the right edge 
of this view match the right edge of the parent. 
The value of align parent right is either true or false. 
Example: android:layout_alignParentRight=”true”.

Important Note: alignParentRight and alignRight are two different properties. 
In alignRight we give the reference of
 another view in the form of id that the view is aligned to the right of the referenced 
view but in alignParentRight the right edge of the 
view matches the right edge of the parent.

Below is the alignParentRight example code and layout image in which textView 
is simply displayed on parent Image in the right side.

<!-- alignRightParent Example --> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textAppearance="?android:attr/textAppearanceLarge"    android:id="@+id/textView"    android:text="Text in Parent Right"    android:layout_alignBottom="@+id/imageView"    android:layout_alignParentRight="true"  />

11.alignParentStart: If alignParentStart is true, then it makes the start edge 
of this view match the start edge of the parent.
The value of align parent start is either true or false. 
Example: android:layout_alignParentStart=”true”.

Important Note: alignParentStart and alignStart are two different properties, 
In alignStart we give the reference of another view in the form of id 
that the view is aligned at the start of referenced view but in alignParentStart 
the start edge of the view matches the start edge of the parent(RelativeLayout).

Below is the alignParentStart example code and layout image in 
which textView is simply displayed on parent Image in the right side.

<!-- alignParentStart Example --> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textAppearance="?android:attr/textAppearanceLarge"    android:id="@+id/textView"    android:text="Text in Parent Start"    android:layout_alignTop="@+id/imageView"    android:layout_alignParentStart="true"     />

12.alignParentTop: If alignParentTop is true, then it 
makes the top edge of this view match the top edge of the parent. 
The value of align parent Top is either true or false. Example: android:layout_alignParenTop=”true”.

Important Note: alignParentTop and alignTop are two different properties, 
In alignTop we give the reference of another view in the form of id that the view is aligned to 
the top of the referenced view but in alignParentTop the top edge of 
the view matches the top edge of the parent(RelativeLayout).

Below is the example code of alignParentTop property and also layout image.

<!-- alignParentTop example --> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="Text1 align parent top"    android:layout_alignParentTop="true"    android:layout_margin="20dp"    android:textSize="20sp"    android:textColor="#000"/>

13.centerInParent: If center in parent is true, 
makes the view in the center of the screen vertically and horizontally. 
The value of center in parent is either true or false. 
Example: android:layout_centerInParent=”true”.

Below is the example code of centerInParent property and also layout image.

<!-- centerInParent example --> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="Text1 center in parent"    android:layout_centerInParent="true"    android:textSize="20sp"    android:textColor="#000" />

14.centerHorizontal: If centerHorizontal property is true, makes the view horizontally center. 
The value of centerHorizontal is either true or false.Example: android:layout_centerHorizontal=”true”.

Below is the example code of centerHorizontal property and also layout image.

<!-- centerHorizontal example --> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="Text1 center Horizontal"    android:layout_centerHorizontal="true"    android:textSize="20sp"    android:textColor="#000" />

 15.centerVertical: If centerVertical property is true, make the view vertically center. 
The value of align parent bottom is either true or false. 
Example: android:layout_centerVertical=”true”.

Below is the example code of centerVertical property and also layout image.

<!-- centerVertical example --> <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="Text1 center vertical"    android:layout_centerVertical="true"    android:textSize="20sp"    android:textColor="#000" />