Programming and Personal Development

Android Relative Layout

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.

There are two types  of  properties available in the relative layout,A simple demo for relative layout

  • 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.
Type Property Name Description
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.
Type Property Description
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 andExample xml layout showing the relative layout demo 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.

  1. 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.
  2. 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.
  3. We place the “nameText ” element to the right of the “name” element using the android:layout_toRightOf property
  4. 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″.
  5. Finally we place the “cancel” and “submit” buttons below “addrText” and next to each other.

 

Web Analytics