1 page.title=Relative Layout 2 parent.title=Hello, Views 3 parent.link=index.html 4 @jd:body 5 6 <p>{@link android.widget.RelativeLayout} is a {@link android.view.ViewGroup} that displays 7 child {@link android.view.View} elements in relative positions. The position of a {@link 8 android.view.View} can be specified as relative to sibling elements (such as to the left-of or below 9 a given element) or in positions relative to the {@link android.widget.RelativeLayout} area (such as 10 aligned to the bottom, left of center).</p> 11 12 <p>A {@link android.widget.RelativeLayout} is a very powerful utility for designing a user 13 interface because it can eliminate nested {@link android.view.ViewGroup}s. If you find 14 yourself using several nested {@link android.widget.LinearLayout} groups, you may be able to 15 replace 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 54 android.widget.RelativeLayout}, you can use these attributes to describe 55 how you want to position each {@link android.view.View}. Each one of these attributes define a 56 different kind 57 of relative position. Some attributes use the resource ID of a sibling {@link android.view.View} 58 to define its own relative position. For example, the last {@link android.widget.Button} is 59 defined to lie to the left-of and aligned-with-the-top-of the {@link android.view.View} 60 identified 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 62 android.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> 67 public 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 73 layout file for the {@link android.app.Activity}, specified by the resource 74 ID — <code>R.layout.main</code> refers to the <code>res/layout/main.xml</code> layout 75 file.</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
