Android Layout Workdshop

LinearLayout

LinearLayout stablizes elements along a single orientation(vertical/horizontal). specify whether that orientation  is vertical or horizontal. 

A sample Layout XML using LinearLayout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

    android:layout_height="fill_parent">

     <Button 

    android:id="@+id/backbutton"

    android:text="Back"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" />

    <LinearLayout

    android:orientation="horizontal"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content">

   <TextView

    android:text="First Name"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" />

   <EditText

    android:width="100px"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout

    android:orientation="horizontal"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content">    

   <TextView

    android:text="Last Name"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" />

   <EditText

    android:width="100px"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" />

    </LinearLayout> 

</LinearLayout>

AbsoluteLayout

AbsoluteLayout is basison simple idea of placing each control at an absolute position on respected coordinate systems.  specify the x and y (horizontal and vertical coordinates) coordinates on the screen for each element.  This is not recommended for most UI development (in fact AbsoluteLayout is currently deprecated) since absolutely positioning every element on the screen makes an inflexible UI that is much more difficult to maintain.  Consider what happens if a control needs to be added to the UI. You would have to change the position of every single element that is shifted by the new control.

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <Button 

    android:id="@+id/backbutton"

    android:text="Back"

    android:layout_x="10px"

    android:layout_y="5px"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" />

    <TextView

    android:layout_x="10px"

    android:layout_y="110px"

    android:text="First Name"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" />

    <EditText

    android:layout_x="150px"

    android:layout_y="100px"

    android:width="100px"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" />

    <TextView

    android:layout_x="10px"

    android:layout_y="160px"

    android:text="Last Name"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" />

    <EditText

    android:layout_x="150px"

    android:layout_y="150px"

    android:width="100px"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" />

</AbsoluteLayout>

FrameLayout

FrameLayout is designed to display a single item at a time. You can have multiple elements within a FrameLayout but each element will be positioned based on the top left of the screen. Elements that overlap will be displayed overlapping. I have created a simple XML layout using FrameLayout that shows how this works.

<FrameLayout 

android:layout_width="fill_parent" 

android:layout_height="fill_parent" 

xmlns:android="http://schemas.android.com/apk/res/android">

<ImageView 

android:src="@drawable/icon"

android:scaleType="fitCenter"

android:layout_height="fill_parent"

android:layout_width="fill_parent"/>

<TextView

android:text="Hi Jitesh"

android:textSize="24sp"

android:textColor="#000000"

android:layout_height="fill_parent"

android:layout_width="fill_parent"

android:gravity="center"/>

</FrameLayout>

RelativeLayout

RelativeLayout lays out elements based on their relationships with one another, and with the parent container. This is arguably the most complicated layout, and we need several properties to actually get the layout we want.

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

Relative To Other Elements

These properties allow you to layout elements relative to other elements on screen. The value for each of these elements is the id of the element you are using to layout the new element. Each element that is used in this way must have an ID defined using android:id=”@+id/XXXXX” where XXXXX is replaced with the desired id. You use “@id/XXXXX” to reference an element by its id. One thing to remember is that referencing an element before it has been declared will produce an error.

• android:layout_above – Places the element above the specified element
• android:layout_below – Places the element below the specified element
• android:layout_toLeftOf – Places the element to the left of the specified element
• android:layout_toRightOf – Places the element to the right of the specified element

Alignment With Other Elements

These properties allow you to specify how elements are aligned in relation to other elements.

• android:layout_alignBaseline – Aligns baseline of the new element with the baseline of the specified element
• android:layout_alignBottom – Aligns the bottom of new element in with the bottom of the specified element
• android:layout_alignLeft – Aligns left edge of the new element with the left edge of the specified element
• android:layout_alignRight – Aligns right edge of the new element with the right edge of the specified element
• android:layout_alignTop – Places top of the new element in alignment with the top of the specified element

Here is a sample XML Layout

<RelativeLayout 

android:layout_width="fill_parent" 

android:layout_height="fill_parent" 

xmlns:android="http://schemas.android.com/apk/res/android">

<Button 

  android:id="@+id/backbutton"

  android:text="Back"

  android:layout_width="wrap_content"

  android:layout_height="wrap_content" />

<TextView

    android:id="@+id/firstName"

    android:text="First Name"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_below="@id/backbutton" />

<EditText

android:width="100px"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_toRightOf="@id/firstName"

android:layout_alignBaseline="@id/firstName" />

<TextView

android:id="@+id/lastName"

android:text="Last Name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@id/firstName" />

<EditText

android:width="100px"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_toRightOf="@id/lastName"

android:layout_alignBaseline="@id/lastName" />

</RelativeLayout>

TableLayout

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.

You can specify that an element should occupy more than one column using android:layout_span. This can increase the total column count as well, so if we have a row with two elements and each element has android:layout_span=”3″ then you will have at least six columns in your table.

By default, Android places each element in the first unused column in the row. You can, however, specify the column an element should occupy using android:layout_column.

Here is some sample XML using TableLayout.

<TableLayout 

android:layout_width="fill_parent" 

android:layout_height="fill_parent" 

xmlns:android="http://schemas.android.com/apk/res/android">

<TableRow>

<Button 

    android:id="@+id/backbutton"

    android:text="Back"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" />

</TableRow>

<TableRow>

<TextView

    android:text="First Name"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_column="1" />

    <EditText

    android:width="100px"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" />

</TableRow>

<TableRow>

<TextView

    android:text="Last Name"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_column="1" />

    <EditText

    android:width="100px"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" /> 

</TableRow>

</TableLayout>