Android Layout Tutorial

An Android layout is a class that handles arranging the way its children appear on the screen.  Anything that is a View (or inherits from View) can be a child of a layout. All of the layouts inherit from ViewGroup (which inherits from View) so you can nest layouts.  You could also create your own custom layout by making a class that inherits from ViewGroup

AbsoluteLayout  FrameLayout   LinearLayout   RelativeLayout   TableLayout
 


AbsoluteLayout
AbsoluteLayout is based on the simple idea of placing each control at an absolute position.  You specify the exact x and y coordinates on the screen for each control.  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="Learn-Android.com"
  android:textSize="24sp"
  android:textColor="#000000"
  android:layout_height="fill_parent"
  android:layout_width="fill_parent"
  android:gravity="center"/>
</FrameLayout>

LinearLayout
LinearLayout organizes elements along a single line. You specify whether that line is verticle or horizontal using android:orientation. Here is a sample Layout XML using LinearLayout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="horizontal"
 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" />
    <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" />
    <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>

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>