1 page.title=Relative Layout 2 parent.title=Layouts 3 parent.link=layout-objects.html 4 @jd:body 5 6 <div id="qv-wrapper"> 7 <div id="qv"> 8 <h2>In this document</h2> 9 <ol> 10 <li><a href="#Position">Positioning Views</a></li> 11 <li><a href="#Example">Example</a></li> 12 </ol> 13 <h2>Key classes</h2> 14 <ol> 15 <li>{@link android.widget.RelativeLayout}</li> 16 <li>{@link android.widget.RelativeLayout.LayoutParams}</li> 17 </ol> 18 </div> 19 </div> 20 21 <p>{@link android.widget.RelativeLayout} is a view group that displays child views in relative 22 positions. The position of each view can be specified as relative to sibling elements (such as to 23 the left-of or below another view) or in positions relative to the parent {@link 24 android.widget.RelativeLayout} area (such as aligned to the bottom, left of center).</p> 25 26 <img src="{@docRoot}images/ui/relativelayout.png" alt="" /> 27 28 <p>A {@link android.widget.RelativeLayout} is a very powerful utility for designing a user interface 29 because it can eliminate nested view groups and keep your layout hierarchy flat, which improves 30 performance. If you find yourself using several nested {@link android.widget.LinearLayout} groups, 31 you may be able to replace them with a single {@link android.widget.RelativeLayout}.</p> 32 33 34 <h2 id="Position">Positioning Views</h2> 35 36 <p>{@link android.widget.RelativeLayout} lets child views specify their position relative to the 37 parent view or to each other (specified by ID). So you can align two elements by right border, or 38 make one below another, centered in the screen, centered left, and so on. By default, all child 39 views are drawn at the top-left of the layout, so you must define the position of each view 40 using the various layout properties available from {@link 41 android.widget.RelativeLayout.LayoutParams}.</p> 42 43 <p>Some of the many layout properties available to views in a {@link android.widget.RelativeLayout} 44 include:</p> 45 <dl> 46 <dt><a 47 href="{@docRoot}reference/android/widget/RelativeLayout.LayoutParams.html#attr_android:layout_alignParentTop" 48 >{@code android:layout_alignParentTop}</a></dt> 49 <dd>If {@code "true"}, makes the top edge of this view match the top edge of the parent. </dd> 50 <dt><a 51 href="{@docRoot}reference/android/widget/RelativeLayout.LayoutParams.html#attr_android:layout_centerVertical" 52 >{@code android:layout_centerVertical}</a></dt> 53 <dd>If {@code "true"}, centers this child vertically within its parent.</dd> 54 <dt><a 55 href="{@docRoot}reference/android/widget/RelativeLayout.LayoutParams.html#attr_android:layout_below" 56 >{@code android:layout_below}</a></dt> 57 <dd>Positions the top edge of this view below the view specified with a resource ID.</dd> 58 <dt><a 59 href="{@docRoot}reference/android/widget/RelativeLayout.LayoutParams.html#attr_android:layout_toRightOf" 60 >{@code android:layout_toRightOf}</a></dt> 61 <dd>Positions the left edge of this view to the right of the view specified with a resource ID.</dd> 62 </dl> 63 64 <p>These are just a few examples. All layout attributes are documented at {@link 65 android.widget.RelativeLayout.LayoutParams}.</p> 66 67 <p>The value for each layout property is either a boolean to 68 enable a layout position relative to the parent {@link android.widget.RelativeLayout} or an ID that 69 references another view in the layout against which the view should be positioned.</p> 70 71 <p>In your XML layout, dependencies against other views in the layout can be declared in any order. 72 For example, you can declare that "view1" be positioned below "view2" even if "view2" is the last 73 view declared in the hierarchy. The example below demonstrates such a scenario.</p> 74 75 76 <h2 id="Example">Example</h2> 77 78 <p>Each of the attributes that control the relative position of each view are emphasized.</p> 79 <div class="figure" style="width:220px;margin-top:0"> 80 <img src="{@docRoot}images/ui/sample-relativelayout.png" alt="" /> 81 </div> 82 83 <pre> 84 <?xml version="1.0" encoding="utf-8"?> 85 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 86 android:layout_width="fill_parent" 87 android:layout_height="fill_parent" 88 android:paddingLeft="16dp" 89 android:paddingRight="16dp" > 90 <EditText 91 android:id="@+id/name" 92 android:layout_width="fill_parent" 93 android:layout_height="wrap_content" 94 android:hint="@string/reminder" /> 95 <Spinner 96 android:id="@+id/dates" 97 android:layout_width="0dp" 98 android:layout_height="wrap_content" 99 <strong>android:layout_below="@id/name"</strong> 100 <strong>android:layout_alignParentLeft="true"</strong> 101 <strong>android:layout_toLeftOf="@+id/times"</strong> /> 102 <Spinner 103 android:id="@id/times" 104 android:layout_width="96dp" 105 android:layout_height="wrap_content" 106 <strong>android:layout_below="@id/name"</strong> 107 <strong>android:layout_alignParentRight="true"</strong> /> 108 <Button 109 android:layout_width="96dp" 110 android:layout_height="wrap_content" 111 <strong>android:layout_below="@id/times"</strong> 112 <strong>android:layout_alignParentRight="true"</strong> 113 android:text="@string/done" /> 114 </RelativeLayout> 115 </pre> 116 117 <p>For details about all the layout attributes available to each child view of a {@link 118 android.widget.RelativeLayout}, see {@link android.widget.RelativeLayout.LayoutParams}.</p>
