Home | History | Annotate | Download | only in views 
      1 page.title=Hello, RelativeLayout
      2 parent.title=Hello, Views
      3 parent.link=index.html
      4 @jd:body
      5 
      6 <p>A {@link android.widget.RelativeLayout} is a ViewGroup that allows you to layout child elements
      7 in positions relative to the parent or siblings elements.</p>
      8 
      9 <ol>
     10   <li>Start a new project/Activity called HelloRelativeLayout.</li>
     11   <li>Open the layout file. Make it like so:
     12 <pre>
     13 &lt;?xml version="1.0" encoding="utf-8"?>
     14 &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     15     android:layout_width="fill_parent"
     16     android:layout_height="fill_parent">
     17 
     18     &lt;TextView
     19         android:id="@+id/label"
     20         android:layout_width="fill_parent"
     21         android:layout_height="wrap_content"
     22         android:text="Type here:"/>
     23 
     24     &lt;EditText
     25         android:id="@+id/entry"
     26         android:layout_width="fill_parent"
     27         android:layout_height="wrap_content"
     28         android:background="@android:drawable/editbox_background"
     29         android:layout_below="@id/label"/>
     30 
     31     &lt;Button
     32         android:id="@+id/ok"
     33         android:layout_width="wrap_content"
     34         android:layout_height="wrap_content"
     35         android:layout_below="@id/entry"
     36         android:layout_alignParentRight="true"
     37         android:layout_marginLeft="10dip"
     38         android:text="OK" />
     39 
     40     &lt;Button
     41         android:layout_width="wrap_content"
     42         android:layout_height="wrap_content"
     43         android:layout_toLeftOf="@id/ok"
     44         android:layout_alignTop="@id/ok"
     45         android:text="Cancel" />
     46 
     47 &lt;/RelativeLayout>
     48 </pre>
     49 <p>Pay attention to each of the additional <code>layout_*</code> attributes (besides the 
     50 usual width and height, which are required for all elements). When using relative layout,
     51 we use attributes like <code>layout_below</code> and <code>layout_toLeftOf</code> to describe
     52 how we'd like to position each View. Naturally, these are different relative positions, and the
     53 value of the attribute is the id of the element we want the position relative to.</p>
     54 </li>
     55 <li>Make sure your Activity loads this layout in the <code>onCreate()</code> method:</p>
     56 <pre>
     57 public void onCreate(Bundle savedInstanceState) {
     58     super.onCreate(savedInstanceState);
     59     setContentView(R.layout.main);
     60 }
     61 </pre>
     62 <p><code>R.layout.main</code> refers to the <code>main.xml</code> layout file.</p>
     63 </li>
     64 <li>Run it.</li>
     65 </ol>
     66 <p>You should see the following:</p>
     67 <img src="images/hello-relativelayout.png" width="150px" />
     68 
     69 <h3>Resources</h3>
     70 <ul>
     71   <li>{@link android.widget.RelativeLayout}</li>
     72   <li>{@link android.widget.TextView}</li>
     73   <li>{@link android.widget.EditText}</li>
     74   <li>{@link android.widget.Button}</li>
     75 </ul>
     76