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.
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.
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.
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” .
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.
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″
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.
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″.
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 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″
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.
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″
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.
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″.
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.
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”
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.
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.
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”.
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.
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.
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”.
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.
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.
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”.
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.
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.
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”.
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).
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.
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”.
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).
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”.
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”.
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”.
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"
/>
|