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<?xml version="1.0" encoding="utf-8"?> 22<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 23 android:layout_width="fill_parent" 24 android:layout_height="fill_parent"> 25 <TextView 26 android:id="@+id/label" 27 android:layout_width="fill_parent" 28 android:layout_height="wrap_content" 29 android:text="Type here:"/> 30 <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 <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 <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</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 — <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