{"id":292,"date":"2015-12-27T13:40:02","date_gmt":"2015-12-27T13:40:02","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=292"},"modified":"2018-06-05T10:20:51","modified_gmt":"2018-06-05T10:20:51","slug":"relative-layout","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/relative-layout","title":{"rendered":"Relative Layout In Android With Example"},"content":{"rendered":"

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\u2019s 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.<\/p>\n

In Relative Layout, you can use \u201cabove, below, left and right\u201d to arrange the component\u2019s position in relation to other component. For example, in the below image you can see content is placed in related to Heading.<\/strong><\/p>\n

\"Relative<\/center>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<\/em>. So Android developer can design UI either using drag & drop or using XML code. Professional developer uses both for designing UI.<\/p>\n
\n

Attributes of Relative layout:<\/strong><\/h4>\n

Lets see different properties of Relative Layout which will be used while designing Android App UI:<\/p>\n

1.above:<\/strong><\/span> 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” .<\/p>\n

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.<\/p>\n

<!-- textView2 is placed above textView--><\/strong>\r\n<TextView\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n        android:text=\"Text2\"\r\n        android:id=\"@+id\/textView2\"\r\n        android:layout_above=\"@+id\/textView\"\r\n        android:layout_marginBottom=\"100dp\"\r\n        android:layout_centerHorizontal=\"true\"\/>\r\n<\/pre>\n
\"above<\/center>2. alignBottom:<\/strong><\/span> 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″<\/p>\n
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.<\/p>\n
<!-- textView2 alignBottom of textView --><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n\u00a0\u00a0\u00a0 android:layout_centerHorizontal=\"true\"    \r\n    android:id=\"@+id\/textView2\"\r\n    android:layout_alignBottom=\"@+id\/textView\"\r\n    android:text=\"Text2 alignBottom of Text1\"\r\n    android:layout_marginBottom=\"90dp\"\r\n\/><\/pre>\n
\"alignBottom<\/center>3. alignLeft:<\/strong><\/span> 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″.<\/p>\n
Below is the code and layout image in which we have aligned a view with id textView2 left of another view with id textView.<\/p>\n
<!-- textView2 alignLeft of textView --><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n    android:id=\"@+id\/textView2\"\r\n    android:layout_alignLeft=\"@+id\/textView\"\r\n    android:text=\"Text2 alignLeft of Text1\"\r\n    android:layout_below=\"@+id\/textView\" \r\n    android:layout_marginTop=\"20dp\"\/><\/pre>\n
\"alignLeft<\/center>4. alignRight:<\/strong><\/span> 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″<\/p>\n
Below is the code and layout image in which we have aligned a view with id textView2 right of another view with id textView.<\/p>\n
<!-- textView2 alignRight of textView--><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n    android:id=\"@+id\/textView2\"\r\n    android:layout_alignRight=\"@+id\/textView\"\r\n    android:text=\"Text2 alignRight of Text1\"\r\n    android:layout_below=\"@+id\/textView\"\r\n    android:layout_marginTop=\"20dp\"\/><\/pre>\n
\"alignRight<\/center>5.alignStart:<\/strong><\/span> 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″<\/p>\n
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.<\/p>\n
<!-- Text2 alignStart--><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n    android:id=\"@+id\/textView2\"\r\n    android:text=\"Text2 align start of Text1\"\r\n    android:layout_alignStart=\"@+id\/textView\"\r\n \/><\/pre>\n
\"alignStart<\/center>6. alignTop:<\/strong><\/span> 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″.<\/p>\n
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.<\/p>\n
<!--text is align top on Image--><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n    android:id=\"@+id\/textView\"\r\n    android:layout_alignTop=\"@+id\/imageView\"\r\n    android:text=\"Text Here is AlignTop on Image\"\r\n     \/><\/pre>\n
\"alignTop<\/center>7.alignParentBottom:<\/strong> <\/span>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”<\/p>\n
Important Note:<\/span><\/strong>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.<\/p>\n
Below is the alignParentBottom code and layout image in which textView is simply displayed using the alignParentBottom.<\/p>\n
<!-- textView is alignParentBottom --><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n    android:id=\"@+id\/textView\"\r\n    android:text=\"Text Here is AlignParentBottom with bottom margin of 120dp\"\r\n    android:layout_alignParentBottom=\"true\"\r\n    android:layout_alignParentLeft=\"true\"\r\n    android:layout_alignParentStart=\"true\"\r\n    android:layout_marginBottom=\"120dp\" \/><\/pre>\n
\"alignParentBottom<\/center>8. alignParentEnd:<\/strong><\/span> 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\u00a0is either true or false. Example: android:layout_alignParentEnd=”true”.<\/p>\n
Important Note: <\/strong><\/span>In\u00a0alignParentEnd the bottom edge of the view matches the bottom edge of the parent.<\/p>\n
Below is the alignParentEnd code and layout image in which textView is simply displayed on Image in the end.<\/p>\n
<!-- Text displayed in the end of parent image--><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n    android:id=\"@+id\/textView\"\r\n    android:text=\"Text in Parent End\"\r\n    android:layout_alignBottom=\"@+id\/imageView\"\r\n    android:layout_alignParentEnd=\"true\"\r\n \/><\/pre>\n
\"alignParentEnd<\/center>9. alignParentLeft:<\/strong><\/span> 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\u00a0is either true or false. Example: android:layout_alignParentLeft=”true”.<\/p>\n
Important Note:<\/span>\u00a0<\/strong>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\u00a0of the referenced view but in alignParentLeft the left\u00a0edge of the view matches the left\u00a0edge of the parent.<\/p>\n
Below is the alignParentLeft example code and layout image in which textView is simply displayed on parent Image in the left side.<\/p>\n
<!-- align parent left in Android --><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n    android:id=\"@+id\/textView\"\r\n    android:text=\"Text in Parent Left\" \r\n    android:layout_alignBottom=\"@+id\/imageView\"\r\n    android:layout_alignParentLeft=\"true\"\r\n     \/><\/pre>\n
\"alignParentLeft<\/center>10. alignParentRight:<\/strong><\/span> 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\u00a0is either true or false. Example: android:layout_alignParentRight=”true”.<\/p>\n
Important Note:<\/span>\u00a0<\/strong>alignParentRight\u00a0and 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\u00a0of the referenced view but in alignParentRight\u00a0the right\u00a0edge of the view matches the right\u00a0edge of the parent.<\/p>\n
Below is the alignParentRight example code and layout image in which textView is simply displayed on parent Image in the right side.<\/p>\n
<!-- alignRightParent Example --><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n    android:id=\"@+id\/textView\"\r\n    android:text=\"Text in Parent Right\"\r\n    android:layout_alignBottom=\"@+id\/imageView\"\r\n    android:layout_alignParentRight=\"true\"\r\n  \/><\/pre>\n
\"alignParentRight<\/center>11.alignParentStart:<\/strong><\/span> 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\u00a0is either true or false. Example: android:layout_alignParentStart=”true”.<\/p>\n
Important Note:<\/span>\u00a0<\/strong>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\u00a0edge of the view matches the start\u00a0edge of the parent(RelativeLayout).<\/p>\n
Below is the alignParentStart example code and layout image in which textView is simply displayed on parent Image in the right side.<\/p>\n
<!-- alignParentStart Example --><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n    android:id=\"@+id\/textView\"\r\n    android:text=\"Text in Parent Start\"\r\n    android:layout_alignTop=\"@+id\/imageView\"\r\n    android:layout_alignParentStart=\"true\"\r\n     \/><\/pre>\n
\"alignParentStart<\/center>12.alignParentTop:<\/strong><\/span> 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”.<\/p>\n
Important Note:<\/span>\u00a0<\/strong>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\u00a0of the referenced view but in alignParentTop the top\u00a0edge of the view matches the top\u00a0edge of the parent(RelativeLayout).<\/p>\n
Below is the example code of alignParentTop property and also layout image.<\/p>\n
<!-- alignParentTop example --><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:text=\"Text1 align parent top\"\r\n    android:layout_alignParentTop=\"true\"\r\n    android:layout_margin=\"20dp\"\r\n    android:textSize=\"20sp\"\r\n    android:textColor=\"#000\"\/><\/pre>\n
\"alignParentTop<\/center>13.centerInParent:<\/strong><\/span> If center in parent is true, makes the view in the center of the screen vertically and horizontally. The value of center in parent\u00a0is either true or false. Example: android:layout_centerInParent=”true”.<\/p>\n
Below is the example code of centerInParent property and also layout image.<\/p>\n
<!-- centerInParent example --><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:text=\"Text1 center in parent\"\r\n    android:layout_centerInParent=\"true\"\r\n    android:textSize=\"20sp\"\r\n    android:textColor=\"#000\"\r\n\/><\/pre>\n
\"center<\/center>14.centerHorizontal:<\/strong><\/span> If centerHorizontal property is true, makes the view horizontally center. The value of centerHorizontal\u00a0is either true or false.Example: android:layout_centerHorizontal=”true”.<\/p>\n
Below is the example code of centerHorizontal property and also layout image.<\/p>\n
<!-- centerHorizontal example --><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:text=\"Text1 center Horizontal\"\r\n    android:layout_centerHorizontal=\"true\"\r\n    android:textSize=\"20sp\"\r\n    android:textColor=\"#000\"\r\n\/><\/pre>\n
\"center<\/center>15.centerVertical:<\/strong><\/span> 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”.<\/p>\n
Below is the example code of centerVertical property and also layout image.<\/p>\n
<!-- centerVertical example --><\/strong>\r\n<TextView\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:text=\"Text1 center vertical\"\r\n    android:layout_centerVertical=\"true\"\r\n    android:textSize=\"20sp\"\r\n    android:textColor=\"#000\"\r\n\/><\/pre>\n
\"center<\/center><\/p>\n
\n
Relative Layout Examples With Code And Explanation:<\/strong><\/h4>\n
Example 1:<\/strong><\/span> Here we are designing a simple log in screen in Android Studio using Relative Layout. Below is the final output:<\/p>\n
\"Relative<\/center>Below is the code of activity_main.xml for designing UI with explanation included in it:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n\r\n<!--Relative Layout Is Used--><\/strong>\r\n\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n\r\n    <!--Text View for Displaying SIGN IN Text At Top of UI--><\/strong>\r\n\r\n    <TextView\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n        android:text=\"SIGN IN\"\r\n        android:id=\"@+id\/textView3\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:layout_centerHorizontal=\"true\" \/>\r\n\r\n    <!--Text View for Displaying Username--><\/strong>\r\n\r\n    <TextView\r\n        android:id=\"@+id\/userName\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_marginLeft=\"@dimen\/activity_horizontal_margin\"\r\n        android:layout_marginTop=\"110dp\"\r\n        android:text=\"UserName:\"\r\n        android:textColor=\"#000000\"\r\n        android:textSize=\"20sp\" \/>\r\n\r\n    <!--Text View for Displaying Password--><\/strong>\r\n\r\n    <TextView\r\n        android:id=\"@+id\/password\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_below=\"@+id\/userName\"\r\n        android:layout_margin=\"@dimen\/activity_horizontal_margin\"\r\n        android:text=\"Password:\"\r\n        android:textColor=\"#000000\"\r\n        android:textSize=\"20sp\" \/>\r\n\r\n    <!--Edit Text for Filling Username--><\/strong>\r\n\r\n    <EditText\r\n        android:id=\"@+id\/edt_userName\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"40dp\"\r\n        android:layout_marginLeft=\"@dimen\/activity_horizontal_margin\"\r\n        android:layout_marginTop=\"100dp\"\r\n        android:layout_toRightOf=\"@+id\/userName\"\r\n        android:hint=\"User Name\" \/>\r\n\r\n    <!--Edit Text for Filling Password--><\/strong>\r\n\r\n    <EditText\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"40dp\"\r\n        android:layout_below=\"@+id\/edt_userName\"\r\n        android:layout_centerVertical=\"true\"\r\n        android:layout_toRightOf=\"@+id\/password\"\r\n        android:hint=\"Password\" \/>\r\n\r\n    <!--Button for Clicking after filling details--><\/strong>\r\n\r\n    <Button\r\n        android:id=\"@+id\/btnLogin\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_below=\"@+id\/password\"\r\n        android:layout_centerHorizontal=\"true\"\r\n        android:layout_marginTop=\"20dp\"\r\n        android:background=\"#03B424\"\r\n        android:text=\"Login\"\r\n        android:textColor=\"#ffffff\"\r\n        android:textStyle=\"bold\" \/>\r\n\r\n\r\n<\/RelativeLayout><\/pre>\n
Output:<\/strong><\/span><\/p>\n
\"Relative<\/center><\/p>\n
\n
Difference between Linear And Relative Layout:<\/strong><\/h4>\n
RELATIVE LAYOUT:<\/strong><\/p>\n