Android UI Tutorial - Android RelativeLayout








The RelativeLayout enables you to specify how child views are positioned relative to each other.

Consider the following main.xml file: 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/RLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android" >

    <TextView
        android:id="@+id/lblComments"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Comments"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" />

    <EditText
        android:id="@+id/txtComments"
           android:layout_width="fill_parent"
           android:layout_height="170px"
           android:textSize="18sp"
           android:layout_alignLeft="@+id/lblComments"
           android:layout_below="@+id/lblComments"
           android:layout_centerHorizontal="true" />
    <Button
           android:id="@+id/btnSave"
           android:layout_width="125px"
           android:layout_height="wrap_content"
           android:text="Save"
           android:layout_below="@+id/txtComments"
           android:layout_alignRight="@+id/txtComments" />

    <Button
           android:id="@+id/btnCancel"
           android:layout_width="124px"
           android:layout_height="wrap_content"
           android:text="Cancel"
           android:layout_below="@+id/txtComments"
           android:layout_alignLeft="@+id/txtComments" />
</RelativeLayout>
null

Each view embedded within the RelativeLayout has attributes that enable it to align with another view.

These attributes are as follows:

  • layout_alignParentTop
  • layout_alignParentLeft
  • layout_alignLeft
  • layout_alignRight
  • layout_below
  • layout_centerHorizontal

The value for each of these attributes is the ID for the view that you are referencing.





Example

The following code shows how to use RelativeLayout.

Layout xml

<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:padding="5px">
  <TextView android:id="@+id/label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="URL:"
    android:paddingTop="15px"/>
  <EditText
    android:id="@+id/entry"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/label"
    android:layout_alignBaseline="@id/label"/>
  <Button
    android:id="@+id/ok"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/entry"
    android:layout_alignRight="@id/entry"
    android:text="OK" />
  <Button
    android:id="@+id/cancel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/ok"
    android:layout_alignTop="@id/ok"
    android:text="Cancel" />
</RelativeLayout>

Java code

import android.app.Activity;
import android.os.Bundle;
/*from w  ww  .  jav  a 2 s .  c  o m*/
public class RelativeLayoutDemo extends Activity {
  @Override
  public void onCreate(Bundle icicle) {
    super.onCreate(icicle);
    setContentView(R.layout.main);
  }
}
null