The Android relative layout uses the relative positions of the nearby elements and the parent container to place elements on the screen. For example, you can do things like place element A to left of B or align the left side of elements A and C and so on.
- Alignment properties : These properties allow you to align a side of the element with that of the other element or its container
- Position properties.: These properties allow you to place the element based on the position of an existing element or its container.
The following two tables list the main properties available in the relative layout.
- Container properties: Since the parent container of the element is known ahead of time, these properties only take “true” or “false” as values.
|Alignment||layout_alignParentTop||Align the elements top with the top of its container|
|layout_alignParentBottom||Align the elements bottom with the bottom of its container|
|layout_alignParentLeft||Align the elements left with the left of its container|
|layout_alignParentRight||Align the elements right with the right of its container|
|Position||layout_centerHorizontal||Place the widget at the horizontal center of its container|
|layout_centerVertical||Place the widget at the vertical center of its container|
|layout_centerInParent||Place the widget at the midpoint ( horizontally and vertically) of its container|
- Non-container properties : These properties take the android:id of another element as the value. You can reference an element that is yet to be defined in the layout.xml file. We’ll see an example of this later.
|Alignment||layout_alignLeft||Align the left of the current element with the left of the element referenced in the property|
|layout_alignRight||Align the right of the current element with the right of the element referenced in the property|
|layout_alignTop||Align the top of the current element with the top of the element referenced in the property|
|layout_alignBottom||Align the bottom of the current element with the bottom of the element referenced in the property|
|layout_alignBaseline||Align the current element with the referenced element such that the text inside both the elements appear to be at the same line|
|Position||layout_toLeftOf||Place the element to the left of the element referenced in the property|
|layout_toRightOf||Place the element to the right of the element referenced in the property|
|layout_above||Place the element at the top of the element referenced in the property|
|layout_below||Place the element below the element referenced in the property|
Lets consider the relative layout with an example . In this example, we construct a simple form to take in a name and address and have buttons to submit or cancel the form. Here we are just concerned with the layout rather than the actual functionality of the form. So we wont be implementing the actions associated with the submit/cancel buttons.
- As shown, we align the left of the TextView element (named “name”) with the left of its parent container (which in this case is, relative layout) using the android:layout_alignParentLeft property.
- We also align the “name” element’s baseline with that of the EditText element. Note that at this point we are yet to define the EditText element ( named “nameText”). However we can still reference it the id in the relative layout. The first time we reference an id, we add a plus sign (@+id ) to the id attribute. Subsequent references can just use the @id without the plus sign.
- We place the “nameText ” element to the right of the “name” element using the android:layout_toRightOf property
- We then place the second TextView element (named “addr1″) below the “nameText” element and the second EditText element ( named “addrText”) to the right of “addr1″.
- Finally we place the “cancel” and “submit” buttons below “addrText” and next to each other.