RelativeLayout & TableLayout in Android

RelativeLayout

RELATIVELAYOUT is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).

Relative To Container

These properties will layout elements relative to the parent container.

• android:layout_alignParentBottom – Places the bottom of the element on the bottom of the container
• android:layout_alignParentLeft – Places the left of the element on the left side of the container
• android:layout_alignParentRight – Places the right of the element on the right side of the container
• android:layout_alignParentTop – Places the element at the top of the container
• android:layout_centerHorizontal – Centers the element horizontally within its parent container
• android:layout_centerInParent – Centers the element both horizontally and vertically within its container
• android:layout_centerVertical – Centers the element vertically within its parent container

Here is a sample XML Layout

android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="https://schemas.android.com/apk/res/android">

android:id="@+id/backbutton"
android:text="Back"
android:layout_width="wrap_content" 
android:layout_height="wrap_content" />

android:id="@+id/firstName"
android:text="First Name"
android:layout_width="wrap_content" 
android:layout_height="wrap_content"
android:layout_below="@id/backbutton" />

android:id="@+id/editFirstName"
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/firstName"
android:layout_below="@id/backbutton"/>

android:id="@+id/editLastName"
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/editFirstName"
android:layout_alignLeft="@id/editFirstName"/>

android:id="@+id/lastName" android:text="Last
Name" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/editLastName"
android:layout_below="@id/editFirstName" />

You probably noticed that we had to rearrange the elements in the XML since, you cannot reference an element that has not already been laid out. Here is what the updated RelativeLayout produces.

TableLayout

TableLayout is a ViewGroup that displays child View elements in rows and columns.

TableLayout organizes content into rows and columns. The rows are defined in the layout XML, and the columns are determined automatically by Android. This is done by creating at least one column for each element. So, for example, if you had a row with two elements and a row with five elements then you would have a layout with two rows and five columns.

Here is some sample XML using TableLayout.

android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="https://schemas.android.com/apk/res/android">

android:id="@+id/backbutton" android:text="Back" android:layout_width="wrap_content" android:layout_height="wrap_content" />

Checkout Android Interview Questions

android:text="First Name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" />

android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

android:text="Last Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />

android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

This is the result of that XML