Relative layout

Relative layout lays out widgets based on their position relative to each other. You can place a widget in a position relative to another widget’s position or relative to the container.

As we said in relative layout widgets can be placed

1. Relative to the container.
2. Relative to other widgets

Relative to the container :
The widgets are placed in position relative to their container like by setting the following properties:

• android:layout_alignParentTop|Bottom|Right|Left to true. This aligns the Top|Bottom|Right|Left side of the widget with the Top|Bottom|Right|Left side of the container.
• android:layout_centerVertical: the widget should be positioned vertically in the center of the container.
• android:layout_centerHorizontal: the widget should be positioned horizontally in the center of the container.
• android:layout_centerInParent: the widget should be positioned both vertically and horizontally in the middle of the container.

 
 
 
 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="android:layout_alignParentTop"
 android_layout_alignParentTop="true"
 />
 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="android:layout_alignParentBottom"
 android_layout_alignParentBottom="true"
 />

 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="android:layout_alignParentLeft"
 android_layout_alignParentLeft="true"
 />
 

 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="android:layout_alignParentRight"
 android_layout_alignParentRight="true"
 />

 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="android:layout_centerVertical"
 android_layout_centerVertical="true"
 />
 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="android:layout_centerHorizontal"
 android_layout_centerHorizontal="true"
 /> 

 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="android:layout_centerInParent"
 android_layout_centerInParent="true"
 />

Position Relative to other widgets’ positions:
There are four properties that determine the position of the widget in relation to other widgets:

• android:layout_above: the widget should be placed above the referenced widget. 
• android:layout_below: the widget should be placed below the referenced widget.
• android:layout_toRightOf: the widget should be placed to the right of the referenced widget.
• android:layout_toLeftOf: the widget should be placed above the referenced widget.

 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="Button2"
 android_id="@+id/btn2"
 />
 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="Button1 is below button2"
 android_layout_below="@id/btn2"
 android_id="@+id/btn1"
 />
 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="Button3 below button 1"
 android_layout_below="@id/btn1"
 android_id="@+id/btn3"
 />

 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="Button2"
 android_id="@+id/btn2"
 />
 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="Button1 is to the right of button2"
 android_layout_toRightOf="@id/btn2"
 android_id="@+id/btn1"
 />

As we saw that there are properties that define the alignment of a widget relative to the container, there are also five properties that determine the position of the widget in relation to other widgets:

1. android:layout_alignTop|Bottom|Right|Left: indicates that the widget’s Top|Bottom|Left|Right should be aligned with the Top|Bottom|Right|Left of the widget referenced in the property. 
2. android:layout_alignBaseLine: indicates that the two widget’s baselines should be aligned.

 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="Button2"
 android_id="@+id/btn2"
 android_layout_centerVertical="true"
 />
 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="Button1 is aligned to the top & Bottom of button2"
 android_layout_alignTop="@id/btn2"
 android_layout_toRightOf="@id/btn2"
 android_layout_alignBottom="@id/btn2"
 /> 

Notes:

• When you reference a widget in a relative layout property, you must assure that this widget has been already defined in the layout.
• When you use the value fill_parent to assign athe height of a widget in a relative container, it could occupy all the available space so that any further controls defined in the xml file would not appear.
• When referencing another control in relative layout property, we use the notation “@id/widgetID”.

Related Posts by Categories