Over the course of this tutorial, we will take a look into Android RelativeLayout and its properties.
RelativeLayout is one among the most used layout after LinearLayout. It allows its child views to position relative to each other or relative to the container or another container. For example, if we have to build a complex layout as shown in the image below, this can be achieved with ease by using RelativeLayout.
Positioning Views in RelativeLayout
As discussed above, the RelativeLayout childs need to specify their position relative to the parent view or another siblings. If they don’t specify their position explicitly, by default they are positioned to the top-left corner of parent layout.
Some of the most useful RelativeLayout properties includes,
XML Attributes | Description |
---|---|
layout_alignParentTop | Accepts boolean value. If specified, the widget will be docked to the top of RelativeLayout. |
layout_alignParentBottom | Accepts boolean value. If specified, the widget will be docked to the bottom of RelativeLayout. |
layout_alignParentLeft | Accepts boolean value. If specified, the widget will be docked to the left edge of RelativeLayout. |
layout_alignParentRight | Accepts boolean value. If specified, the widget will be docked to the right edge of RelativeLayout. |
layout_centerInParent | Accepts boolean value. If specified, the widget will be aligned to center of RelativeLayout. |
layout_centerHorizontal | Accepts boolean value. If specified, the widget will be horizontally center aligned |
layout_centerVertical | Accepts boolean value. If specified, the widget will be vertically center aligned |
layout_below | Accepts sibling widget id. Places the widget below the view as specified widget id. |
layout_above | Accepts sibling widget id. Places the widget above the specified widget id. |
layout_toRightOf | Accepts sibling widget id. Places the widget to right of the view as specified widget id. |
layout_toLeftOf | Accepts sibling widget id. Places the widget to left of the view as specified widget id. |
layout_toEndOf | Accepts sibling widget id. Places the widget to end of the view as specified widget id. |
layout_toStartOf | Accepts sibling widget id. Places the widget to the beginning of the view as specified widget id. |
RelativeLayout Example
Let us create an example of RelativeLayout . For the sake of simplicity, we have made the example relatively very simple, by adding some random Buttons to demonstrate different RelativeLayout attributes.
Source Code is below
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="10dp"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:text="Button1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:text="Button2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:text="Button3" /> <Button android:id="@+id/button4" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="Button5" /> <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/button2" android:layout_centerHorizontal="true" android:text="Button4" /> <Button android:id="@+id/button6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/button4" android:layout_centerHorizontal="true" android:text="Button6" /> <Button android:id="@+id/button7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/button" android:layout_toEndOf="@+id/button" android:layout_toRightOf="@+id/button" android:text="Button7" /> </RelativeLayout>