• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=Relative Layout
2parent.title=Hello, Views
3parent.link=index.html
4@jd:body
5
6<p>{@link android.widget.RelativeLayout} is a {@link android.view.ViewGroup} that displays
7child {@link android.view.View} elements in relative positions. The position of a {@link
8android.view.View} can be specified as relative to sibling elements (such as to the left-of or below
9a given element) or in positions relative to the {@link android.widget.RelativeLayout} area (such as
10aligned to the bottom, left of center).</p>
11
12<p>A {@link android.widget.RelativeLayout} is a very powerful utility for designing a user
13interface because it can eliminate nested {@link android.view.ViewGroup}s. If you find
14yourself using several nested {@link android.widget.LinearLayout} groups, you may be able to
15replace them with a single {@link android.widget.RelativeLayout}.</p>
16
17<ol>
18  <li>Start a new project named <em>HelloRelativeLayout</em>.</li>
19  <li>Open the <code>res/layout/main.xml</code> file and insert the following:
20<pre>
21&lt;?xml version="1.0" encoding="utf-8"?>
22&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
23    android:layout_width="fill_parent"
24    android:layout_height="fill_parent">
25    &lt;TextView
26        android:id="@+id/label"
27        android:layout_width="fill_parent"
28        android:layout_height="wrap_content"
29        android:text="Type here:"/>
30    &lt;EditText
31        android:id="@+id/entry"
32        android:layout_width="fill_parent"
33        android:layout_height="wrap_content"
34        android:background="@android:drawable/editbox_background"
35        android:layout_below="@id/label"/>
36    &lt;Button
37        android:id="@+id/ok"
38        android:layout_width="wrap_content"
39        android:layout_height="wrap_content"
40        android:layout_below="@id/entry"
41        android:layout_alignParentRight="true"
42        android:layout_marginLeft="10dip"
43        android:text="OK" />
44    &lt;Button
45        android:layout_width="wrap_content"
46        android:layout_height="wrap_content"
47        android:layout_toLeftOf="@id/ok"
48        android:layout_alignTop="@id/ok"
49        android:text="Cancel" />
50&lt;/RelativeLayout>
51</pre>
52<p>Notice each of the <code>android:layout_*</code> attributes, such as <code>layout_below</code>,
53<code>layout_alignParentRight</code>, and <code>layout_toLeftOf</code>. When using a {@link
54android.widget.RelativeLayout}, you can use these attributes to describe
55how you want to position each {@link android.view.View}. Each one of these attributes define a
56different kind
57of relative position. Some attributes use the resource ID of a sibling {@link android.view.View}
58to define its own relative position. For example, the last {@link android.widget.Button} is
59defined to lie to the left-of and aligned-with-the-top-of the {@link android.view.View}
60identified by the ID <code>ok</code> (which is the previous {@link android.widget.Button}).</p>
61<p>All of the available layout attributes are defined in {@link
62android.widget.RelativeLayout.LayoutParams}.</p>
63</li>
64<li>Make sure you load this layout in the
65{@link android.app.Activity#onCreate(Bundle) onCreate()} method:</p>
66<pre>
67public void onCreate(Bundle savedInstanceState) {
68    super.onCreate(savedInstanceState);
69    setContentView(R.layout.main);
70}
71</pre>
72<p>The {@link android.app.Activity#setContentView(int)} method loads the
73layout file for the {@link android.app.Activity}, specified by the resource
74ID &mdash; <code>R.layout.main</code> refers to the <code>res/layout/main.xml</code> layout
75file.</p>
76</li>
77<li>Run the application.</li>
78</ol>
79<p>You should see the following layout:</p>
80<img src="images/hello-relativelayout.png" width="150px" />
81
82<h3>Resources</h3>
83<ul>
84  <li>{@link android.widget.RelativeLayout}</li>
85  <li>{@link android.widget.RelativeLayout.LayoutParams}</li>
86  <li>{@link android.widget.TextView}</li>
87  <li>{@link android.widget.EditText}</li>
88  <li>{@link android.widget.Button}</li>
89</ul>
90